To customize Smart Skin go to Appearance > Theme Options > Smart Skin and customize it from their.

How Smart Skin Works

After a lot of research we came up with many relations that gather website elements in groups according to their colors, Accordingly instead of deciding 100+ hues for all your website elements you will choose only 9 hues and Smart Skin will apply them intelligently on all website elements, Furthermore Smart Skin will generate more tints and shades automatically from the hues you choose to complete your color scheme.

Lets take site footer as an example, You need to come us with at least 10 tints and shades in order to  create a good looking visually cohesive footer which is an exhausting and time consuming task to decide and try many combinations but with Smart skin all you have to do is to choose 2 hues, one for the text and another for the background and Smart Skin will do the rest, It will generate the rest of tints and shades required and apply them on all footer elements with one click.

Smart Skin works perfectly with both light and dark color schemes and it intelligently changes the way it behaves according to your color scheme type. Also smart skin comes with many ready-made color schemes which you can use any of them as it is or customize it to fit your taste.

Using Smart Skin

Light or Dark Theme?

Select whether you want your theme light or dark. It important to choose even if you will create your own Smart Skin as your choice affects how Smart Skin behaves.

Choose from Ready-made Smart Skins

You can choose from the ready made smart skins below and save to apply it to the entire theme. Also after choosing the skin you prefer you still can customize it below in “Customize Smart Skin” section.

Customize Smart Skin

If there is no ready made smart skin suitable for your website project you still can create your own smart skin. You still can select a ready made smart skin and make the necessary color values changes you want or create a new smart skin from scratch. to be able to do that easily go through the values list below to understand where each value will be applied. Also you can use Smart Skin Generator to generate a cohesive monochromatic smart skin for your website.

  • Primary Color Used for buttons background (a darker shade from it used for mouseover) , a hover color for links and image’s overlay color, etc.

Content & Widget Typography Colors

  • T1 Used for all titles from H1 to H6, widget titles, main menu links and all other body links.
  • T2 Used for body text, forms input text and a lighter tint of it used for meta data,icon sharing box and main menu separators.
  • T3 Used for page titles , breadcrumbs and subtitle.

Content & Widget Backgrounds, Borders & Separator Colors

  • B1 Used for all input fields borders, all borders, all separators, all dividers, image borders. (a tint from it used for the submenu background, many elements backgrounds like quotes, testimonials, accordion, taglines).
  • B2 Used for page title background.
  • B3 Used for body background color, (a tint from it used for the input background).

Footer Typography & Backgrounds Colors

  • FT Used for footer titles and links, a darker shades of it used for footer body text, meta data and separators.
  • FB Used for footer background and top header background. A darker shades of it used for footer buttons, input background and copyright bar background.