Typographie

Im Template sind bereits einige vorgegebene CSS Klassen die zur Inhaltsgestaltung verwendet werden können. Nachfolgend können HTML-Code mit passenden Beispielen betrachtet werden.

<p class="note">...</p> oder <div class="note">...</div>

Note: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="info">...</p> oder <div class="info">...</div>

Info: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="alert">...</p> oder <div class="alert">...</div>

Alert: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<p class="tip">...</p> oder <div class="tip">...</div>

Tip: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<p class="download">...<a href="#" class="disc">...</a></p> oder <div class="download">...<a href="#" class="disc">...</a></div>

Download: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Download Button

<blockqoute>...</blockqoute> oder <cite>...</cite>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<blockqoute><p>...</p></blockqoute> oder <blockqoute><div>...</div></blockqoute>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<code>...</code> oder <samp>...</samp> oder <pre>...</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<code class="xhtml">...</code>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<code class="css">...</code>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<dl><dt>...</dt><dd>...</dd></dl>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="floatbox"><img class="float_right" src="picture.gif" alt="" />....</div>
<div class="floatbox"><img class="float_left" src="picture.gif" alt="" />....</div>
<span class="directory">...</span> 

Directory: /this/is/my/directory

<span class="filename">...</span>

File: filename.txt

<span class="mono">...</span> 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<acronym title="Acronym" lang="de">Accronym</acronym>

Accronym

<abbr title="Abbr" lang="de">Abbr</abbr>

Abbr

<ul><li>...</li><li>...</li></ul>

• List Item1
• List Item2
• List Item3

<ol><li>...</li><li>...</li></ol>

1. List Item1
2. List Item2
3. List Item3

<ul class="bullet"><li>...</li><li>...</li></ul>

• List Item1
• List Item2
• List Item3

<h1> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h2> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h3> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h4> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h5> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h6> Heading 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Open-Item Support 

Diese Feature ermöglicht die aktuelle Itemid oder den Menünamen zu ermitteln.

Wofür benötigt man das?

Viele Seiten benutzten zum Beispiel für jeden Seitenbereich eine andere Farbe. Und genau hierfür ist dieses Feature ursprünglich vorgesehen.

Natürlich kann die Funktion, je nach Bedarf, auch für andere Zwecke verwendet werden.

Wie wird es benutzt?

Um den Open-Item Support anzuwenden sind ein wenig PHP Kenntnisse erforderlich.

Zuerst müssen mittels eines PHP-Funktionsauf die Werte des aktuellen Menüpunktes abgefragt und in eine Variable geschrieben werden.

<?php $openItem = getOpenMenu('mainmenu', 0); ?>

Im oben stehenden Code wird das Mainmenu ab der Ebene 0 abgefragt.

Nun stehen in der Variable $openItem zwei Werte als Array zu Verfügung.

Beispiel 

Im YAML Joomla! Template ist dieses Beispiel bereits integriert mit Abfrage der ID für den Body-Tag.

<body class="body<?php echo $openItem['id']; ?>">


<body class="body<?php echo $openItem['name']; ?>">Ich sage jetzt einfach das der Menüpunkt mit der ID=5 und dem Menünamen Prüfeintrag geöffnet. Dann würde das im Quelltext so aussehen.

 <body class="body5"><body class="bodypruefeintrag">

Um die Anwendung für CSS zu verdeutlichen gibt es hier noch einen Auszug, wie man zum Beispiel die Hintergrundfarbe der Seite und der  Vlist-Navigation ändert.

