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
- Dark Skin - enable/disable site dark skin. Quick View
- Lazy Load For Images - Lazy Load is delays loading of images in long web pages. Images outside of viewport (visible area of the browser window) are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases, it can also help to reduce server load.
- 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
3. Primary Color
- Predefined Skins - Choose your favorite skin from the available 15 predefined skins, after choosing one the below styling options will fill in automatically.
- Custom Primary Color - the primary site color.
- Disable Boxed/Framed Layout Shadows - enable/disable shadows around the site in boxed and framed layouts only.
- Highlighted Text Color - the background of texts when selecting some of words or characters by the mouse.
- 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.
- Links text HOVER color - the color of all links in the hover state, this will override the custom color of news blocks.
- 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.
Rainbow Line Above Header - enable/disable the rainbow line above the header.
7. Main Navigation Styling
- Background Color - main nav background color.
- Text Color - all text color on main nav menu such as mega menu posts metadata.
- Links Color - all links color.
- Links Color on mouse over.
- Main Nav Border Top Color - you can draw a border above the main nav and control its color from here.
- Main Nav Border Top Width - integer number without unit e.g. 1, 2, 3.
- Main Nav Border Bottom Color - border bottom color.
- Main Nav Border Bottom Width - integer number without unit e.g. 1, 2, 3.
8. Main Content Styling
- Background Color - main content background color.
- Background image - or you can set a background image instead of previous gray color.
- In Post Links-Color - the color of all links in article content area.
- In Post Links-Color on mouse over - the color of all links on over in article content area.
9. Footer & Copyright 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
Mobile Menu Settings
- Mobile Header Background Color - Set a custom background color for the mobile header.
- Mobile Header Background Image - Set a custom background Image for the mobile header.
- Mobile Menu Icon - control the mobile menu icon color.
- Links Color - Control the menu links color.
- Social Icons Color - Control the social icons color.
- Search Button color - Control the search button color.
- Mobile Menu Background - Choose between solid, gradient and image.
- Background Gradient Color 1.
- Background Gradient Color 2.
11. Custom CSS
- Custom CSS - the code embedded in this area will work on all screens sizes except you specify snippet of code inside a media query.
- Tablets - work on tablets only, from 768px to 1024px.
- Phones - work on phones only, from 0 to 768;