Hi guys, hopefully someone can help.
Currently building a website and using the SiteOrigin CSS editor to help with the style. On some elements we won’t different coloured fonts – but when I change it on the CSS editor, it changes all of the other same elements within the website.
Can someone provide me with a step by step process to customise each element?
Many thanks.
Hi Elevatos,
Unfortunately, we don’t currently have a written guide for this but basically, you need to be very specific to ensure the CSS only affects that one specific area. In other words, a vague selector will mean that more will get affected while a highly specific selector will ensure only the specific area is affected. Using custom row/cell/widget classes will help make this process easier. For more information about general specificity, I would give the following articles a quick read:
Specificity – MDN
Specifics on CSS Specificity – CSS Tricks
Hi Alex,
Thanks for getting back to me. I am rubbish at CSS, so that doesn’t really make sense to me.
How about if I was to just limit it to a page? I was informed that I was just to add .about-us, if the page ID was About Us – but this doesn’t seem to work?
Thanks
Hi Elevatos,
That’s fine. .about-us won’t work unless you’ve specifically set it (I recommend Custom Body Class) as only a few select pages have word ids (.home, .blog, .archive, etc), the rest have literal page ids that you need to reference.
Here’s an old guide I wrote on finding the Page ID (and other ids).
On every WordPress page, you’ll find a unique ID class that will allow you to directly target that page and only that page. It’s always attached to the body of the page. Getting the classes of the body via our Custom CSS plugin can be quite tricky. Instead, let’s simplify it. Open up the page you would like to target. Then, if you’re in Chrome, Firefox or any other WebKit-based browsers, press CTRL + U. If you’re using Internet Explorer right click anywhere and select the “View Source Option”.
You’ll now see the markup of this page. Press CTRL + F and type in <body
There's also a couple of other useful classes attached to it and here's a quick rundown of what is attached to my local home page.
home
This class is only ever present when the current page is the homepage.
page
This tells you that the current page is a page. This is only present on actual pages (read: WordPress defined pages) and will be replaced with something else on non-pages. (example being single-post)
page-id-49
This is that unique ID I was talking about before. If you target this class it will ONLY affect this page.
logged-in
Only present if the user is logged in.
admin-bar
Only present if the admin bar is visible (remember, this can be disabled by the user)
siteorigin-panels
This is present when the page was built using SiteOrigin Page Builder.
—
Hopefully, this helps you. I would also recommend giving this article a read, How CSS Selectors Work.
Hi Alex,
Just what I needed! Thank you very much.