Sometimes when working with our themes, you may wish to tweak something which is not controlled with the theme options (such as navigation colours, heading sizes and so on).

This is where you can utilize the awesome power of CSS to really take control of things, but how do you know what selector to use? This is where your browser can become the most crucial tool in your toolbox.

All major browsers come packed with features for helping you control the web, and although some of the specfics may differ a little, we hope you help you take your customization skills to the next level using your browsers developer tools.

Introducing Dev Tools

So, lets say you wish to change the colour of the navigation links, fire up your browser and right click the area your working with. This will bring up a contextual menu, the option your aiming for is ‘Inspect Element’ – just click this and the fun begins.

devtools1

Once you have opened up the tools, you will be presented with all the information needed to customize many aspects of your theme – this can be daunting to begin with, however with a little practice you will become proficient in no time.

Working with the tools

devtools2

With the developer tools open, you will now see a new area showing you whats going on under the hood of your site – from here you can scroll through the HTML to locate the areas you wish to change (usually each area is highlighted whilst browsing) and locate the CSS selector you need to make your changes – in this case, as you can see the selector needed is ‘.overlay-bar .menu li a’

devtools3

With this new CSS selector you can now go ahead and write your own rules as you wish, adding your custom CSS code to your custom css as you go.

For more on this, please see this handy video tutorial – http://screencast-o-matic.com/watch/conFYGe5VD