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!