News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Quick Spoiler

Started by Bugo, October 13, 2011, 09:51:33 AM

Previous topic - Next topic

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.

[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


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
.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.

.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).

SMF Tricks - Free & Premium Responsive Themes for SMF.

Bugo

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

Code (css) Select
.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?

[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


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.
Holder of controversial views, all of which my own.

Bugo

Ok, here is a full example:

Code (css) Select
.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

Quote from: Arantor on January 14, 2024, 12:22:52 PMThe 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?
MacOsX (last)
SMF 2.0.15 and 2.1.2 (different forums)
Chrome (last) or Safari (last)

Bugo

Not at the moment.

Julius_2000

Quote from: Raffoz on January 27, 2024, 06:54:10 AMTks @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:
[spoiler color=red]Red[/spoiler]
[spoiler color=blue]Blue[/spoiler]

Advertisement: