Edit Globals on specific pages via CSS

I Need Help
1

HI guys, I’m working on CSS to edit some global elements only on certain pages.

To do this, I create a widget on the page that contains the same global classes with the modified code (CSS in !important).

I’m not sure if this is legal :smiling_face_with_sunglasses: , but everything works perfectly, except that in browser preview, CSS changes are reflected on other pages.

The published site is perfect, so I don’t know if it’s a bug or something else :thinking: has anyone had a similar thing?

thanks :folded_hands:

2

Excessive use of !important creates complications.

If you make use of CSS specificity, you can add a “targeting” class to the page body. And set up the appropriate selectors in the class manager. And limit the use of !important.

3

Hi @PeteSharp, you well?

Can you explain this a bit more please? I sort of understand - but I’m stupid.

Cheers

4

Pete thanks a lot! :folded_hands: I’ll try.
Thanks also for the criticism about using Important. You’re right, and I try to avoid it, but in my case it was necessary.
In any case, it’s good to know that if you use CSS in Important to edit globals locally, the preview will reflect the changes on other pages as well :thinking:

Thanks again!

5

Hi @TrevReav

Still above ground, thanks :grin:

CSS specificity is how the browser decides which style “wins”, based on how specific the selector combination is.

Just smarter ways of doing things. (Bit like people using 99999 for z-index, this creates problems for yourself. Bootstrap has specific z-index numbers it uses, stick with them and you have no issues).

eg

p {color: green;}

.card p {color: orange;}     /* this beats the green */

#content p {color: red;}    /* this beats green and orange */

!important is handy though, especially for things you have no control over. So its still important :upside_down_face:

2 Likes