Okay
  Print

Customizing the theme

This ticket will learn you how to customize several aspects of a theme yourself, giving you the knowledge to do a lot of CSS tweaking.

All that's here refers only to style issues (hiding certain elements, changing colors, playing with size, etc..). For in-depth customizations you'll need to know HTML/PHP/JS.

So, the place for custom CSS code is in the Theme Options > Custom CSS. There you need to add all of your custom code (or within a child theme). Don't ever modify the theme's stylesheet!


So the basics ... You need a browser with an element inspector(most of them have).. For example, in Chrome or Firefox, if you hit F12 the inspector will come up, and there is a "magnifying glass icon" on which you click and will allow you to select different parts of the website. Just select whatever you wanna change and see where are those styles located..

Once you figure out how an item is called (it's identifier - either a class or an id), you can use the element inspector to test out various custom CSS codes, then you simply have to copy the modified CSS code into the Theme Options. And after saving and refreshing (and maybe clearing your cache) you will see the new options.

Here's a video on how to inspect elements: https://www.youtube.com/watch?v=Z4-atsnk69w

Here's a link for some CSS basics: http://www.cssbasics.com/

Learning how to leverage the element inspector and some basic CSS functions, you'll be able to easily edit various aspects of the theme and not only!