Hello,…
Actually I have the entry p class in use on more then one page. But if I change it on one,… logically it changes the pages as well.
So in general: How can I make a defference in using for example on given class on different pages? If I use another new class, how can I use it, without putting it into text mode manually?
What is the css model
I am using Sitorigin css Plugin, but that´s not the issue.
Any suggestions?
Jörg
Hi JKamphaus,
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. There’s also a couple of other useful classes attached to it and here’s a quick run down 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 unqiue 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.
Thx Alex,…
I am already going through your suggestions,… need a bit time,… but first of all thank you again,… I will let you know soon
Jörg
Hi Alex,…
I do understand what you are talking about,… think so,… ( maybe not?)
But I am using the Site Origin CSS Plugin,… only,…
The problem is,… that it does not show any id to work in the list of styles to be selected.
On both pages “impressum” and the homepage i only can select the “wifget p” – tag. Which of course is used on any page where the editor is used with this widget. ( plano.de black area with 8 items) and Page “impressum”.
So where do I type the aditional id? Shouldn´t it be part of the list to choose from?
Jörg
Hi JKamphaus,
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 using 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
Then, you'll see the information referenced above. Sorry, I should have been clearer.
Hi Alex,…
If I do so on http://plano.de I get the following:
home page page-id-7 page-template-default logged-in siteorigin-panels siteorigin-panels-home chrome alt-style-default one-col width-1100 one-col-1100 full-width full-header full-footer
But honestly I do not understand how to choose the right class for the
"widget p“ tag here
.home page page-id-7
{ color: #ffffff; } does not work
What is my mistake in thinking?
2016-02-20 16:14 GMT+01:00 Alex S <
forum+20582-u25213-098fe07ff4a7f333f8281714695f354709d6d453@siteorigin.com>:
I got it,…
It was:
.page-id-7 .widget p {
color: #ffffff;
}
I used to have typos in it,… so know it works,… thanks for your fast support…
Jörg
2016-02-20 16:14 GMT+01:00 Alex S <
forum+20582-u25213-098fe07ff4a7f333f8281714695f354709d6d453@siteorigin.com>:
Hi JKamphaus,
Spaces aren’t possible in class names so when you see a space, it’s another class. If you would like this to only work on the homepage, use .home. If you would like it to only work on a page with the id of 7, use .page-id-7.
Hi JKamphaus,
Great to hear. Is there anything else I can help you with today?
Just in case I am using the "Widget p“ twice on one page,… How can I edit different attributes then?
Because of different background colours
Any suggestions?
thx Jörg
2016-02-22 10:40 GMT+01:00 Alex S <
forum+20582-u25213-098fe07ff4a7f333f8281714695f354709d6d453@siteorigin.com>:
Hi JKamphaus,
That’s slightly trickier but still very possible to do. I would recommend using the CSS editors inspector to get the required information. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Expand the view then click your intended widget. Then keep going up a level (see the below image. Click the highlighted part) until you find a class titled something like .so-widget-sow-hero.so-widget-sow-hero-default-1e6da3885c0f (the bold part is random), or #panel-37-0-0-0.so-panel (the bold part can change). If you target the latter replace the class .widget with that.
This might be a tad… complicated so if you don’t follow please say so and I’ll provide a more visual guide.
You might also need to install the SiteOrigin CSS Editor.