Where to Put Your Custom CSS in Divi
In this tutorial, I’m going to show you Where to Put Your Custom CSS in Divi. This is part 4 of my beginner tutorial series where I’m answering the top 5 questions for YOU who are just getting started with WordPress.
This is important because when you’re starting out, you’ll quickly find out that there are approximately 378 places you can put CSS in Divi. Only slightly exaggerating 🙂 There really are a ton of places you can put your CSS so let’s make sure we do it right.
Remember, I’ve also created a FREE Basic Child Theme for you so you can easily install it and get going with building beautiful websites with WordPress and Divi. Download it below!
Must trusted WordPress theme is Divi by Elegant Themes
Links & courses mentioned:
- Purchase Divi Theme
You’ll get a discount OFF Divi when you purchase use that link! - Divi/CSS Course
Use code “css30” to get $30 OFF my CSS Course! - Divi/WordPress Beginners Course
Use code “diviwp22” at checkout to get the course for only $7 - Sublime Text Editor
My preferred text editor for editing CSS and code.
Other resources and links mentioned:
- My Inspect Element Tutorial
- My Divi Tutorials (for more Divi CSS tricks)
- 6 Ways to Add CSS to Divi – Divi Space
- How to Add Custom CSS to Divi – Divi Cake
Full Beginner Tutorial Series Links:
Download Your FREE Divi Child Theme!
If you don't yet have an account on my site, create one then download this along with all other current and future freebies 🙂
Thanks Josh. This is helpful tut 🙂
Awesome. No problem, Kirb!
Hi Josh,
Latest version of WordPress (4.9) solves the issue of line number, indentation & color coding in theme options are solved. But more alarming is that a number of times, the code that perfectly works in Divi Theme Options -> Custom CSS area does not work at all in style.css. There are a number of reasons sited by many why this happens, but no solution is available. Can you find a way out?
Good to know about the line numbers! I’m not sure on the other note about certain areas not working though…that may be a question for ET support.
This is awesome, Josh. Thank you for sharing.
No problem, thanks Sharon!
Great Tutorial Josh, Many thanks for sharing it.
Thanks, Haroon! No problem.
Hello!
Nice to meet you, my name is Francesco
First of all I wanted to thank you for all the videos and for your precious advice.
I follow you and I really appreciate what you do.
I would like to ask you a question; how can i make a blurb, with phone icon, clickable?
the code is 000000000 (right?), but I do not know where to place it.
Thank you very much, I am waiting for an answer
a hug, Francesco from Rome
Thanks, Francesco! If you’re using the blurb module, you can just put the tel:0000000000 code in the link label, then you’re all set!
Thanks for the quick reply
Yes, I put the code in the link label.
But I do not know why after I wrote the code and saved the changes, it does not work.
Returning to the blurb module later, the label field is empty :/
Ah you just need to enter tel:000000000, etc. Not the actual
Ok, all set!
Thank you very much 😉
Awesome. No problemo!
How do you go about using the text editor with the files? It’s a little confusing not sure how to use the FTP account and the text editor? I downloaded the files using a file transfer program but it seems to me when you are doing the adjustments to the style sheet that somehow it goes directly to the files that are on the files to the website? Would appreciate if you could elaborate on how you do that if that is in fact what you do or do you make the adjustments to the style sheet and then uploaded to the host? Thank you
Hey Shawn, the tutorial walks you through exactly how I do it. I find the css file through FTP, then open it right up in TextMate, my editor. That’s it! Wish I could help further but really the tutorial explains step by step how I do it!
Hey Josh. I’ve finally gotten a chance to put this tutorial to use & I’ve run into a little issue I hope you’d can help with. I’m trying to shuffle my logo to sit a little bit higher on the page with the following bit of code.
#logo {
margin-top: -15px !important;
}
When I put this into my child stylesheet, it does nothing. However, it works when I put it into the the Custom CSS section under Divi Options. I do have other bits of CSS in my stylesheet that work. Is there something special about the logo, Divi or am I doing something wrong‽
In any case, I’m very excited about the bits that are working though!
Hey Sharon, What’s the URL? I’d need to look at that to see why that’s not working. My guess is that there’s some code in your stylesheet that’s overwriting that if it’s not working. So I would probably stick it at the bottom of my stylesheet!
Hi Josh,
OMG I am an idiot!
I just created a copy of the site for you to look at with my CSS code back in the stylesheet … and it WORKED! Went back to my original site – didn’t work. Scratch head and then the mental image of you clearing the cache after every stylesheet change you made popped into my head!
That was it! I hadn’t installed Siteground’s caching plugin on this site yet so forgot all about it. Sorry for wasting your time!
No problem haha. Glad to hear it got worked out!
Hey Josh. I have an update for you. Since we last spoke above, I’ve had SG’s SuperCacher enabled. But hitting the Purge Cache button didn’t sweet nothing. I had to keep clearing my browser history (in both Chrome which I mostly use and Safari). And sometimes even that didn’t work. I gave up for a bit and just put the CSS into Divi’s CSS area so I could actually get something done.
Now this site that is giving me CSS hell is on my Siteground Reseller’s account so the plan doesn’t have some of the bells and whistles as another site I have which is a GrowBig one. Reseller one doesn’t have dynamic cache, only static cache. And I wondered if that’s what was messing things up so I tested this on my GrowBig site and sure enough, it worked JUST LIKE IT DOES FOR YOU!
I spoke to Siteground who said that the Purge SG Cache button should work the same way regardless of whether Dynamic Cache is in play or not. But they also said that they’ve had heaps of issues with Chrome browsers and caching lately and that it’s an issue that logged with Google. So they suggested I turn off caching while I’m developing – I still had to clear my browser’s cache, but at least it worked reliably. (Working in incognito mode messed things up again so I ditched that plan). Safari behaves the same way as well – doesn’t work nicely with the SG caching on and I have to clear my browser’s cache.
They said – try Firefox, it’s better. So I did. And yes, it is better but not perfect. I still have disable SG’s caching but at least any changes I make to the stylesheet is reflected immediately without having to clear my browser’s cache.
I feels suspiciously like there’s something not right with the SuperCacher since it’s not playing nicely with just a static cache. I assume that’s the reason unless there’s something else behind the scenes that’s different between the GrowBig and reseller plans that’s causing this to happen.
Anyway, just thought I’d give you an update just in case you get others squealing in frustration because you make it look so simple and it fails for us! It is simple – when caches don’t mess you about! Well, simpler at least!
Okay, final update after another chat with Siteground! They said:
“The reseller account you are referring to is a StartUp account which doesn’t allow you to manually purge Dynamic Cache, but only the Static one. However, on a GrowBig account, you have control over both Static and Dynamic Cache. Since CSS changes are related with Dynamic Cache, you can only see the changes immediately when purging the cache on the GrowBig account. On the StartUp account, you’d have to wait for the cache to be cleared automatically, which is something that occurs periodically. If you have a WordPress, Drupal or Joomla-based website, you’ll have Dynamic Cache, which is used to speed up the website, but flushing it is done automatically on our end”.
I’m upgrading back to a GrowBig account!
Hey Sharon, glad to hear they were able to help you out. I usually always hit the cache button AND refresh the browser just incase. I have sites on GrowBig and basic reseller and they all still work the same. I will say though that if there’s any sort of firewall or additional caching, those need to be updated as well which can be a real annoyance 🙂 Hope that helps and that things get less frustrating!
So confusing that your GrowBig and Reseller behaves the same way and mine don’t 🙁
Thanks for your time, Josh!
Weird indeed…I’ve never had any issues with the Cache tool working unless there’s an extra Firewall wall layer that needs cleared as well!
Where would I go looking for this potential extra firewall layer? Now we’re getting into territory that I know even less about!
If you didn’t intentionally set one up (with a plugin like Wordfence or a service like Sucuri) then there shouldn’t be one. I just mentioned that because it was the case for me when I didn’t know why the Cache wasn’t working and it drove me crazy!
Awesome information thank you! When I download the CSS file from my child theme however (via FTP) it doesn’t list all the code the same way it does when you inspect the code in your browser.
So I can’t really update the CSS file or do you just copy and paste the code you need and it overrides it? Hope what I am saying makes sense a few of us are confused by that. Thanks again:)
It may depend on what text editor you’re using, Jeff. You can also just login to WordPress and just go to Appearance, Editor and access your style css there!
Hi Josh,
I recently had a child theme folder but got hacked via the functions.php that was in the folder, I noticed that you don’t have a functions.php file in your child theme, how did you achieve this, if I delete the functions.php from within the child theme, the website’s styles.php doesn’t function making the website look all funny.
Thanks
Hey Najib, yeah you can put the child theme path in the functions.php or the actual stylesheet using @import url(“../Divi/style.css”);
I think my way is a bit dated but I’ve never had any issues with it.
This is great way to streamline things. I enjoyed your new tutorial today on seeing live css changes. I have a question, if you don’t mind. I still have a hard time identifying the correct module to change within the inspect tool. I can usually find one that can change the element within the window. But, when I copy and paste the changes with the selector path in my child theme style sheet, the changes do not take place. I feel like I have a hard time identifying the correct element to make the css changes too. Any help to get better at identifying them would be great!
Thank you for all your help!
Hey Eric, yeah I’ve found that it can be a little tricky sometimes as well. You just have to keep playing around and eventually finding the right elements becomes easier and easier. As far as the changes not taking place, just be sure to clear cache and refresh!
Hey Josh, I ran into an issue. I watched the tutorial and read all the comments to make sure it hasn’t been answered already.
When I setup Transmit and logged in, there are no folders under my server. At this point in the tutorial you said to open up wp-content folder but that you had lots of other folders from all of your projects.
However, I’m not seeing any folders at all. Can you help??
Figured it out, sorry about that. That’s embarrassing. I’m consuming a lot of your content right now. I’m likely to make a lot of dumb mistakes. I’m planning to purchase your first online course with my next paycheck. Thanks for teaching all of this stuff. I currently help people wireframe their website and layout how it can work best as well as what words and what components work best. I would love to be able to offer the actually website build also.
ha no problem 🙂 Would love to have you in the course, Derrick! Sounds like you’re on the right track!
Hey Josh, I have signed up for your class. The slight issue I am having right now is that the float will not let me change to right because of the inline-block. It specifically says float cannot be used with inline-block.
From what I am reading floating takes away the alignment. Can you help?
Awesome! Not sure I’d have to see what the issue is in detail…feel free post a link.
awesome, Thanks
When I created my child theme, no additional code shows up below what was generated. Did you copy/paste the original code from the parent theme? I’ve used your import code as well, but it didn’t pull in anything additionally.
I’m positive I’m doing something wrong!!! Thanks for your help!
Hey Alyese, see the revised Free Basic Child Theme I set up! https://joshhall.co/product/basic-divi-child-theme
Hey! When I created the style.css file, no additional code shows up other than the header from the child theme generator. I even used your import function. Do I need to go and copy/paste from the original parent theme? I know I’m doing something wrong! Thank you for your help!
Thank You, Josh.
I am very impressed by your tutorials. I always getting hesitation form CSS but with these tutorials, I fall in Love with CSS.
I am from Pakistan and very thankful to you.
Kindly make a one video tutorial of how to make a word Press website using Divi…There are a lot of tutorials of it but your way of teaching is very impressive and good…
Thanks Salman! I actually just released a Divi/WP Beginners Course on how to build a website with WordPress and Divi. I may eventually do a tutorial on that but there’s far too much to cover in one tutorial which is why I built the course. The launch sale discount is still on if you’re interested in joining before it goes full price!
Hi josh! great content! I have a question!
I got to the point where I open the style sheet in Textmate. I created a child theme. when I open the style.css I only have 16 lines of code. Am I missing something?
also at 8:29 in your video. when I click inspect. I can only see the box on the left. I am having trouble finding out how to access the box/tab on the right side of the screen. because of this I can’t locate which line to add the new code to. is there a tutorial video that covers this?
Thank you!
just realized its cause I wasn’t using google chrome. I found your element video tutorial.
Under text editors you list Notepad. When I first got into editing various pieces of website code, I was introduced to Notepad++ to use as an editor. It provides the various colors that you show and mentioned, etc. I hardly ever use Notepad for anything because I find myself using Notepad++ instead.
To check things out, I just paused a minute, opened up Filezilla, and located a .css file where my websites are hosted. I was able to set up Notepad++ as my default css editor and open the .css file. As stated, it shows all the colors, formatting, etc. This is a nice little editor and the cost is very nice. It is FREE and continues to be maintained. I will now be able to open and use Notepad++ on various .css files just like you were showing in your tutorial.
I thought that you and your readers may appreciate this information.