Easy Way to Customize Your Theme

We've made it a point to make both our themes and any Content Builder or Landing Page content you create flexible and easy to customize. But sometimes, you might want to make a change to your theme that you can't find a customizer option for. This is where our custom CSS fields come in.

Watch the video below to see an easy way to tweak and change specific elements on your website, using custom CSS. Don't worry, it's not as complicated as you think:

More...

Quick Summary

  • Right-click on any element on a page and click on "Inspect Element" to open the console in your browser.
  • Alternatively, hit F12 on your keyboard to open and close the browser console.
  • In the right half of the console, you can change CSS styles and get an immediate preview of what the changes look like on your page.
  • When you're done tweaking the styles, you can copy-paste the CSS to apply the changes to your site.

Note: you can do this on any website, including your competitor’s. So if you ever want to see how a certain thing is built on anyone’s site, now you know. :)

Of course, this is not for everyone and if you don’t have at least a bit of penchant for techy stuff, you probably want to stay away from this. That’s also why there are easy customization options built into all of the themes, that allow you to make changes without ever touching a line of code.​

I hope you enjoyed this video.

If you have any questions or suggestions, leave a comment below.

Shane

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • John Z says:

    Thanks Shane, this little tip has many legs… really appreciate the clarity.

    • Shane Melaugh says:

      You’re very welcome, John!

  • Paul Boyer says:

    Thanks. . . I have been playing around with this myself, but was never sure of its true worth; was it just a freek that I was playing with.

    Now I know it has validity, thank you :)

    • Shane Melaugh says:

      Glad to know the video was useful. :)

  • Jake says:

    Awesome Stuff! I’ve always wanted to learn how to do this!

    Quick Question:

    If you DO put in a custom CSS in one of your pages, and decide; “whoops, I don’t like that anymore” how do you UN-DO any custom CSS changes you make?

    Thanks!!

    • Shane Melaugh says:

      Hi Jake,

      You just remove the lines of CSS that you added and save the changes. Worst case: you completely clear the custom CSS box and start from scratch. But ideally, you should apply changes one by one, so that if something goes wrong, you just remove the last one you added and keep the other changes.

      As for the browser console: here you can just clear your changes by hitting F5 to refresh the page.

  • Kendrick M says:

    Great stuff Shane, thank you!

    I’ve played around with this using Firebug (essentially the same thing), but I would then often get lost with where to apply the changes I wanted to make to the real site and not just the browser preview. I would go digging around editing the main .css file and often would really screw things up big time! Knowing how to make these without touching the original, AND seeing that it can be done on a page-specific level is really exciting!

    Did I say THANK YOU?!?! :o)

    • Shane Melaugh says:

      Glad this was helpful!

      I also used to edit the style.css files, but one of the issues with that is that the changes are lost when you update the theme. That’s why we added these custom CSS fields to our themes.

  • John Palma says:

    I also was one that would try and go into the css files to make changes – and have screwed things up MANY times.

    It never dawned on me to do it the way you did.

    I TRULY appreciate the work you do – the video explanations – and the support that you and others on the forum has provided when I have had questions.

    Thanks for being so involved and attentive to all of us out here as we implement and attempt to customize the themes to our particular needs.

    • Shane Melaugh says:

      Thank you for your comment, John!

      I’m very happy to know that this was useful for you.

  • olivia r says:

    Thank you so much Shane! Again great value and I feel like a geek for once ;)
    Not only you are one of the most honest entrepreneur out there but you also make us feel smarter lol

    Thank you again Shane.

    • Shane Melaugh says:

      Thank you for your kind comment, Olivia!

  • Jule Fuller says:

    Simply awesome thanks so much

    • Shane Melaugh says:

      You’re very welcome, Jule!

  • Mark W says:

    Hi Shane

    I’d like to know whether any customisation done using the standard theme customisation (the first part of the video – not css changes) are lost whenever the theme is updated. I use a Child Theme so it doesn’t impact me so I’m really asking out of interest. Thanks.

    • Paul McCarthy says:

      The theme customiser stores data in the database, is protected from being overwritten and thus is not lost during a theme update.

      A child theme really comes into its own if you want to modify markup of template files

      • Mark W says:

        What I really love about you guys is how you really have thought everything through.

        Even a complete novice is unlikely to get caught out with Thrive Themes.

        I congratulate you

      • Shane Melaugh says:

        Thank you very much, Mark!

    • Shane Melaugh says:

      Any customization you do using either our theme options, the customizer options, the custom CSS fields or a child theme will remain unaffected by theme updates.

  • Pierre C says:

    Dear Shane:
    May I use Thrive Theme with any wordpress themes.
    You havd truly made things so simple.
    I seem to make them so hard.
    Thank you so much for all your time and hard work.
    Salut

  • Tip K says:

    I spent a few hours tweaking my new Ignite theme installation yesterday, making it perfect for my needs. I used this technique that you described here. You revealed a “secret weapon” that most people probably do not understand and therefore do not use.

    Thanks for this helpful instructional video.

    Tip Kilby

    • Shane Melaugh says:

      Thanks for the comment, Tip! :)

  • You have a gift for explaining complicated tasks so they become easy. Great video again.

    • Shane Melaugh says:

      Thank you very much, Claude!

  • Joffry says:

    Hi Shane, When and why is !important used?

    • Shane Melaugh says:

      !important can be used to increase the priority of a style. If you add a style that would usually (in the normal hierarchy of CSS) be ignored, you can make it override everything else by adding !important.

  • Adam M says:

    Awesome. Thank you Shane. Adam

  • Michael J says:

    OMG! What a LIFESAVER. I wish I had known about Inspect Element a long time ago. I don’t really know HTML or CSS (just enough to get in trouble) but being able to inspect the code and Copy & Paste is priceless. Thank you!

  • Mike B says:

    Really great feature, glad to see it is so easy… Thanks again, you guys are the best!

    • Shane Melaugh says:

      Thanks for your comment, Mike! Glad to know this was a useful post for you. :)

  • Christopher B says:

    Very helpful.. I fixed the CSS in 30 seconds.. and I thought I would have to find someone to do it. Thank you.

    • Shane Melaugh says:

      Glad you found this helpful, Christopher!

  • How do you add more than one CSS command to the custom CSS editing box? Is it necessary to add a comma? Skip a line, etc? Thanks – all very new to me but very cool!

    • Shane Melaugh says:

      You can hit enter to add a line break and another line of code.

  • David Crook says:

    Great stuff Shane, thank you! I watched this video and had ab “ah ha” moment. How though do I ADD an element to a theme. I can’t find where to ADD an HTML element to theme (a back rectangle at the very top of the theme).

    • Shane Melaugh says:

      Adding something, rather than modifying an existing element, is quite tricky. I can’t give you a short answer to this. You can use the same method that is shown here, but you need a basic understanding of CSS and do quite a bit of experimentation.

  • Geoff M says:

    Very helpful Shane
    Slainte

    • Shane Melaugh says:

      Glad you found this useful, Geoff!

  • Richard Coleman says:

    Great video. I’ve dabbled in Firebug before but, never really knew what I was doing. Now I know I can copy the code, I’m away! Thanks Shane.

    • Shane Melaugh says:

      Glad you found this helpful, Richard!

  • Maria B says:

    Loving Thrive Themes and ALL your tutorials. Thanks so much. I have one question – how do you change the colour of the social share buttons? facebook, google plus and linkedin on the pressive them? thanks a bunch :)

  • Bodine B says:

    This is yet another truly valuable instructional video that makes me really glad I joined Thrive Themes as a member! When Google changed their index to responsive pages only, I knew I had to find the best & easiest way to create pages that are truly responsive.
    BUT what a great surprise it is to discover all of this valuable training on conversion design, and so much more.
    This CSS training is great. I will be using this in the next five minutes (and thereafter.)

  • Jane R says:

    This is great!! Thank you!

  • Mignon F says:

    Thank you, Shane! This video is so helpful!

  • Coralie W says:

    Thanks so much Shane – love listening to your tuturials!
    Is this also the area when you can chane a font that’s not available on the online faclities? I have one purchased but unsure how to load into wordpress. Thanks

  • Eric B says:

    This is genius, Shane! The sky is truly the limit with Thrive! I’ve been using Thrive Landing Pages with Content Builder for nearly 3 years now, and I can’t see myself using anything else so versatile for my pages and blog content! Thanks for all you do!

  • Sherese Connell says:

    What if I buy a design from 99designs will I be able to pay assistant to apply the design into thrive themes

    • Hanne says:

      Hi Sherese,
      You’ll be able to do it yourself or you can find somebody on a platform like Upwork to help you out :)

  • Wallace N says:

    Awesome tutorial, thanks!

  • Carmen R says:

    Such a helpful article – thank you!

  • crystal c says:

    This is awesome I had no idea making a change to the CSS could be this easy. Just learned something new today. Thank you!

  • Sofia K says:

    Thanks Shane and Team for the great content you are giving us!

  • adam.dimitrov says:

    Just some feedback: it would be really cool if you copy the design options from newspaper theme. It literally has all the possible sections where you can customize fonts and colours and more. It was sooo much more easy to setup my design. Now I’m scouring the forum how to change the colour, font, size of basic things like the header, footer. If it doesn’t work out I might even change back to the newspaper theme.

  • Amanda L says:

    This isn’t working for the mobile menu and hover colour. It keeps reverting to the default.

  • Josiah W says:

    This video is not playing for me. I have tried on Firefox and Chrome. I hit play and just get a loading screen forever.

    • Shane Melaugh says:

      Sorry about that. It seems there was a problem with the video, but I’ve updated the post and it should work now.

      • Josiah W says:

        Works great. Thank you.

  • Mario L says:

    Where is the video?

  • Kalyn says:

    This is so helpful, but it won’t save my changes when I paste them into the Custom CSS section.. Say I’m changing the amount of margin. If I put the Custom CSS in, it deletes in completely versus what I’m just trying to do. If that makes sense. What could I be doing wrong?

  • krylyn says:

    OMG – this was a lifesaver in a time of darkness. So helpful and super easy. I changed my site’s footer and the header on my blog posts super easily and much quicker than I ever thought possible. No need to hire a developer for this quick fix.

  • kyleulch says:

    I used this to change the css on a bunch of elements.
    But the inspect tool wasn’t working well for me to determine the code that needs to be changed for a mouse-over.

  • Louise G says:

    Excellent and just on time when I needed this information!

    Thank you, Shane

  • falshaw1956@gmail.com says:

    My header on my blog was not using the right font…..and then I came across this post by Shane. Wow I had no idea what CSS was or what it did, but now I do and I have fixed the issue. Thanks, TT and Shane. Chris

  • Jay N says:

    I’ve just watched Shane’s video and had my first go at making some custom css changes on my site – awesome! I’m so grateful for all you guys do! Thank you – keep being amazing :)

  • >