Genesis: Tutorials: Adding Custom CSS
We do recommend using the JetPack plugin wherever possible and their Custom CSS module as explained in the JetPack section below. If you don't want to use the JetPack plugin you can follow our steps below to activate the Custom CSS module.
If you have version 1.0.3 or higher of our Themedy Toolbox plugin, linked above, installed and activated you can add Custom CSS to your theme by visiting Tools -> Themedy Toolbox -> Enable Custom CSS Module
After which you can add your CSS at: Appearance -> Edit CSS
Make sure to start adding your CSS code after the intro text block in the input box, ie:
/* Welcome to Custom CSS! CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations. By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don't need to copy all your theme's stylesheet content. */ !! YOUR CODE SHOULD START HERE !!
By making your changes here you will not lose them when upgrading your theme in the future.
We recommend using Firebug to find the CSS blocks you need to add to make your changes.
JetPack Custom CSS Module
Note if you are using the JetPack plugin our plugin will disable our Custom CSS tool automatically - turn on JetPacks version in the JetPack dashboard instead following the instructions below:
- Uncheck the Custom CSS module at Tools -> Themedy Toolbox -> Enable Custom CSS Module
- Disable the Themedy Toolbox plugin --Important--.
- Activate the JetPack plugin.
- Go to JetPack -> Scroll Down to Custom CSS and click the activate button.
- Reactivate the Themedy Toolbox plugin.
If you aren't using JetPack, just activate our Themedy Toolbox plugin.
Once you have done one of the above you can access the Custom CSS page in your WordPress admin at:
- Appearance -> Edit CSS
CSS you add in this page will overwrite CSS from the themes style.css file.