Hi, I am having issues with the CSS visual editor. I have used it to create my first pages, Home stores and home promo. They all worked fine. Now I am building another page and when I was finished with it and saved it. I looked at the previous pages i had made and the formatting was all messed up. It seems I was able to format each page the way I wanted to with out effecting the look of other pages. Now the layout and spacing and aliment of the pages I thought were finished and looking good are looking like crap. I am pretty new to this. I don’t understand why it is changing all things not just the page im in. For example When I changed the paragraph spacing on my History page it changed the home and stores page too.
css editor changing all formats
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Jessica,
Custom CSS affects all pages. If you wish to specifically target a page you’ll need to use selectors that account for this. For more information please refer to the following guide:
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.
With this information, you could target this specific page by using the following CSS:
.page-id-49 p { color: #0f0; }That CSS will change the paragraph on my desired page.
—
Hopefully, this helps you. I would also recommend giving this article a read, How CSS Selectors Work.