Customizing your style

This article explains how you can troubleshoot style problems or adjust your CSS to customize your GD site.

We also recommend the SiteOrigin CSS plugin, which adds a CSS inpector to your site and allows you to save your new styles directly to a custom stylesheet.

Most browsers have a built-in code inspector, for example FireFox has Firebug, Internet Explorer and Chrome have Developer Tools.

For our example below, we will use Chrome’s Developer Tools but they all work very similar.

To show how to use the code inspector, we will try to change the background color of the footer in the GeoDirectory Demo.

  1. Navigate to the web page where you want to change some CSS.
  2. Right click on the element you want to change [Step 1 in the image below – we are right clicking on the footer].
  3. From the pop-up menu, choose Inspect element.
  4. If the code inspector is not open yet, it will open.
  5. If the element is not highlighted yet, click on it to make sure it is [Step 2 and 3 – highlight the footer style].
  6. That will locate the style for that element [Step 4 – in this case it shows that the footer class has a background color specified].
  7. The code inspector will also show you in which file you can find the code [Step 5].
    Turn off GD Booster before checking your CSS.
  8. To change the background color, just double click the code you want to change, in this case we will change the background color to red [Step 6 in the second image].
  9. If the code is correct, the web page will adjust to show your change [See the footer is now red].
  10. You can now add that code to the stylesheet of your child theme:
    Go to WP Admin > Appearance > Editor and locate style.css in your child theme.
  11. Add the code .footer {background-color:red;}, and save. That will update your site.

Useful resources

Using child themes http://codex.wordpress.org/Child_Themes
CSS tutorial http://www.w3schools.com/css/
Using FireFox Page Inspector https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Using Chrome Dev Tools https://developer.chrome.com/devtools/docs/elements-styles
Using Internet Explorer F12 developer tools http://msdn.microsoft.com/library/ie/bg182326