This is a Theme (Skin) in Dnn to make websites with Bootstrap5. It's for professional web designers and developers, as you can use it to creat anything you want assuming you understand your HTML and CSS.
There are 5 predefined themes included in 2shine. They are made to fit as many different needs as possible.
👉 See the demos
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
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
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
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.
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
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
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.
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