To apply the skin to globally and to the site you're on right now, follow the steps provided.
The 2shine skin leans heavy on variables, which can easily be adjusted to ones preferences. The CSS variables in /theme/theme.css can be changed to adjust the look and feel of your project. Because it's native CSS you can simply change the values and instanly see the changes, without the need of Sass compiling.
/theme/theme.css
Let's start at the top by changing the primary and secondary color. When you do so return to your website and make a hard refresh (ctr + f5).
--bs-primary: #0060AC;
--bs-secondary: #001D38;
Furthermore we could change the font behaviour by assigning it a new font family or changing the size and weight.
--bs-font-sans-serif: "DM Sans", system-ui, -apple-syst..;
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
If you uncomment the green variables (they are commented out atm and don't apply) you can customize the UI even more.
You can implement your own logo int he navigation, by replacing the images/logo.svgwith your logo's .svg file. If you don't have an .svg version of your logo, you'll need to go to controls/theme-body.ascx and update the path to your logos file type.
images/logo.svg
.svg
controls/theme-body.ascx
ou can further customize the 2shine skin by utilizing Sass variables, though this is recommended only for advanced users. Since these stylings depend on Sass, they need to be compiled into CSS first before taking effect. For this, you can use any Sass compiler. We recommend using Webpack.
If you want to start customizing using Sass, see our documentation: