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, the main area is light.
- Dark Skin: in the absence of modifications, this refers to light text on a dark background, the main area is dark.
Transparent Menu 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 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 Conent Block Header the Skin option is the main skin of the column container, screenshot.
- Basic Header Skin: if you are using a Basic Header the Skin option is in the Header options (please note that the Basic 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 the any single slide. Detailed infos can be found in the dedicated page of the documentation, screenshot.
1. Have you wrongly modifid the Skins options?
If you think you have wrongly modified the skins, here you can check an 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 a main container and insert an Inner Row element. In order the correct SKIN is applied this must be applied only to one main column, screenshot.