2shine will add various classes to the <body> tag to make all kinds of stylings easy.
<body>
Often you'll have needs like the following:
The bad way to do this is to create new skins / themes for each requirement.
This is really bad, because you end up with a lot of duplicate code to maintain - and this usually begins to diverge in an uncontrollable manner.
Our goal is to keep things simple and manageable
To achieve this, we ensure that the <body> tag tag of the page has a lot of special classes which contain context information - such as the current page or the parent page.
We call these Magic Page Classes
Using these you can create really cool CSS rules to adjust anything you need, as targeted as you need.
Keep reading to see what you can do with each one.
If you want to extend this system and add more context information, you can do this in the body-css-classes.ascx file.
body-css-classes.ascx
With this class every page is given a unique page ID which means every page can be called upon to make changes to it.
Example:
With simple css like in the image on the right you can make changes to a single page by calling on the page class. The css on the right will set the body background-color to cornflowerblue.
👉 Here you can find this example
This class indicates the level the page is on. That means if the page is on the same level as the home page (root level) this value will be 1.
Take a look at the graphic below where "Magic Page Class Styling" and "Magic Page Class Styling (de-DE)" have the value 2 and "Docs", "Docs (de-DE)" and "Home" display 1.
The code on the left changes the background-color for all the pages which the nav-level-3 class.
This class indicates, which language variation of the page you are currently viewing. That means if you enabled a page in, for example, German and English and you were viewing in English this value would be en.
With this you could change the style for all the english pages and for example change all the background colors for those.
This class shows the language the page was first created in.
This class shows the language of the highest ancestor of the page in the default language.
Take a look at the graphic below where "Magic Page Class Styling", "Magic Page Class Styling (de-DE)", and "Docs (de-DE)" have en as the value.
This can, for example, be used to style all descendants and copies in all languages of a page.
This shows the site that this page is on.his means that if it was created on the default site this value will be 0. This can be used to style all pages of a site.
This value indicates the highest-ranked ancestor of this page. If we take this page as an example we see that the value is page-root-44. page-44 is the Docs page, which is on the same level as the home page and at the root level.
This class refers to the highest ancestor in the default language. If you created the page in e.g. english the class will always refer to the highest-ranked ancestor in the default language in this case, English.
This can, for example, be used to style all descendants in all languages of a specific page. Take a look at the graphic below where the pages "Magic Page Class Styling", "Magic Page Class Styling (de-DE)", and "Docs (de-DE)" all point to the "Docs" page.
This class is only given to the home page but to all language variations of it. It can be used to make changes specifically to the home page.
This class regulates the 5 different layout variations andstyles the page according to the selection. The value can be set to default, centered, centered submenu, fullscreen and float-headerwide.
👉 See the demos
👉 Read about the layouts
This class regulates the navbar variations it can be set to right (default), center and left. The navbar variations change the look and feel of the navbar.
👉 Read about the Navigation
2shine will add a to-shine-header-pane-empty class to the Headerpane if it is empty. It is used to style the Headerpane on some layouts when there are no modules populating it.
to-shine-header-pane-empty