Hi Greg & Co,
as this is my first post I want to start with thanking you all for some really great stuff you created!
Custom CSS, the Widget Bundle and the Page Builder are all really easy to use tools, that just work great and make page creation a lot easier.
BTW: As I have no intention to buy a premium theme from SiteOrigin (I’m really happy with the GeneratePress), I’d like to give a tip to you for your great free plugins but I didn’t find a way to do so.
Here is my question why I started this thread:
I want to change some element groups with CSS in a row using the row class field:
– I created a row with three equal colums.
– Each column contains an H2 heading, then an H3 sub heading and then three paragraphs.
– I want to have smaller margins below all the H2-Headings and the paragraphs.
I understand the basic idea: I put row-infobox in the row class field and add something like this to Custom CSS:
.row-infobox {
background-color: blue;
}
Fine, the whole row is blue.
Putting “row-infobox” in the cell class field makes all cells blue, but not the space between them (the gutter). Works perfectly.
Putting “row-infobox” in the widget class field makes that one cell blue, but nothing else. Works perfectly.
Doing the same with “margin-bottom: 250px;” works also. I guess I have a basic understanding of how this works.
Now when I try to adjust the bottom-margin of only certain elements, I don’t get it. I want to address the H2 headings and the paragraphs in all three cells, but not the H3 sub headings.
So I add “row-infobox” in the cell class field and put the following code into Custom CSS:
h2.cell-infobox, p.cell-infobox {
margin-bottom: 2px;
background-color: blue;
}
Nothing happens, no color change and no margin change to no element at all. I guess it has something to do with the selector?
If I put the class manually into every single element I want to change and add the following to Custom CSS, it’s working
.row-infobox {
margin-bottom: 2px;
}
But that can’t be the solution and it’s not explaining, what I’m doing wrong with the row class.
Does someone have an idea what I am doing wrong when trying to select certain element groups with the row class field?
Thanks a lot,
Andi
Hi Andi,
Thank you for the extremely generous words. We currently don’t accept tips so the best way of supporting outside of a premium version of our products would be to recommend our products.
Now onto the issue itself. To target elements inside of a class (being .cell-infobox) you’ll want to ensure that the element is after the parent. Browsers process CSS right to left. So based on your CSS if I was a browser I would look for an element the class .cell-infobox. Then I would look for a parent element that that class is nested in, such as a p. So, for example;
aside.cell-infobox would work for the following HTML:
Based on you applying the class to a cell the element, in this case, a paragraph, the following CSS will work.
.cell-info p { margin-bottom: 2px; background-color: blue;}Does this make sense?
Hi Alex,
thanks a lot for your very quick reply!
Now that makes sense and worls perfectly. :-)
I got my code from http://www.w3schools.com/css/css_syntax.asp
They say: “You can also specify that only specific HTML elements should be affected by a class. In the example below, only
elements with class=”center” will be center-aligned:”
p.center {
text-align: center;
color: red;
}
I still don’t get the difference (for what this code is for vs. what i wanted), but your code did exactly what I wanted.
If you could very shortly explain, what the difference is, that would be great (I love understanding and learning new things), but if your time doesn’t allow, that’s also fine.
I’m already recommending Siteorigin all the time, and after finishing this message I’ll head over to wordpress.org and leave some five star reviews for all of your three plugins. :-)
Thanks again,
Andi
PS
And I found that targeting multiple things also works with your code:
.cell-info p, h2 {
margin-bottom: 2px;
background-color: blue;
}
Great!
Hopefully this is useful for others as well. :-)
Hi Andi,
I’ll write a full reply in a second however the code you just wrote is too… it’s general. What you’re telling the browser that you want to target all paragraphs in an element with the cell-info class, you’re telling it to target ANY h2. Unless you’re intention is that I would suggest correcting.
Hi Andi,
I absolutely cannot recommend the website you’re learning CSS from. I’m unable to go into detail at this time (as it’s fariely technical and won’t really make sense) however I would suggest learning from pretty much anywhere else on the Internet. A very good place to learn would be at the htmldog.com (very basic, but very well explained), and the Mozilla Developer Network (vast, and expensive however it can be a bit technical at times).
The latter link will explain the concepts better than I will ever be able to (thousands of people have worked on it after all) so I would recommend giving that resource a read to learn more about the I talked about previously.
Thanks so much, I will learn from both websites you recommended! :-)
Andi
Oh, one final question: Could you please tell me the correct way for targeting multiple items in a Page Builder row with a certain class?
I skimmed through the complete CSS tutorial from htmldog twice (from beginning to advanced), but couldn’t find a complete explanation of the different ways of nesting and grouping CSS selectors.
I would like to fix this right now on my page, not in a couple of weeks when I studied the two websites indepth…
I want to target all “p” and all “h2” in the pagebuilder row with the class “cell-info”.
You said this code is not correct, as it would target all h2 on the website, not just the ones in the row with the class “cell-info”
.cell-info p, h2 {
margin-bottom: 2px;
background-color: blue;
}
Now I duplicated the row and deleted the class .cell-info from the duplicate, so I can see if changes are applied only to the row I want them to be applied (call me smart ass ;-).
I tried this code which does exactly what I want (only the row with the class is targeted, not the duplicate, and only the H2 and the p elements in that row), but SiteOrigin CSS gives me an error message “Heading 2 should not be qualified”.
.cell-info p, .cell-info h2 {
margin-bottom: 5px;
background-color: blue;
}
Is this the correct code or is there still something wrong?
Andi
Hi Andi,
The second CSS block is correct. The message you saw wasn’t actually an error message, it was a warning. When you get notified with a yellow triangle either isn’t optimal, or ideal. However, there’s nothing really stopping you from ignoring.
The SiteOrigin CSS editor makes use of the CSS Lint guidelines which can be found here. The message you saw specifically relates to the rule, Disallow qualified headings. It’s purely a consistency thing and if ignored, it’s not the end of the world.
Alex, thanks for the clarification and all the great info and resources.
Now that’s what I call premium support – for a free user. Amazing!
Hi Andi,
It’s been an absolute pleasure. :) Is there anything else I can help you with today?