Greetings,
First, LOVE your stuff (Page Builder, Widgets, SO CSS).
Just started using SO CSS since it is so much easier to work with the inspector right there instead of fiddling around with Chrome trying different things and then transferring the settings over to another CSS plug-in I have (Royal Custom CSS).
However, one thing I am unclear on is whether the CSS edited changes apply just to the page the visual inspector has open, or do they apply site wide?
If they are site wide, is there a way to make them page specific?
For instance, using Royal Custom CSS I could apply the following:
h3 {
font-size: 30px;
text-align: center;
font-weight: 700;
text-shadow: 2px 2px 3px #6eb6ff;
width: 100%;
height: 38px;
background-color: #f3f3f1;
box-shadow: 1px 5px 5px #bfbfbf;
border-radius: 5px;
padding-top: 10px;
}
…and it would be used ONLY on that particular page. With SO CSS it would appear to be site wide unless I am doing something wrong.
I searched around available documentation and really did not see this question specifically addressed, the general impression I got was that the CSS applied via SO CSS is applied site wide.
If that is the case then keeping Royal Custom CSS for page specific tweaks would seem appropriate but I really do try to minimize the number of plug-ins I’ve installed and would love to do away with Royal Custom CSS if I can do the same thing with SO CSS.
Thanks in advance for your reply – and again, great job on your products!
Mike
Hi Michael,
SiteOrigin CSS is currently global but we do have plans down the line to break page-specific options. Currently, if you wish to apply the CSS to a specific page, you’ll need to use a selector unique to that page.
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.
Alex,
Thank you for the reply.
While there is certainly benefit of having a means to edit the global CSS for a site that also means that I have to have two separate plug-ins and my question was geared toward trying to eliminate one as I prefer to have as few plug-ins as I possibly can (KISS – Keep It Simple Stupid!) to avoid future conflicts, resource consumption, etc. In this case I was hopeful of being able to eliminate the Royal Custom CSS plugin and do the page specific stuff with your plugin because if I have to have plugins my next preference is to use plugins from the same provider which would then at least reduce the chance of conflict down the road.
Of course I could use SiteOrigin CSS to target page specific selectors but that is still CSS that has to be parsed for every page on a site when it only needs to be applied to a single page and that seems inefficient to me.
So for now I guess I will continue to keep both CSS related plugins, using yours to target global CSS and Royal Custom CSS for page specific CSS.
Mike