Skip to main content
Home  › ... Docs

2shine Documentation

2shine is a Dnn theme (skin) designed to create websites using Bootstrap 5. This documentation helps professional web designers and developers understand how to use and customize the theme effectively, assuming a basic knowledge of HTML and CSS.

What's Inside - 5 Theme Variations

There are 5 predefined themes included in 2shine. They are made to fit as many different needs as possible. 

  1. default - The page content is floating on a background and it has a full-width sticky-header (this theme will be applied by default to any new pages).
  2. centered - The content and the menu are max-width and there is a background on the left and right.
  3. centered submenu - The content is moved to the right and there is a submenu added on the left. There also is a background to the left and right. 
  4. fullscreen - Modules can use the full width to set the background. 
  5. float-headerwide - The content is floating and there is a wide header and background on the left and right. 

 

👉 See the demos

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

What's Inside - 2 Containers

There are three available containers. Every element has a default selection which will be used if it isn't changed. The difference between the three is the amount of padding that each one has. Padding is basically a defined distance between the inner and outer element.

👉 Read the Containers guide

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

Uses Bootstrap5 Best Practices

2shine uses Bootstrap5 and SASS with modern best practices to minimise CSS. The whole idea behind that is to allow developers to customize as much as possible with as little effort as possible. 

👉 Read the SASS guide

Magic Page Classes

2shine adds special classes to the body tag to make rule-based styling easier.

You can use this to add special styling to a specific page like  home, to all product pages, to all German pages or even show something to admins which normal users don't see. 

👉 Read the Magic Page Class guide

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

Magic Container ID

Every container that is created gets a specific ID assigned to it. This makes it much easier to style or customize exactly the module that you want. The assigned container ID looks something like this module-"number" and can be found by looking at the container in the Inspector/ Developer Tools of your browser. This ID can be directly referenced in your SCSS code. 

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

Customizable DDR Menus

2shine uses the built in DNN DRR menus. Those are used to make the Navbar and the Sidebar Navigation. We used best-practices to create our Navigation to make it understandable and easy to customize. 

👉 Read about the Navigation 

Responsive Breadcrumbs

2shine uses a responsive Breadcrumb menu on every page. It is made with the DNN DDR menus. It it also responsive and achieves that by just collapsing the lower levels and only showing the level you are on. While doing this it also shows some dotts to represent the collapsed menu points and also uses those as a button to show them again. 

👉 Read the Breadcrumbs Navigation guide

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

Logo

To change the logo of your page just replace images > logo.svg with the .svg file of your logo. If you don't have a .svg version of your logo you have to go to controls > theme-body.ascx and change the path there. 

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

Make content appear and disappear

You might run into situations where you want content to be displayed on certain pages but not even load it on others. This is possible with a ternary operation and some variables.

👉 Read more