Skip to main content
Home  › ... Install

Install 2shine Bootstrap5 in Dnn

There are two methods to get started with 2shine. The first one is the easier one 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 beginn with the installation process. To find out how to download and install Dnn visit their official website.

Install 2shine with 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 
    5. Go to Manage 
    6. Go to Themes 
    7. Select the 2shine skin
  3. The skin won't be applied to already existing pages. Apply skin to already existing pages. 
Text.First(imgItem.ImageCaption, imgItem.Title)

...or Install 2shine with Git Clone

Git Clone the Skin

  1. Go to your Dnn Root /portal/_default/Skins
  2. Open the Skins folder in your console (eg. Right click and select Open with Powershell or Open with Command Prompt)
  3. Clone the 2shine theme repository into this folder with the git clone command:
    git clone https://github.com/2sic/dnn-theme-2shine-bs5 your-desired-folder-name
  4. Detach from the upstream repository by deleting the .git folder (you need to do this because you shouldn't send changes back to the master git repo). 
    Powershell: In the root folder of the skin, run: rm -r -fo .git
  5. Initialize a new repository (to ensure you can keep version-changes as you work). Use VS Code or with the console and run: git init

Git Clone the Containers

  1. Go to your Projects _default folder
  2. Go to Containers 
  3. Open the Containers folder in your console with one of the methos described above 
  4. Clone the 2shine container repository into this folder wiht the git command:
    git clone https://github.com/2sic/dnn-container-2shine-bs5 "2shineBS5"

The container folder must really be called 2shine BS5 because the skin has that name as the default container. If you would want to change the name of the folder of the container you would have to go to the theme-body.ascx file and change the references there.

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

Apply the skin to the entire site

  1. Go to Manage -> Themes
  2. Select the desired theme
  3. Confirm your choice 
  4. Reload the page to see changes 
  5. Existing pages won't update - for these you will have to apply the skin manually 
Text.First(imgItem.ImageCaption, imgItem.Title)

Apply the skin to already existing pages

  1. Go to Content -> Pages
  2. Select the page you want to apply the skin to 
  3. Go to Advanced -> Appearance 
  4. Select the desired Theme (2shineBS5)
  5. Save the changes after the selection 
  6. Reload the page to see changes (ctr+f5 for hard reload)
Text.First(imgItem.ImageCaption, imgItem.Title)