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.
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.
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?
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.
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.