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.
2sicgeeks 