Where do I add my custom CSS?

Most of our themes provides options in the customizer section for changing the font-size, color of various part of the theme. However these options will never be sufficient for all users, so this kind of issues can only be addressed through custom CSS.

To add the custom CSS code, whether written by yourself or provided by us through support forums doesn’t require you to edit the theme files but can be added in a Custom CSS box provided in the customizer section. The specific path is:
Appearance -> Customize -> Design -> Custom CSS

But along with the introduction of the WordPress version 4.7, the Additional CSS box has been added as a core feature of WordPress. The specific path is: Appearance -> Customize -> Additional CSS

Basically the Custom CSS provided in our theme and the WP 4.7 Additional CSS accomplish the similar task. However, changes have been made in most of our themes (some themes are not yet released with the new update by the time this article is written), to make it compatible with the new Additional CSS feature of WP 4.7. Now if you have the latest version of both the theme and WordPress installed then you might notice that the Custom CSS provided in our theme is no longer visible, but there is no thing to worry about because if you had added any custom CSS in the Custom CSS box then it will automatically be migrated to the WP 4.7 Additional CSS and from hereinafter you should use the Additional CSS. You can read our blog, to know more about the Additional CSS in WP 4.7.

FAQs/Common Problems

  1. I added the custom CSS in Appearance -> Custom CSS
    instead of Appearance -> Customize -> Design -> Custom CSS, is it the same thing?

    – If there is an option there for custom CSS, then it must be provided by some plugins like JetPack and yes it basically serves for the same purpose.
  2. I have added the code provided by the support team in the correct place but I am not able to view the desired changes.
    – Since the code provided will only work if it is pasted exactly the same as provided, however, unintentionally users may copy only some part of the code or throw in some extra character from there side, whatever the reason may be the conclusion is that the code won’t be functioning as intended.
      • Some Examples:

      • Just a dot (.) is missing here, but that is all it takes not to work.
      • Similarly a closing bracket (}) is missing here.
      Where do I add my custom CSS?