Skip to main content
Getting Started
Home  › ... Get Started

Getting Startet: Jump Start your 2Shine journey

Install and apply the 2shine skin in DNN

In this guide, we will focus on the easier and more accessible method of installing a theme in DNN. Start by downloading the latest version of the skin. You can find all available versions on GitHub.

First, visit the installation guide, and then apply the skin as demonstrated on the second link.

Install 2shine in the Dnn UI...

For this method, you are required to have a DNN installation running. You can easily set one up locally on your computer with tools like nvQuickSite.

  1. Go to the 2shine Releases on Github and download the ZIP file provided there.
  2. In your running DNN instance:
    1. Go to Settings
    2. Go to Extensions
    3. Click on the Installation Extension
    4. Then drag and drop your ZIP file into the interface or search for it in the file explorer

 

(For details check the insatllation guide) 

Text.First(imgItem.ImageCaption, imgItem.Title)

Apply the skin to the site

  1. Go to Manage -> Themes
  2. Select the desired theme
  3. Confirm your choice 
  4. Reload the page to see the changes take effect.


Important: Existing pages won't be affected. For these, you will have to apply the skin manually (see other steps).

Text.First(imgItem.ImageCaption, imgItem.Title)

Custom Colors and Fonts

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.

Let's start at the top by changing the primary and secondary color to new values. When you do so return to your website and make a hard refresh (ctr + f5).

change:

--bs-primary: #0060AC;

--bs-secondary: #001D38;

to:

--bs-primary: #e077e6;

--bs-secondary: #f4baf7;

If you uncomment the green variables (they are commented out atm and don't apply) you can customize the UI even more.

Text.First(imgItem.ImageCaption, imgItem.Title)

Custom Logo

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.

Text.First(imgItem.ImageCaption, imgItem.Title)

Customization using Sass

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:

Sass Documentation

mehr