Joomla-Templates tabellenlos machen

Für Joomla gibt es sehr viele frei verfügbare Templates (Themes). Wirft man jedoch mal einen Blick in den Quellcode der Seiten, überkommt einem das nackte Grausen. Hier wimmelt es nur so von Tabellen die das Layout von Content und Modulen steuern. Dies kann man allerdings nicht den Entwicklern von Templates anlasten, deren Template-Dateien meist Webstandards entsprechen. Nein, dieser Code wird direkt vom Joomla-Core ausgegeben, nämlich den components. Dieser Tatbestand hat dem sonst guten Ruf von Joomla sehr geschadet und wurde zu Recht von der Community kritisiert.

Seit der Veröffentlichung von Joomla 1.5 muss dies nicht mehr so sein. Hier wurde erstmals ein Template Override-System eingeführt, mit dem sich die Ausgabe des Html-Codes aller Module und Komponenten direkt ins Template verlagern lässt. Im jeweiligen benutzten Template-Verzeichnis wird im Verzeichnis html die gleiche Struktur abgebildet wie im Verzeichnis components. Der Template Ordner wird somit zur letzten Instanz, welches vom System ausgeführt wird. Aber nun zur Praxis.

Joomla-Templates auf der Basis von Beez tabellenlos machen

Mit dem bereits vorinstallierten Beez-Template von Angie Radtke liegt ein barrierefreies, tabellenloses Template vor. Mit Hilfe dieses Templates werde ich das freie und wie ich finde, schöne Template rt-novus von RocketTheme tabellenlos machen.

Dazu kopiere ich den html-Ordner des Beez-Templates in den Template-Ordner von rt-novus (das Verzeichnis com_search und mod_search habe ich nicht kopiert, da im Suchformular keine Tabellen vorkommen). Jetzt das rt-novus-Template ins Verzeichnis templates von Joomla kopieren, in der Admin auswählen – et voila! – die Tabellen sind weg und mit Divs, uls, lis etc. ersetzt. So einfach wie genial.

Mehrspaltigkeit

Jetzt funktioniert allerdings die Darstellung der Inhalte als mehrspaltiges Layout noch nicht, da dies nicht mehr über Tabellen geregelt wird sondern über CSS. Die entsprechenden Styles fehlen also noch im rt-novus. Im CSS-Verzeichnis von Beez befinden sich diese Styles in der Datei position.css (ab Zeile 150 – beginnt mit .leading). Diese Styles kopieren und in die Datei template_css.css des rt-novus-Templates einfügen. Das CSS-File hochladen. Die Styles müssen jetzt noch etwas angepasst werden aber das war es dann auch schon.

Barrierefreiheit

Damit ist dieses Template aus meiner Sicht weitestgehend barrierefrei. Tabellenlosigkeit  ist nicht das einzige Kriterium der Barrierefreiheit. Hierzu gehören auch Skalierbarkeit, Kontrastreichtum, ein sauberer und logischer Html-Code, alternative Beschriftung von Seitenelementen u.a. Ein Hauptgrund warum Tabellen nicht für den Aufbau der Struktur einer Seite benutzt werden sollten ist, dass Behinderte (Blinde, Sehbehinderte) die Texte von einem Lesegerät vorgelesen bekommen und verschachtelte Tabellen Reihenfolge und Logik zerstören. Das gleiche gilt für Suchmaschinen, die den Code der Seite falsch interpretieren könnten. Außerdem machen Tabellen den Code unübersichtlich und blähen ihn unnötig auf.

Das bedeutet allerdings nicht, dass man überhaupt keine Tabellen verwenden darf. Tabellen sind für die Präsentation von z.B. technischen Daten, die anschaulich und übersichtlich dargestellt werden sollen durchaus sinnvoll und zu diesem Zwecke bestimmt, aber nicht zum layouten von Seiten.

Download

rt-novus – tabellenfrei mit angepassten CSS