In this lesson Colin shows you how to use the !important feature that is built into CSS to override awkward elements that won’t allow you to change their styles. Using an !important override should only used when you are unable to make changes to an element the normal way.
Tip: If you click the !important icon and nothing happens, you probably have the wrong element selected.
Wanna read more about the CSS important trick? Go to the CSS important section in our Doc directory.
Transcript of the video:
Hello there this is Collin and welcome back to the CSS Hero Academy, in this quick lesson I’m going to show you how to use the important override to help you out when you cannot change some of the elements on your web page. So here we are back on the DIVI theme and I’m going to turn on the CSS Hero so I can pick up some of the elements and I’m going to demonstrate what happens when you’ve get an element that you cannot change: So for example we are going to chose this element here which is the slide title, ok I’m going to click on slide title to make sure I got that and we’ll go in and change the text on this. Now for example I’m going to change the color, I’m going to make it really bright red so that you can see. It’s not changing as you can see it’s still white so I need to do something to overwrite this because something wrong but really it isn’t something wrong, it just means that something on the CSS in a theme is actually overriding CSS Hero’s CSS and what we need to do is up here we see a little icon with an exclamation mark and we click on that and then that will allow us to override. We can click on save, that is actually overwritten by now so it stays there.
We are going to come down to another element, this is something that happen on some themes but not all of them, if I select these icons here and I would go to the text that’s going to change the color, as you can see it’s coming up purple, and if I choose something randomly, let’s go with something really orange, here we go, bright orange. You can see that nothing is happening so I’m going to come back up here, I’m going to click on the exclamation mark again and there you can see now we are live and now we got those changes. So I click save one more time and what I’m going to do is I’m just going to show you something here and show you where that code comes in on the CSS so I’m going to click on my little tools here, and it comes down to show generated CSS, so when you see it because it’s actually minified but if I click on the normal CSS now we can see where these important statements are, first of all this is the one for the slide title or the slide description and this one is for the blurb icon, so as you can see this important there, important there. If we root those we’ll lose the overwrites that we had for CSS Hero. So I’m just going to close that and that basically shows you how to overwrite something if you don’t see it changing when you are using CSS Hero.
Thanks for watching, look forward to see your next lesson, I you like this one please click on subscribe and share it with your friends, thanks, bye now.