If you are comfortable with writing CSS, you may use your browser's inspector and the WordPress Customizer to quickly and easily make CSS adjustments for elements without their own design options.
The theme’s original CSS can be found by using your browser’s web inspector tools. This is the preferred way to view CSS because it’s more comprehensive and will show you all the CSS that applies rather than just a subset of it. Rather than changing or editing the actual CSS files, you will use this method to find the correct CSS selector to use to declare your own style overrides.
Using the Browser Inspector
These three basic steps will work in most current browsers to open the web inspector:
- Right-click on a web page element
- In Safari, go to Preferences > Advanced and enable the Develop menu first.
- In Internet Explorer 10, go to Tools > F12 Developer Tools
- Select the Inspect Element option
- Look for a panel at the bottom of the screen
The panel will display the webpage HTML with the element you clicked highlighted. The associated CSS styles being applied to that element are shown on the right with the most dominant styles at the top. Sometimes you need to click on the specific line of HTML and look at the styling to find the exact element you need to override. For example, inspecting a link may open the Inspector on the <li> element of the menu the link is in, but to override the link's color, you would need to click on the <a> or <span> to find the CSS on the right with a "color: #123456" property. Once you find the style to override, you can copy the selector into the Additional CSS panel in the customizer and add your custom properties.
The following walkthrough uses the Chrome inspector with the Twenty Thirteen theme to demonstrate:
Check out the following resources for further help on using the Inspector, the basics of CSS structure, or what property names to use in your styles.