CSS Basics

Home » Tutorials » Theme Tutorials » CSS Basics

NOTE: We do NOT provide customization support on our support forum. Please make changes at your own discretion and carefully.

You can change your CSS in a few ways. Depending on the level of CSS skills you have, and the amount of CSS changes you plan on making, your preferred method may vary:

Method 1: Use the Custom CSS Theme Option

From your Dashboard, you can simply enter any CSS code into the Custom CSS box within THEME OPTIONS.

  1. Go to WP Admin ==> Gabfire Themes ==> THEME OPTIONS ==> Custom Styling ==> Find the Custom CSS box
  2. Enter your CSS code and Save Options upon completion.

Method 2: Use the Custom CSS File

As a means to isolate any of your changes from the theme’s CSS files, you can take advantage of the custom.css file. This will allow you to re-apply CSS changes should you ever update your theme, or wish to identify and modify your own changes.

  1. There is a custom.dist.css file within your theme directory.
  2. Rename it to custom.css and add your CSS code inside.

Method 3: Edit the CSS File Directly

You can edit the CSS file directly by FTP’n to your server. This is the method most tech-savvy users will prefer.

  1. FTP to your site and go to the theme directory and look within the /styles directory. There you will see several CSS files labeled per their style (such as default, red, blue, etc.)
  2. Open the file which reflects the active style you have selected in THEME OPTIONS. For example, if you are using the default style, then you would edit the default.css.
  3. Edit the file as you need.
  4. Save file.
  5. Refresh your site, clear cache (if any), and the CSS changes will be reflected.

CSS Basics Video Tutorial – Part 1

CSS Basics Video Tutorial – Part 2

CSS Basics Video Tutorial – Part 3

CSS Basics Video Tutorial – Part 4