Build Your Own Business Website header image

How to Override a Plugin’s CSS in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we discuss how to override a plugin’s CSS in Thesis 2 by increasing the specificity of the CSS selector. We discuss the order in which CSS from WordPress and Plugins are loaded and how when the specificity level is the same, the last rule made in CSS takes precedence. We show how to add a custom body class to a template to make the rules more specific than the plugin’s own rules.

Video Transcript

Member: With Thesis 1, if you have some type of a plugin that you’re using that you want to be able to do some styling, we used to be able to put it into the Custom CSS file.

Rick: You can still do that, you can still put in custom.

Member: But I tried that and it didn’t save it so what I’m talking about specifically is the Contact Us modal window that comes up.

Rick: Yes

Member: So I added that in the Custom CSS, I want the background to be more in the color. Actually, you can see it behind the captcha, I want the background to be that color and I want some spacing between the first name and last name fields and all that. I figured out all the CSS for it and paste it into the custom file and it looked good under the Thesis preview mode but then when I saved it, it went away, it disappeared so now I took it out because I thought that might be part of what was breaking Thesis to begin with when I first talked to you.

Rick: I don’t think so

Member: No, you answered what was breaking it but I took it out during the class because I thought maybe that might be part of it so I was trying to answer my own question.

Rick: Okay. So you don’t have any special code there right now for it?

Member: I don’t. No, I took it out because like I said, I thought that’s what’s breaking Thesis.

Rick: Okay well, one of the things you might need is to increase the specificity for it and so right now, you’ve got this div id Modal-Container and where is the HTML that has it?

Member: That is in the menu. I think I’m answering your question, it’s actually, the way this modal works is you add it to the menu as just a pound sign (#) and then you put the modal class into the menu.

Rick: Into the regular menu so it’s a menu item inside the menu?

Member: Correct

Rick: Okay. So I guess what you need to do is add a custom body class to really, the whole site so that you can make your rules more specific than its own rules.

Member: Okay

Rick: Because the way CSS works is of course, if the specificity level is the same, then the last rule is the rule that takes precedence and the way WordPress works is it assumes that plugins want to overwrite the CSS of the theme and so plugin.css is loaded after skin.css or theme.css and so if you’re using exactly the same selector, then the plugins are going to take precedence. So what you have to do is, you have to make your selector more specific and your only option here since you don’t have control over the Javascript that is creating this div id=”eModal-Container”, your only option is to add a body class and you can do that in the templates of Thesis Classic. I mean these templates are going to be the same no matter whether you’re in Thesis Classic or you’re in one of my skins but in the Skin Editor, in the template itself, you just go to the little gear here, go to body class and then you just put a body class in there, just a name.

Member: Okay.

Rick: And then what you would do is prefix your CSS with that body class so you know, .rick and then #modal whatever and so now, you have a class name in front of the modal and your CSS is now more specific than the plugin.css and it’ll take precedence.

Member: Okay. That makes total sense. Alright, cool.

Rick: Now, the thing is you’re going to have to do that to every template because this only is a template specific body class. Where when you do use Agility, Agility automatically adds the body class, “agility” to every page which gives somebody using Agility the ability to make their CSS more specific by simply using the Agility Body Class.

Member: Right, okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one