class renaming

controls/body-css-classes.ascx

@@ -74,9 +74,10 @@
 	/// </summary>
 	private string CurrentPageClasses(PortalSettings portal, DotNetNuke.Entities.Tabs.TabInfo tab)
 	{
-		return "tab-" + tab.TabID + " " 
-			+ (portal.HomeTabId == portal.ActiveTab.TabID ? "tab-is-home " : "")
-			+ "tab-level-" + tab.Level + " ";
+		return "page-" + tab.TabID + " " 
+			+ (portal.ActiveTab.ParentId > -1 ? "page-parent-" + portal.ActiveTab.ParentId + " " : "")
+			+ (portal.HomeTabId == portal.ActiveTab.TabID ? "page-is-home " : "")
+			+ "nav-level-" + (tab.Level+1) + " ";
 	}
 
 
@@ -85,9 +86,9 @@
 	/// </summary>
 	private string PageAndPortalClasses(PortalSettings portal, DotNetNuke.Entities.Tabs.TabInfo rootTab, DotNetNuke.Entities.Tabs.TabInfo neutralRoot)
 	{
-		return " portal-" + portal.PortalId
-			+ " root-tab-" + rootTab.TabID
-			+ " root-neutral-tab-" + neutralRoot.TabID;
+		return " site-" + portal.PortalId
+			+ " page-root-" + rootTab.TabID
+			+ " page-root-neutral-" + neutralRoot.TabID;
 	}
 
 	/// <summary>

readme.md

@@ -63,10 +63,14 @@ To get the awesome designed content, install [2sxc](https://github.com/2sic/2sxc
 
 ## History
 
-v5.0.0
+v5.0.1
 1. removed node-sass, added sass
 2. removed unnecessary packages
 3. fixed :visited link style in navigation
+4. Renamed body classes 
+   1. tab -> page
+   2. portal -> site
+   3. tab-level -> nav-level
 
 ## Love from Switzerland
 

src/scss/_variables.scss

@@ -81,15 +81,16 @@ $tosic-footer-color:      #fff;
 
 // ----------------------------------------------------------------------------------------------------
 // 3. Special CSS for specific pages
-// The body tag always has things like tab-xx to say what page it's on. Use these to target special CSS.
+// The body tag always has things like page-xx to say what page it's on. Use these to target special CSS.
 // Classes you can use are:
-// - tab-##
-// - tab-is-home (this class is only added on home)
-// - root-tab-## the top level tab which is activated, to allow different colors across an entire section
+// - page-##
+// - page-is-home (this class is only added on home)
+// - root-page-## the top level page which is activated, to allow different colors across an entire section
+// - page-parent-## the parent page of the current page - If available
 // - lang-en / lang-de etc. 
 
 // Set the width of the logo specifically for the home page only
-// .tab-is-home {
+// .page-is-home {
 //   header {
 //     .logo {
 //       width: 250px;

src/scss/components/_nav-breadcrumb.scss

@@ -1,5 +1,5 @@
 /* ---------- Breadcrumbs ---------- */
-.tab-is-home .to-shine-page-breadcrumb {
+.page-is-home .to-shine-page-breadcrumb {
 display: none;
 }
 .to-shine-page-breadcrumb {

src/scss/layout-variations/_variation-floatwideheader.scss

@@ -1,7 +1,7 @@
 @media all {
   /*layout floatwideheader*/
   body.to-shine-variation-floatwideheader {
-    &.tab-2650 {
+    &.page-2650 {
       main#to-shine-page-main {
         @include media-breakpoint-up(xl) {
           margin-top: -10vh!important;