2shine will add various classes to the body tag to make all kinds of stylings easy.
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 managable
To achieve this, we ensure that the body tag of the page has a lot of special classes which contain context information - like what page we're on or what the parent page is.
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.
With this class every page is given an 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 with the home page (on root level) this value will be one.
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 on. That means if you enabled a page in for example german and english and you were reading 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 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 e.g. be used to style all descendants and copys in all languages of a page.
This shows the site that this page is on. Which means 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 on the root level.
This class refers to the hightes ancestor in the default language. If you created the page in e.g. english the class will always refer to the highest ranking ancestor in the default language in this case english.
This can e.g. 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 speciffically to the home page.
This class regulates the 5 different layout varriations and styles the page accordingly 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 varriatios it can be set to right (default), center and left. The navbar varriations change the look and feel of the navbar.
👉 Read about the Navigation
2shine will add a the "to-shine-header-pane-empty" class to the Headerpane if it is empty. It is used to style the Headerpane on some layouts if there aren't any modules populating it.