Getting Started: 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.

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.

Go to the 2shine Releases on Github and download the ZIP file provided there.
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 installation guide)

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

Apply the Skin to the Site

Go to Manage -> Themes
Select the desired theme
Confirm your choice
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).

Customize Some Basics

In this "Getting Started" guide, we will go through some easy-to-adopt steps to customize the website to our needs. We will learn how to change colors, use a different font, and implement a custom logo.

Change Main Colors

The 2shine skin relies heavily on CSS variables, which can easily be adjusted to one's preferences. The CSS variables in /theme/theme.css can be modified to customize the look and feel of your project. Since it's native CSS, you can simply change the values and instantly see the updates without the need for Sass compiling.

Let's start at the top by changing the primary and secondary colors to new values. After making these changes, return to your website and perform a hard refresh (Ctrl + F5).

change:

--bs-primary: #E23835;--bs-secondary: #386BB7;

to:

--bs-primary: #0060AC;
--bs-secondary: #001D38;

This should turn your website blue. You can compare your results with the before-and-after images below.

Change the Font

Now that we know how to change colors, you might also want to use your own font on your website. Luckily, this is also possible using variables.

We'll start by changing the font for regular content (<p> elements, etc.). To make the change immediately noticeable, we'll choose a distinctive font.

For that we will take a font from Google Fonts. There you can take whatever font you'd like. In this guide we will use the Milonga font. For easy access the needed code is prepared below.

Open the theme.css file and paste this line at the top:
@import url('https://fonts.googleapis.com/css2?family=Milonga&display=swap');
Now, go to the font settings to update the --theme-font variable to use our new font (with Arial as our fallback):

Change:
--theme-font: "Manrope", Arial;

To:
--theme-font: "Milonga", Arial;

If you also want to change the font for titles and headlines, simply update the --bs-body-font-family-headlines variable in the same way. These styles are defined in src/scss/utils/_typography.scss. Although they depend on Sass, we've configured it so that changing the Bootstrap variable will still apply the changes without requiring compilation.

Custom Logo

In a last step we want to implement our own logo in the navigation, by replacing the images/logo.svg with your logo's .svg file.

OR..

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.

(The screenshot shows a combination of both solutions, but you only have to to do the one or the other)

You can take your own logo or use this file for testing.

Do More!
This is just the beginning. Continue with the docs to customize it any way you want!

continue to docs