There are two methods to get started with 2shine. The first one is the easier option and recommended for beginners. The second one is more difficult and only recommended for people who know what they are doing. It is recommended that you download Dnn before you begin with the installation process. To find out how to download and install DNN visit their official website.
In this getting started we will focus on the more easy and accessable method of installing a theme in DNN. Start by downloading the latest version of the skin. You can find all available version on GitHub.
(After the two listed steps below (applying skin to site and global scope) you need to refresh the page to see the changes take effect.
If you create a new page you will find yourself looking at the default DNN skin again. In order to get our 2shine skin showing onto all pages we need to set it glabally (meaning the DNN Portal).
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
You can deeper Customize the 2shine skin by utilizing Sass variables, tho these is something only advanced users should do. Because these stylings depend on Sass they need to be translated to CSS first, before they take effect. For this you can use any Sass compiler there is. We recommend to use Webpack.If you want to start customizing usin Sass see our Docs: