Adding custom CSS

Often you need extra styling for your site that can’t be done through the theme options or any quick styling detail you need as these are what make the site unique. Custom CSS is used if you want to add or edit styling of the theme during the process of making your website.

 

Using Custom CSS

Adding Custom CSS is really simple, head in the WordPress admin panel and on the left sidebar click the Custom CSS and make sure you are in the General Style. Now that you’re into the page paste your code below this line (see image):

/* ===========================================================
User CSS modifications
=========================================================== */

 

Custom CSS area

Can I apply CSS for a specific device/size?

Yes, just switch to the Responsive tab and there you will see 4 text areas:

  1. LG – Large Screen — Adding CSS here will be available only on large screens, desktops.
  2. MD – Medium Screen — The medium screen is used for notebooks and landscape tablet view.
  3. SM – Small Screen — CSS added here will be shown only on tablets.
  4. XS – Extra Small — Valid only for smartphones.

 

Custom CSS valid only for a specific page/post type

You can also apply CSS that will be valid only for that page, to do that:

  • Go to the page or post you want to add extra CSS, edit it.
  • Scroll down to the Parameters and Options.
  • Click the Custom CSS from the left tabs and paste the CSS you need.
  • Save and see your results live.

If you’re looking for professional help in this matter, there’s always someone available for such tasks on Codeable or WP Kraken website. Pricing and timeline are always straightforward there and that’s the main reason for recommending those services.

 

Custom CSS Settings

If you go to Custom CSS and then press the Settings tab you can disable Custom CSS for debugging purposes.

If you click Disable and then Save Changes then the CSS codes that are applied on your Custom CSS are will not be applied on your site, and when you are on Custom CSS you will see a message Custom CSS is currently disabled. You can change this on Settings.

Was this article helpful?

Yes No