How to add Custom CSS code

Our Theme Comes with a powerful back-end that allows for a heavy style and customization, But often times this is not enough for some users and they want to modify and add their own Custom CSS rules. In this case we highly recommend you to use Child Theme. It will give you the power to modify theme in any manner you like without missing any of our theme updates. How to make a child theme? You can simply install it from downloaded file of Our theme from Themeforest, the file is called theme-child.zip. Install it like any other theme in WordPress. There are some occasions you need our help to find the best way to change a specific CSS rule, for sure we will help you in our help desk to get the right snippet code. However we recommend you to use some Inspect element to find the exact class selector with its rules and try to re-coding to fit your needs.

Custom CSS – What is Inspect Element?

All Browsers have a handy tool that if you right-click on window you will see it. Please see below screenshot

Inspect Element

So what is next?

Once you activate “Inspect Element” in your browser, you will see a panel like below. Matching with numbers (in screenshot) follow the steps

  1. Click on zoom icon to activate click to inspect feature.
  2. Now you can click on the element you need to alter its CSS rules.
  3. Once you clicked you will see its HTML content in the left panel like below, so you will make sure you have inspected the right element (based on the selector name).
  4. On the right Hand you should see the Class selector name as well as its rules like below.

Inspect Element Developer Toolbar

So what should I do to override the rules?

You have 2 main approaches:

  1. If there are just few modifications then use our custom CSS option ( from WordPress 4.7.x has custom css params ). You just need to go to Appearance  -> Customise -> Additional CSS  and add your code there.
  2. If you decided to go beyond simple changes then we highly recommend to use a child theme.

Our Customer Care

 

Artbees Care

 

3. Other way with simple custom css plugins

Simple Custom CSS

Demo Content One click

If you’re looking for the demo contents, you can get them here