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.

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: