Two things you need to get into a bar, and two things you need to understand to build in Divi.
When you need to apply custom styling in Divi, figuring out when and how to use ID and CLASS selectors is the first step.
ID Selectors
Start with a # (hash), like #id-selector
Can be set on only one unique element
Only one can be set per element
Are perfect for styling the odd duck
CLASS Selectors
Start with a . (dot), like .class-selector
Can be set on multiple elements
Multiple classes can be set per element
Are perfect for styling a re-used element
Example of Using ID Selector
You’re using the blurb module across a 3 column row, but one of your blurbs has a bit more text and it throws off the alignment. You can add an ID under CSS ID and make your custom settings in Divi Settings Custom CSS.
#shrink-blurb-words {
font-size: .7em;
}
In the more recent versions of Divi this type of use is deprecated, as each element has within Divi the ability to set custom CSS right in the module. Usually this works, however there can be some specific cases where the old way may be necessary.
Example of Using CLASS Selector
You’re using the Person module to display a number of employees, and you want them all to have round images. You can use the class “et_pb_team_member_image” to set a border-radius: 50%; on all of the Person module images.
.et_pb_team_member_image {
border-radius: 50%;
}
Suppose you are using the Person module in multiple ways, and only on one set of Persons do you want the photo to be round. You could add the CSS class “round-head” to the Divi settings for the Person modules, and make your custom settings in Divi Settings Custom CSS for the class.
.round-head .et_pb_team_member_image {
border-radius: 50%;
}
I’m sure you’re crafty enough to notice that I strung together two classes there. Why? Because when you set a custom CLASS in Divi, it applies to the entire module, and we want to select the Image element descendant of that module.
Hope this helps! Feel free to post questions!
OK, so I added the following class to the custom class CSS in the person module:
round-head
and the following into my css style sheet
.round-head .et_pb_team_member_image {
border-radius: 50%;
}
and I get nothing. Tried numerous times. Any ideas?
Millard
Hi Randy, thanks for your comment. I am sorry you had issues with the math question and not being able to post a comment effectively. Lets turn a negative into a positive if we can. Our site receives hundreds of thousand of page views a month, some of those page views are spammers trying to get in and leave spammy reviews, offensive remarks and of course bad links and even maybe trying to hack into our site. The positive is that we have a good commenting system that locks these people out. The negative is that anyone posting a comment must put in a math capture – we feel that is better than a google type captcha in as much as it is a simple math question and in an effort to protect our site, our readership and our content – its our preferred method.
As to the blog post, content – we feel it adequately explains the css 101 question of what is a css class and what is a cssid.
I have tried FOUR times to reply to this blog.
Perhaps I needed to be logged in first?
If so, why not tell me so instead of telling my captcha was wrong?
Why allow me to even fill anything in?
So, I’m trying again to get through to you.
_______________
YOU POS PEOPLE>
I have twice had my comments deleted because your captcha is incapable of doing math correctly.
Here’s what I said (this time I copied in case it did it again, although I’m certain it will once again be deleted and I’ll really be pissed off):
I entered an entire, well-written comment and because I must have done my captcha math wrong, my entire comment was deleted because you wanted me to try again.
While I can appreciate bad math not being acceptable, certainly there’s a way to NOT delete my comments.
Who makes a copy of their comments on the off chance the site might deleted it for not getting a passing grade.
Really annoying.
I may or may not try to duplicate my comment.
But the essence of it was that the blog on ID and Class was very poorly explained.
Maybe now I see why.