SiteCozy

  • My account

How to customize style.css of your WP child theme

2018-10-17

First, go to Appearance>Editor in your wordpress admin panel. Select the right child theme in the drop-down menu at the top right corner of your code editor. Then, choose style.css

Start by incrementing the version by 1 at the top of your style.css. 

/*
Theme Name: eleven40 Pro Theme Theme URI: http://my.studiopress.com/themes/eleven40/ Description: A mobile responsive and HTML5 theme built for the Genesis Framework. Author: StudioPress Author URI: http://www.studiopress.com/
Version: 2.2.1

This will help the browser to load the last version of your style.css, otherwise, your style.css will not be updated and you may not see the changes in your browser. Then, you may think that the changes of your wordpress child theme style.css don’t work. 

Then, open a new tab, and display a web page of your website, right click and click on Inspect. 

Then, a new tab is going to get displayed. In the bad elements, click on an HTML tag, the CSS will appear in the tab “style” below it. In the tab style, you can click on a CSS modify it. You can also add a CSS directive after an existing already existing CSS directive.

Google chrome tools to analyze and customize CSS

Here I have added “font-family: serif;”. Now I can copy and paste it into the style.css file of my child theme.

I have several options now. If the CSS directive does not exist yet in the style.css, I am going to paste an what I want to change the font of paragraphs only. To do so I select the code from the style tab to the style. CSS code editor and I keep what I need to customize the style.css child theme.

If it already exists, I am going to do a CTRL+F to find the selector that I want and add the CSS directive to it: “font-family:serif;” then I press ‘update’.

It is not bad to keep track of your style.css changes in your Microsoft onenote or your apple note. 

Related Posts:

  • How to create a child theme of your wordpress theme?
  • The best multipurpose themes for WordPress
  • Benefits/disadvantages of using the genesis framework
Download our Broken link checker freeware here Buy a license key for the Sitecozy broken link checker

Customer Login

Lost password?

Categories

  • Webmaster advice
  • SEO advice
  • Web hosting
  • SiteCozy link checker KB
  • WordPress theme & plugin reviews
  • All articles
Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Copyright Sitecozy 2018