When you buy a theme, there is no need to be a programmer to use it, however some small skills are required to complete small custom tasks. Sometime you need to do some small modifications – apply small custom styles to elements. But how can you do it with Ninzio themes? Simple, we created options for you to make it easy.

First thing you need is the starting point – you need to know what element needs to be modified with your custom style, so you can target it. Use google developer tools to target specific elements in your page layout.

 
506
 

Second you need to pick a right selector for you element. For example in the image we can see some code that is selected and that code (anchor link) has several classes on it “button” “orange” “round”. How can we target that button to apply custom styles to it? First you need to target the main class 0 BUTTON. Because first of all it is button, and after that it is orange and round. More about css selectors you can find in http://www.w3schools.com/css/css_selectors.asp.

 
Third you should always check its styles (avaialbel in right part of google developer tool). Already written styles is a good starting point in modifying custom style. Find appropriate styles and use as starting point. Example:

.button, button, input[type="reset"], input[type="submit"], input[type="button"], .wc-proceed-to-checkout a, .single_add_to_cart_button {
    outline: none;
    border: none;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 0 0px 5px 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 1;
    text-align: center;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    padding: 14px 34px;
    font-size: 14px;
    line-height: 24px;
    border-radius: 250px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

Use this as starting point to change the targeted element. Say for example you want to change the font-size and line-height of this element.

.button {
    font-size: 18px;
    line-height: 28px;
}

Add this style to Apperiance >> Theme Options >> Styling >> Custom CSS Styles.

And now your styles are applied, and they overwrite default theme styles. Sometimes you need to give a special attribute to your style, if it is not applied – !important attribute:

.button {
    font-size: 18px !important;
    line-height: 28px !important;
}

It indicates, that your styles are VERY important.