SmartTheme Styling Settings


Introduction

In this training, we'll cover the Styling Settings of SmartTheme which includes Link Colours, Category Tag Colours, and Typography.

You can reach here form your WordPress Dashboard's Appearance > Theme Options > Styling. 

Link Colours

This section covers styling of the links all over the Theme unless covered elsewhere. For instance, Footer section of SmartTheme have options to change colors of links in the footer which will override the Link Colour section here for the

You can change the Regular, Hover (When you mouse over the link) and Active state of a link from he option "Link Colour".

The second set of options are to change the Button Background Colour, Button Hover Background Colour, and Button Text Colour.

Please note, this option won't have any effect on the Hero Button on your Latest Posts HomePage as it's covered in Hero Section in Theme Options > Blog > Homepage Hero.

The last set of options are for the Menu on the SmartTheme header. These also handle the Regular, Hover and active state of the Menu.

Category Tag Colours

We have a couple of options here. 

Category Tag Text Colour and Category Tag Background Colour which deal with the Text and Background colour of Category in Single post and Post Archive pages.

As you can see I have changed the Text colour to black and Background colour to orange.

Let's see the front end of the page where the Category links have implemented the changes.

As you can see the Hero Category text colour has not changed. The background colour is changed to orange though.

Also, if you mouse over the Hero Category link you'll see it changes to the text colour we set for Category Tag Text.

That's because the Text of Hero Category Tag is coming from the Hero Section. Whenever we change the color of the Hero section it changes text colour for all the elements inside there including the Category Text.

Typography

Typography setting is one of the most crucial parts of Styling your site.

The first option is "See Advanced Settings" which is "No" by default. If you turn this on some additional options show up.

"Uppercase Heading & Title Styling" changes all your Headings and Titles to uppercase if you set this to "Yes" instead of the default value "No".

This is a sneak peek of the panel when you have the Advanced Settings "On".

With this, you have a whole bunch of options to adjust the Font Family, Font Size, Font Weight & Style, Line Height, Letter spacing and some other options you might need.

These options are available for your Site Title, Site Tagline, Regular Title, Text, Menu and all the headings (H1 to H6) individually.