Where to Put Your Custom CSS in Divi
In this tutorial, I show you Where to Put Your Custom CSS in Divi. More specifically, how to edit the CSS stylesheet directly in Divi. I’ve received numerous questions on how I access my Divi stylesheet as shown in my tutorials so I’m excited to walk you through how I do it!
In short, you want to set up an FTP account in your website hosting control panel, connect via an FTP client, then open the style.css file in a text editor. Below are links mentioned in the tutorial and other resources that should help!
Tools I Use:
- Text Editor – TextMate 2 for Mac
- FTP Client – Transmit for Mac
- Hosting/CPanel – Siteground
Other Text Editors:
Other FTP Clients:
Divi Child Theme Resources:
Want more free tutorials and layouts?
I'd love to do more. But as you can imagine, it takes a lot of time and effort to put these together. In order for me to do these, I need to take time away from my business which is what's currently paying the bills. If you'd like to leave a tip and show your appreciation, it would show me that the time I invest in these is worth it and will help keep more coming!
- Josh
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