body.body5 { background:#f90; } /* orange */
body.body5 .submenu { background:#f90; } /* orange */


Internet Explorer [5.5-6] PNG Transparenz Fix

PNG Grafiken bieten durch ihren Alpha-Channel eine stufenlose Transparenz was mit GIF-Bildern nicht möglich ist. Diese Eigenschaft bietet unendlich viele Gestaltungsmöglichkeiten.

Nun gibt es zwei Möglichkeiten wie Bilder eingebunden werden. Einmal als reines Bild über den IMG-Tag und einmal als CSS-Hintergrundgrafik mit background oder background-image. Ich habe hierfür einen "IE PNG Fix" entwickelt der für beides geeignet ist und nur ein Script geladen werden muss. Der Vorteil meines Skripts ist, dass es kein blank.gif benötigt.

Dieser "IE PNG FIX" ist nicht vom Template oder YAML abhängig sondern kann überall eingesetzt. 

Download IE PNG Transparenz Fix 

Vorraussetzungen 

• Javascript muss aktiviert sein.
• Ab Internet Explorer 5.5+ 

Funktionsweise

PNG-Fix aktivieren/einbinden

<head>
<!--[if lte IE 6]>
  <style type="text/css">
    img, .pngtrans { behavior:url(YOUR_PATH/hm_iepngfix.htc) }
  </style>
<![endif]-->
</head>


YOUR_PATH muss durch den Pfad ersetzt werden wo sich die Datei hm_iepngfix.htc befindet.

Mit dem oben stehenden CSS-Code wird der PNG-Fix auf alle Bilder (img) und auf jedes Element mit der CSS-Klasse .pngtrans angewandt. Die CSS Eigenschaften können beliebig geändert werden. Die Eigenschaft img ist aber immer erforderlich. Ich empfehle nicht den Selector * zu benutzten. Das kostet einiges an Ladezeit und die Seite flackert kurz.

Konfiguration

In der Datei hm_iepngfix.htc kann man den Datei/CSS-Klassen Suffix einstellen. Dieser ist Standard auf _trans eingestellt.

• var imgSuffix = "_trans";

Mit dieser Einstellung werden bei reinen Bildern nur folgende berücksichtigt. CSS Hintergrundbilder sind nicht von dieser Einstellung abhängig, sondern nur von den zugewiesenen CSS-Eigenschaften des oberen Codes.

• <img src="myPicture_trans.png" />
• <img src="myPicutre.png class="_trans" /> 

Beispiele

Der Accessibility Patch verbessert die HTML Ausgabe von Joomla. Mit diesem Patch hat man eine Ideale Grundlage um Tabellenfreie bzw. Barrierearme Webseiten und Portale zu erzeugen.

Der Accessibility Patch ist ab sofort nicht mehr Verfügbar, da Joomla!1.0.x nicht mehr weiterentwickelt wird.
Falls Sie den Patch dennoch benötigen senden Sie mir bitte kurz eine Email.

Grundlegende Stichpunkte des Accessibility Patches:

• Joomla Standard Extensions Tabellenfrei
• Verbessert Barrierefreihet
• Erweiterte Template Funktionalität durch den Einsatz des YAML to Joomla Templates
• Valider Quellcode nach W3C, 508 und WAI Priority Standards.

Der Patch ist nur noch in Verbindung mit einer YAML für Joomla Template (Generelle Lizenz) als Paket erhältlich. Sonst bitte auf Anfrage.

Aktuelle Version: V1.5 für Joomla! 1.0.15

Tabellenfrei

Von Komponenten, Modulen und Mambots wurden die Tabellen entfernt. Es wird nur noch tabellarisch erforderlicher Inhalt als Tabelle dargestellt. Mit dem YAML für Joomla Template ist der Patch zu 100% kompatibel und damit wird der Kreis komplett geschlossen. Spaltenanordnung ohne Tabellen sowie hohe Browserkompatibilität sind somit gewährleistet.

Subtemplate Technik

Inhalte müssen auch Formatiert werden. Subtemplates ermöglichen Abschnitte von Inhalten nebeneinander anzuordnen, die keine Tabellendaten enthalten. Tabellendaten sind zum Beispiel Ergebnisstabellen. Hier wird aber einfach nur davon gesprochen Inhalte nebeneinander anzuordnen. Dies wird sehr oft verwechselt. Es gibt 3 Arten von Subtemplates die Sie beim Content Blog verwenden können:

• 50 / 50 Teilung
• 33 / 33 / 33 Teilung
• Goldener Schnitt

Diese drei Varianten kann man dann statt der Spaltenanzahl im Backend auswählen. Zum Beispiel, wenn man einen Content Category Blog erstellt. 

Hohe Browserkompatibilität

Um möglichst allen Browsern gerecht zu werden, vor allem dem Internet Explorer, der noch so seine Probleme mit der Tabellenfreien Gestaltung von Webseiten hat wurden Hacks eingefügt.

• IE 5.01/Win
• IE 5.5/Win
• IE 6.0/Win
• IE 7.0 Beta/Win
• Opera 6+/Win
• Mozilla 1.7.1+/Win
• Firefox 1.0+/Win
• Netscape 8+/Win
• Firefox 1.0+/Mac
• Safari 1.0.3+/Mac
• Camino 0.6/Mac
• Firefox 1.0+/Linux
• Konqueror 3.3.2/Linux
• Lynx/Linux

Eingeschränkte Unterstützung:
Diese Browser werden nur Eingeschränkt unterstützt, da Sie bestimmte CSS Methoden/Techniken nicht unterstützen und noch zusätzlich veraltet sind.

• IE 5.x/Mac
• Netscape 4

Lizenzbedingungen 

Die Lizenz des Joomla! Accessibility Patches ist nicht Domaingebunden und es muss keine Rückverlinkung vorgenommen werden. Eine Lizenz darf für bis zu 3 eigenen Projekte verwendet werden.

Eine Lizenz beinhaltet

• Joomla! Accessibility Patch (modifizierte Joomla Dateien)
• Begrenzt auf bis zu 3 eigene Projekte. Weitere erfordern eine weitere Lizenz des Patches
• 1 Jahr kostenlos Updates + Support

Lizenzerweiterungen und individuelle Wünsche (auch für Agenturen) bitte auf Anfrage.

Preisgestaltung

Ich möchte darauf Hinweisen, dass hier nicht für das CMS Joomla, sondern nur für den Aufwand der Modifikationen bzw. die Arbeitszeit des Patches bezahlt wird. Alle Bedingungen der Urheber bleiben unangetastet.

Sonstige Informationen

Rückerstattung:
Ist grundsätzlich nicht möglich. Um eine Vorschau des Quelltextes zu bekommen sollten Sie sich diese Seiten ansehen. Dort wird der Patch ständig eingesetzt.

• http://www.to-joomla.de
• http://www.hieblmedia.de
• und natürlich hier.

Bestellabwicklung:
Um das Produkt zu bestellen ist eine Registrierung notwendig um den Download freizuschalten. Sie bekommen nach erfolgreicher Bestellung eine Email-Bestätigung. Danach wird Ihnen eine Rechnung mit allen wichtigen Informationen per Email zugeschickt.

Wie erhalte ich mein Produkt?
Nach Geldeingang wird der Download freigegeben. Sie müssen sich dann mit Ihren Benutzerdaten einloggen und können dann im Download bereich den Patch herunterladen. Sie erhalten eine Nachricht, wenn Sie freigeschaltet wurden.

Weitere Fragen? Dann setzten Sie sich mit uns in Verbindung.

Hier ein paar Gründe warum Sie nach der Installation des Patches immer noch einige Tabellen im Quellcode haben könnten.

1. Die Installation ist Fehlgeschlagen. Prüfen Sie ob im Footer des Backends dieser Zusatz enthalten ist: 'Modified with to-Joomla Accessibility Patch from Reinhard Hiebl'
2. Sie verwenden das mod_mainmenu und haben die Einstellung 'Menu Style' auf Vertikal oder Horinzontal. Dies bewirkt eine Tabellarische Ausgabe. Verwenden Sie bitte 'Flat List'. Ich empfehle aber das Extended Menu zu verwenden. Hier ein Tutorial dazu.
3. Es werden 3rd Party Extensions verwendet die Tabellen ausgeben. Diese können mit dem Patch nicht berücksichtigt werden da es tausender solche gibt. Sie müssten die Templates der Extensions dazu anpassen oder fordern Sie ein Angebot von mir an um die Tabellen zu bereinigen.