Whenever you want to customize the style of the theme i.e. colors, layouts or any other css properties, we recommend you to use custom.css file for that. Every Templatic theme comes with a file called custom.css located under your theme root folder at ..\wp-content\themes\(your theme_name). That file enables you to fairly easy customize the look of your site. Instead of finding specific css files you can just input the class name and new properties in the custom.css file.

Why use custom.css file?

The main reason why we recommend you to use it instead of applying your code directly to specific css file is because at the time of theme update you may loose all your such changes or it will become very time taking as well as complicated task for you to get all the theme updates without loosing any of your customization. So, it is better to have all your customization in custom.css file.

custom.css cannot work if it’s not activated. Activation path differs from theme to theme, here are some pointers on how to activate it.

• Directory – It gets activated automatically once any CSS code is placed in to wp-admin ⇨ Appearance ⇨ Custom CSS Editor.
• Older Templatic themes (Specialist, Hospitality, etc) – wp-admin ⇨ Appearance ⇨ Theme options area ⇨ General Settings ⇨ Customize Your Design
• Templatic eCommerce themes (eMarket, Emporium, E-commerce, etc) – wp-admin ⇨ Shopping Cart ⇨ Design Settings ⇨ General Settings ⇨ Customize Your Design
• Themes using the Templatic framework (DailyDeal, Appointment, GeoPlaces, etc) – wp-admin ⇨ Theme Settings ⇨ Basic Settings ⇨ Style and Color Settings ⇨ Use Custom Stylesheet or wp-admin ⇨ Theme Settings ⇨ Basic Settings ⇨ General Settings ⇨ Use Custom Stylesheet
• Themes powered by Supreme (Nightlife, CoolCart, Catalog, etc) – wp-admin ⇨ Appearance ⇨ Themes ⇨ Customize button ⇨ Templatic Theme Settings ⇨ Use custom css

Important note: Newer Templatic themes often come with custom.css automatically enabled and thus activation isn’t required. This includes themes like Apex or Video. Within those themes you can customize custom.css from the Appearance ⇨ Custom CSS Editor area. No activations are necessary…. the code will work right away.

Steps to use custom.css

After activating custom.css,

• You can add your new css classes under Appearance ⇨ Editor ⇨ custom.css (it will be listed under stylesheet files in the bottom right corner). Directory user? You can add new classes inside the Appearance ⇨ Custom CSS Editor section.
• If you prefer editing your files using FTP, you should be able to find custom.css in your theme root folder.
• If you already have the correct code you can paste it in the file and hit “Update File”.
• If you don’t know the name of the class you have to edit you must use Firebug. If you’re new to Firebug be sure to read our Firebug tutorial ⇨ https://templatic.com/docs/how-to-use-firebug/.

IMPORTANT: Make sure that the code you’re adding/pasting is added below the existing content. In other words, after the */ closing comment tag. If you add your code before that tag it will be commented out and will not work.

Think video will be better to understand? Watch it here

For more information about custom.css you can watch the following video tutorial. Please watch the tutorial in full screen mode with HD turned on

Good luck and happy customizing!