Hinterlasse einen Kommentar

DotNetNuke: Raus aus dem Skin Wirrwarr…

In meinem letzten Beitrag habe ich beschrieben, wie man alle Container auf nur EINEN reduzieren kann und trotzdem flexibel bleibt. Warum sich eine solche Reduktion auch bei Skins lohnt und wie das geht, beschreibe ich in diesem Artikel.

Ein Skin steuert den Aufbau und das Erscheinungsbild einer DotNetNuke Website. Er beinhaltet alle Informationen, welche auf jeder Seite gleich sind (z.B. das Logo, das Hintergrundbild , die Position der Navigation, etc.)
Oft soll aber der Aufbau der Startseite von den restlichen Inhaltsseiten etwas abweichen,  da man beispielsweise die linke Spalte auf der Startseite für die Unternavigation nicht benötigt, oder einfach nur den ContentPane etwas anders platzieren möchte.
Da man einer einzelnen Seite in DotNetNuke einen separaten Skin zuweisen kann, ist das kein Problem: Man kopiert den Skin, benennt ihn um, passt die Kleinigkeit an und weist den neuen Skin in den Seiteneinstellungen der Startseite zu. Auf den ersten Blick eine schnelle und praktische Lösung. Doch der Schein kann trügen: Viele Informationen sind redundant, jede Anpassung am Grundlayout muss man doppelt durchführen. So können kleinere Änderungen bei grösseren Projekten sehr zeitintensiv und unnötig kompliziert werden. Manchmal sollen noch weitere Seiten vom normalen Grundlayout abweichen, dann muss man schon 3 oder mehr Skins parallel pflegen. Einen Aufwand, den man sich getrost sparen kann.

Die bessere Lösung: alles auf 1 Skin reduzieren und dynamische CSS-Klassen verwenden

Schon seit längerem möchten wir ein kleines script nicht mehr missen. Ein script welches dem <body>-Element dynamische CSS-Klassen hinzufügt, und zwar serverseitig mit C#. Das genertierte HTML auf unserer DotNetNuke Website sieht dann z.B. so aus:

...
</head>
<body class="tab-85 root-85 lang-de portal-0 ie-9 edit-mode">
...

Folgende CSS-Klassen fügen wir dem <body>-Element hinzu:

  • tab-85: für Anpassungen auf Seite X (in diesem Beispiel ist 85 die TabId der aktuellen Seite)
  • root-85: für Anpassungen auf Seite X und auf allen Unterseiten (in diesem Beispiel ist 85 die TabId der Seite auf der ersten Hierarchiestufe)
  • lang-de: für sprachspezfische Anpassungen (in diesem Beispiel ist Deutsch die Sprache der aktuellen Seite)
  • portal-0: für portalspezifische Anpassungen (nützlich wenn mehrere Portal denselben Skin verwenden)
  • ie-9: für browserspezifische Anpassungen (in diesem Beispiel ist Internet Explorer 9 der Browser, mit dem diese Seite aufgerufen wurde)
  • edit-mode: für Anpassungen in der Admin Ansicht

Im Stylesheet kann man dann sehr einfach die Abweichungen für einzelne Seiten definieren, um z.B. auf der Startseite die linke Spalte auszublenden und die rechte Spalte dementsprechend vergrössern:

/* modifications on home page */
.tab-85 #col-left { display: none; } 
.tab-85 #col-right { width: 100%; }

Wie das geht? Nur sicherstellen, dass dein Skin in C# ist (erste Zeile: <%@ Control language=“C#“ … ) und dann einfach folgendes Script integrieren:

<script runat="server">  
  protected override void OnPreRender(EventArgs e)  
  {   
    base.OnPreRender(e);   
    //add browser & version to form css class    
    System.Web.HttpBrowserCapabilities browser = Request.Browser;   
    string BrowserClass = browser.Browser + browser.Version.Substring(0, 1) + " ";   
    this.Page.Form.Attributes["class"] = BrowserClass.ToUpper();
    //add language, edit mode, tab-id and root-tab-id to body css class   
    string CssClass = "tab-" + PortalSettings.ActiveTab.TabID.ToString() + " ";   
    if(DotNetNuke.Security.PortalSecurity.IsInRoles(PortalSettings.AdministratorRoleName))    
      CssClass += "edit-mode ";   
      CssClass += "root-" + ((DotNetNuke.Entities.Tabs.TabInfo)PortalSettings.ActiveTab.BreadCrumbs[0]).TabID.ToString() + " ";
      CssClass += "lang-" + System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName.ToLower() + " ";
      CssClass += "portal-" + PortalSettings.Current.PortalId;   
      HtmlGenericControl body = (HtmlGenericControl)this.Page.FindControl("ctl00$body");   
      body.Attributes["class"] = CssClass;
  }
</script>

…und schon hat man einen ultra flexiblen Skin, den man je nach Sprache, je nach Browser, je nach Portal oder eben einfach je nach Seite beliebig anpassen kann.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: