Zum Inhalt springen
Docs
Start  › ... Doku

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 have a 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 a 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 essentially the defined distance between the inner and outer elements.

👉 Read the Containers guide

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

Uses Bootstrap 5 Best Practices

2shine uses Bootstrap5 and SASS with modern best practices to minimise CSS. The goal is to allow developers to customize as much as possible with minimal effort.

👉 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 the  home page, to all product pages, to all German pages or even show something to admins that normal users can't see. 

👉 Read the Magic Page Class guide

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

Magic Container ID

Every container that is created is assigned a specific ID. 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 is 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 dots 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)

Change the Logo

To change the logo of your page, simply replace images/logo.svg with 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 there.

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

Make content appear and disappear

You might encounter situations where you want content to be displayed on certain pages, but not even load it on others. This can be achieved with a ternary operation and some variables.

👉 Read more