Quick Spoiler

[jsx]

I'm using the green spoiler theme. I added this code to quick_spoiler.css for a test and when I switch the theme to dark, the spoiler still looks the same, i.e. it is green.

Code Select Expand

[data-colormode="dark"] .sp-wrap-green {
background: none repeat scroll 0% 0% red;
border-color: #d92f31;
}

[data-colormode="dark"] .sp-wrap-green .sp-head {
color: #fff;
}

[Bugo]

Cache?

[jsx]

Clearing the forum cache helped, but only the spoiler border changed to red, the spoiler background still remains green. And I also noticed that after removing this code from the file, after overwriting the file on the server and after clearing the forum cache, I still have this red border. I do not know what's going on.

[Bugo]

You need to change all this block of code:

Code (css) Select Expand

.sp-wrap-green {
background: none repeat scroll 0% 0% #A9D0B3;
border-color: #89BE95;
}
.sp-wrap-green .sp-head {
color: #2A2A2A;
}
.sp-wrap-green .sp-body {
background: #DBEBDF;
border-top: 1px solid #89BE95;
}
.sp-wrap-green .sp-foot {
color: #444;
}

Add prefix [data-colormode="dark"] for each block, and replace colors.

[jsx]

I understand, but I want this block to remain as it is when the light NameX theme is enabled. If I change to a dark theme or any user does, I would like that green spoiler background to change to a dark background.

Code Select Expand

.sp-wrap-green {
    background: none repeat scroll 0% 0% #A9D0B3;
    border-color: #89BE95;
}
.sp-wrap-green .sp-head {
    color: #2A2A2A;
}
.sp-wrap-green .sp-body {
    background: #DBEBDF;
    border-top: 1px solid #89BE95;
}
.sp-wrap-green .sp-foot {
    color: #444;
}

[Diego Andrés]

Use [data-colormode="dark"] like Bugo said.
Use light to target light, use [data-themecolor="green"] to target green (though not relevant for you since you don't use variants).

[Bugo]

@jsx, you should ADD these changes, but NOT replace the current.

Code (css) Select Expand

.sp-wrap-green {
background: none repeat scroll 0% 0% #A9D0B3;
border-color: #89BE95;
}
.sp-wrap-green .sp-head {
color: #2A2A2A;
}
.sp-wrap-green .sp-body {
background: #DBEBDF;
border-top: 1px solid #89BE95;
}
.sp-wrap-green .sp-foot {
color: #444;
}

/* Fixes */
[data-colormode="dark"] .sp-wrap-green {
background: none repeat scroll 0% 0% YOUR_COLOR;
border-color: YOUR_COLOR
}
...


[jsx]

Should I add this code at the end of the quick_spoiler.css file?

Code Select Expand

[data-colormode="dark"] .sp-wrap-green {
    background: none repeat scroll 0% 0% #020901;
    border-color: #020901;
}
[data-colormode="dark"] .sp-wrap-green .sp-head {
    color: #020901;
}
[data-colormode="dark"] .sp-wrap-green .sp-body {
    background: #020901;
    border-top: 1px solid #020901;
}
[data-colormode="dark"] .sp-wrap-green .sp-foot {
    color: #020901;
}

[Bugo]

Not necessary.

[jsx]

I added the code you gave me above and unfortunately the spoiler color did not change when I have NameX dark mode enabled. I cleared the forum cache and I still see the green spoiler color. Maybe I don't understand something.

[Arantor]

The CSS is not cached by the forum cache but by the browser cache. Need to clear that separately in your browser.

[Bugo]

Ok, here is a full example:

Code (css) Select Expand

.sp-wrap-green {
    background: none repeat scroll 0% 0% #A9D0B3;
    border-color: #89BE95;
}
.sp-wrap-green .sp-head {
    color: #2A2A2A;
}
.sp-wrap-green .sp-body {
    background: #DBEBDF;
    border-top: 1px solid #89BE95;
}
.sp-wrap-green .sp-foot {
    color: #444;
}

[data-colormode="dark"] .sp-wrap-green {
    background: none repeat scroll 0% 0% #ca0f22;
    border-color: #d73f10;
}
[data-colormode="dark"] .sp-wrap-green .sp-head {
    color: #f4ecec;
}
[data-colormode="dark"] .sp-wrap-green .sp-body {
    background: #DBEBDF;
    color: #000;
    border-top: 1px solid #e8d743;
}
[data-colormode="dark"] .sp-wrap-green .sp-foot {
    color: #444;
}


[jsx]

The CSS is not cached by the forum cache but by the browser cache. Need to clear that separately in your browser.

I use CCleaner to clear the browser cache. Even after clearing the cache and logging in to the forum, I still see the previous appearance of the spoiler, not the updated one. Only when I uninstall Quick Spoiler, reinstall it, and upload the changed quick_spoiler.css to the server that I see the change.

Thanks @Bugo for your help. But I don't know why I don't see the change in this spoiler right away, I just have to uninstall the mod and reinstall and then when I upload the changed quick_spoiler.css file I already see the change.

[Raffoz]

Tks @Bugo!

Is it possible to change color for every single instance in the forum?
I set red as default, but it it possible to change for every single time I post something?

[Bugo]

Not at the moment.

[Julius_2000]

Tks @Bugo!

Is it possible to change color for every single instance in the forum?
I set red as default, but it it possible to change for every single time I post something?

Do you mean you want a randomized color for your spoiler header?

[Bugo]

It seems he wants a color attribute for the spoiler tag:

Code Select Expand

[spoiler color=red]Red[/spoiler]
[spoiler color=blue]Blue[/spoiler]