Light and Dark skins

While building your website with Uncode, you will often face a choice between Light and Dark skins. The use of skins makes two completely different colors presets available to use on your site to grant contrasts:

• Light Skin: in the absence of modifications, this refers to dark text on a light background.
• Dark Skin: in the absence of modifications, this refers to light text on a dark background.

▶  

Transparent Menu and automatic skins

In the Theme Options, you have the option to set a primary menu background opacity. If you set the primary menu background opacity, Uncode will detect the skin you are using for the header, and if needed it will switch the menu skin to ensure optimal contrast.

• Menu skin change on slides: the menu changes skins based on the slides' skin, view example.
• Menu skin change on scroll the menu change skins once scrolled, view example.

Please note that you don’t have to modify the original skins to adjust the color of the menu, you just need to set the header skin, this tells Uncode how to adjust the menu color according to based on the contents you have.

Set the Header skin

Set the main skin of your transparent menu based on the header type you are using:

• Content Block Skin: if you are using a Content Block Header the Skin option is the main skin of the column container, screenshot.
• Default Header Skin: if you are using a Default Header the Skin option is in the Header options (please note that the Default Header can be edited both by the Theme Options and both by the Page Options), screenshot.
• Revolution Slider: is you are using Revolution Slider you can set the Skin option to any single slide. Detailed info can be found on the dedicated page of the documentation, screenshot.
• LayerSlider: is you are using Layer Slider you can set the Skin option to any single slide. Detailed info can be found in the dedicated page of the documentation, screenshot.

Common troubleshoot

1. Have you wrongly modified the Skins options?

If you think you have wrongly modified the skins, here you can check a hi-res screenshot of the default Theme Options. Please compare with your options, set the main colors as our original Theme Options, and set the Header skin with one of the above-mentioned method.

2. Content Block headers with multiple columns

If your header is designed to have more columns (as this page) you need to insert the columns with your contents inside the main container and insert an Inner Row element. In order for the correct SKIN is applied this must be applied only to one main column, screenshot.