Styling Settings

One of the strong points of Jannah theme is the easiest way to customize your site styling. With Styling Settings you can do:

  • Convert your site to dark skin with one click.
  • Customize colors for each section of your site such as header, footer, main nav, secondary nav, content, mobile menu and more.
  • Choose one of our Predefined skins, you often will like one of them.
  • Want more imagination, you can write your custom style in the custom code area.

Now! let's figure out some points to be more obvious:

1. Styling Settings

  1. Dark Skin - enable/disable site dark skin. Quick View
  2. Apply custom styling by inline code check this option if you have problems with styling because of styling file rewrite permissions.

2. Custom Body Classes

Add a custom class or more (by separating theme with space) to body tag for more customization.

3. Primary Color

  1. Predefined Skins - Choose your favorite skin from the available 15 predefined skins, after choosing one the below styling options will fill in automatically. 
  2. Custom Primary Color - the primary site color.

4. Body

  1. Disable Boxed/Framed Layout Shadows - enable/disable shadows around the site in boxed and framed layouts only.
  2. Highlighted Text Color - the background of texts when selecting some of words or characters by the mouse.
  3. Links Text Color - the color of all links in the normal state (not on hover or focus). This will override the custom color at news blocks.
  4. Links text HOVER color - the color of all links in the hover state, this will override the custom color of news blocks.
  5. Borders Color - this is one of the most powerful and fantastic options at styling settings, let you change the color of all borders all over the site.

5. Secondary Nav

You can change the Secondary Nav background color, text color, Links colors, Links color on mouse over and breaking news label background.

You can control the Secondary Nav Position (above the header or below of it) or hide it or change its components as you want from the header builder Jannah options > Header > Secondary Nav Settings.

  1. Rainbow Line Above Header - enable/disable the rainbow line above the header.

  2. Background Color - header background color.

  3. Background Image - header background image options.

  4. Disable Header Shadows - enable/disable shadows below of header.

You can control the Main Nav Position (above the header or below of it) or hide it or change its components as you want from the header builder Jannah options > Header > Main Nav Settings.

  1. Background Color - main nav background color.
  2. Text Color - all text color on main nav menu such as mega menu posts metadata.
  3. Links Color - all links color.
  4. Links Color on mouse over.
  5. Main Nav Border Top Color - you can draw a border above the main nav and control its color from here.
  6. Main Nav Border Top Width - integer number without unit e.g. 1, 2, 3.
  7. Main Nav Border Bottom Color - border bottom color.
  8. Main Nav Border Bottom Width - integer number without unit e.g. 1, 2, 3.

8. Main Content Styling

  1. Background Color - main content background color.
  2. Background image - or you can set a background image instead of previous gray color.
  3. In Post Links-Color - the color of all links in article content area.
  4. In Post Links-Color on mouse over - the color of all links on over in article content area.

You can customize each element at footer and copyright area by the easiest way you can imagine, you can set a background color and image, draw a border above footer area, change widget title color, change the text and links colors, control the margin and padding spacings for footer area. 

Also, you can set a background color and image for copyright area, change text and links colors.

The following image will figure the Footer and Copyright Area options.

10. Mobile Menu

You can full control mobile menu stylings, you can change the background to a solid color, gradient or image also you can change the links, social icons, and mobile menu icon color.

Mobile Menu Settings

  1. Mobile Header Background Color - Set a custom background color for the mobile header.
  2. Mobile Header Background Image - Set a custom background Image for the mobile header.
  3. Mobile Menu Icon - control the mobile menu icon color.
  4. Links Color - Control the menu links color.
  5. Social Icons Color - Control the social icons color.
  6. Search Button color - Control the search button color.
  7. Mobile Menu Background - Choose between solid, gradient and image.
  8. Background Gradient Color 1.
  9. Background Gradient Color 2.

11. Custom CSS

For more customization, Jannah offers a place to add your custom style.

  1. Custom CSS - the code embedded in this area will work on all screens sizes except you specify snippet of code inside a media query.
  2. Tablets - work on tablets only, from 768px to 1024px.
  3. Phones - work on phones only, from 0 to 768;