{"id":1139,"date":"2014-09-17T14:03:37","date_gmt":"2014-09-17T14:03:37","guid":{"rendered":"https:\/\/docs.wpgeodirectory.com\/?p=1139"},"modified":"2017-12-31T11:28:17","modified_gmt":"2017-12-31T11:28:17","slug":"customizing-your-style","status":"publish","type":"post","link":"https:\/\/wpgeodirectory.com\/docs\/customizing-your-style\/","title":{"rendered":"Customizing your style"},"content":{"rendered":"

This article explains how you can create new CSS rules to change the style of your site.<\/p>\n

Most browsers have a built-in code inspector<\/strong><\/em>, for example FireFox has Firebug, Internet Explorer and Chrome have Developer Tools.<\/p>\n

For the example below, we will use Chrome’s Developer Tools to change the footer background color on the GeoDirectory Demo<\/a>.<\/p>\n

    \n
  1. Open the Chrome browser to the web page<\/a> where we want to change the style of an element.<\/li>\n
  2. Right click on the footer area element we want to change [Step 1 in the image below – we are right clicking on the footer].<\/li>\n
  3. From the pop-up menu, choose Inspect element<\/strong><\/em>. If the\u00a0code inspector<\/strong><\/em> is not open yet, it will open.<\/li>\n
  4. If the element is not highlighted yet, we click on it to make sure it is [Step 2 and 3 – highlight the footer style].<\/li>\n
  5. We can continue to select ‘Inspect’ until the element we want is highlighted in the code[Step 4 – in this case it shows that the footer<\/strong><\/em> class has a background color specified].<\/li>\n
  6. The code<\/strong> inspector<\/strong><\/em> will also show you in which file you can find the code [Step 5].
    \n<\/i> Turn off GD Booster before checking your CSS.<\/span><\/li>\n
  7. The CSS code is displayed, and we click on the rule to change the background color; double click starts the editing. In this case we will change the background color to red [Step 6 in the second image].<\/li>\n
  8. If the CSS code is correct, the web page will adjust to show your change [The footer is now red].<\/li>\n
  9. Use the mouse to highlight the CSS code and copy it to your clipboard; proceed to add it to your site. You can add custom CSS to GeoDirectory at GeoDirectory > Design > Scripts > CSS Custom Code<\/strong><\/em>, or use anotherplugin or even add that code to the stylesheet of your child theme at WP Admin > Appearance > Editor<\/strong><\/em> and locate style.css<\/strong><\/em> in your child theme.<\/li>\n
  10. Add the code .footer {background-color:red;}<\/code>, and save. That will update your site.<\/li>\n<\/ol>\n

    \"\"<\/p>\n

    \"\"<\/p>\n

    Hints<\/h4>\n