We heavily recommend you to use browser developer tools, when building or modifying a design for your child theme. It is how we do it at BizzThemes and you should as well. It is because you see the design changes live as they happen. Once you apply the CSS changes from browser to your style.css file, they will always look the same as they did, when you tested them using the browser developer tools.
You can modify your website design using practically any modern web browser, but for the sake of popularity and web usage statistics, we’ll demonstrate how to modify your child theme’s design using the Chrome browser. Here are tutorials about using developer tools for all modern browsers, currently in existence:
- Chrome Developer Tools
- Safari Developer Tools
- Firefox Developer Tools
- Internet Explorer Developer Tools
How to modify the design using Chrome
In this tutorial we’ll demonstrate how to change the background color of footer widgets section. Even though we are using the Chrome browser, it would be more or less the same using other browser’s developer tools.
Step 1: Open developer tools on page you want to edit
To access the developer tools, open a web page or web app in Google Chrome. Then take one of the following actions:
- Select the Chrome menu
at the top-right of your browser window, then select Tools > Developer tools. - Right-click on any page element and select Inspect element.
Step 2: Modify the CSS style
After you have selected an element you want to edit, navigate to styles of that element and modify the CSS attributes. We will change the background color to red for demonstration purposes.
Step 3: Copy the Modified CSS
Browser developer tools are used for demonstration purposes only and don’t save the changes you made. You need to copy the changes you made to your clipboard and save them into correct CSS stylesheet – in this case style.css.
Step 4: Save the Modified CSS
Once you have copied and located the file you edited using the browser developer tools, you need to save save it into an actual theme file. In this case, that would be style.css, which is located inside theme root folder. You can open the file using any of the code editors, but in this particular case, you can also edit the file using the WordPress file Editor tool.
