< Bilingual Bloggen: Ein vorbereitender Testeintrag | s9y - der nächste Meilenstein >

28 Dez 2006 s9y: Einbinden einer Grafik in den Kopfbereich

Blogs haben üblicherweise mehr oder weniger dasselbe Layout: Kopfbereich, Inhaltsbereich, Fußbereich; der Inhaltsbereich unterteilt sich in Eintragsspalt sowie ein oder zwei Seitenleisten. Als »neues« Feature haben viele s9y-Templates heutzutage im Kopfbereich eine zusätzliche Navigationsleiste, in der zumeist auch ein Link zur Startseite des Blogs untergebracht ist oder eingebaut werden kann.

Damit sind nun die beiden Überschriften – Blogtitel und Blogbeschreibung – im Kopfbereich nahezu überflüssig als Navigationselemente, da ihre Funktion (ein Link zur Startseite des Blogs) über besagte Navigationsleiste erfüllt wird. Das wiederum eröffnet die Möglichkeit, den Kopfbereich komplett grafisch zu gestalten, z.B. mit einem Hintergrundbild, in welches der Titel (und eventuell die Beschreibung) des Blogs als Text integriert sind.

Um allerdings dennoch freundlich zu Suchmaschinen und Benutzern eines Browsers (oder Screenreaders), der kein CSS unterstützt, zu sein, bedarf es einer speziellen Technik namens »Fahrner Image Replacement (FIR)«, welche ich im Folgenden speziell für mit Serendipity betriebene Blogs beschreibe.

Der »Trick« hinter FIR ist folgender: Man ersetzt quasi eine Überschrift (im Falle von Serendipity handelt es sich üblicherweise um eine h1) durch das Hintergrundbild, welches den gesamten Kopfbereich ausfüllt, und blendet gleichzeitig den Text der Überschrift aus. Besucher mit einem CSS-fähigen Browser sehen nur das Hintergrundbild, Benutzer eines nicht CSS-fähigen Browsers oder Screenreaders und Bots der Suchmaschinen jedoch bekommen an Stelle dieser Grafik den Text der Überschrift vorgesetzt.

Ich gehe im Folgenden jeweils vom Code des Standardtemplates von Serendipity (welches bis einschließlich Version 1.0.4, welche zum Zeitpunkt, da ich diesen Eintrag schreibe, aktuell ist, »carl_contest« ist) aus. Bei Verwendung eines anderen Templates muss der Code ggf. an das betreffende Template angepasst werden.

Zunächst muss die Datei index.tpl im Verzeichnis des Templates vorbereitet werden. Der folgende Abschnitt der Datei erzeugt den Kopfbereich:

<div id="serendipity_banner"><a id="topofpage"></a>
<h1><a class="homelink1" href="{$serendipityBaseURL}"> … </a></h1>
<h2><a class="homelink2" href="{$serendipityBaseURL}"> … </a></h2>
</div>

Wir verpacken nun den Inhalt beider Überschriften in ein span der Klasse »invisible«:


<h1><span class="invisible"><a …</a></span></h1>
<h2><span class="invisible"><a …</a></span></h2>

Der restliche Code bleibt wie im ersten Codeblock. Nun modifizieren wir die Datei style.css. Relevant dafür sind (in carl_contest) folgende Abschnitte:

#serendipity_banner {
margin: auto;
width: 100%;
height: 72px;
background-image: url({TEMPLATE_PATH}img/background.png); }

a.homelink1, a.homelink1:hover, a.homelink1:link, a.homelink1:visited, #serendipity_banner h1 {
color: #fff;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 20px;
padding-left:15px;
padding-top: 20px;
margin: 0px;
text-decoration: none; }

Wir entfernen zunächst Höhenangabe und Hintergrundbild von #serendipity_banner, um der Überschrift h1 innerhalb dieses Containers dann das neue Hintergrundbild, welches ich mal banner.jpg nenne, zuzuweisen. Der modifizierte Code sieht so aus:

#serendipity_banner {
margin: auto;
width: 100%; }

a.homelink1, a.homelink1:hover, a.homelink1:link, a.homelink1:visited, #serendipity_banner h1 {
color: #fff;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 20px;
padding-left:15px;
padding-top: 20px;
margin: 0px;
text-decoration: none;
background-image: url({TEMPLATE_PATH}img/banner.jpg) top left no-repeat; }

Nun müssen wir noch die zusätzliche Klasse einfügen, welche in CSS-fähigen Browsern die Überschriften »versteckt«:

.invisible { margin-left: -3000px; }

Alles, was nun noch zu tun bleibt, wären eventuelle Anpassungen des Hintegrundbildes an den Kopfbereich, die vom exakten Format des Hintergrundbildes abhängen. Dazu kann ich an dieser Stelle jedoch nichts beitragen, ohne ein konkretes Beispiel vor Augen zu haben.

0 Trackbacks

Trackback-URL

  1. Keine Trackbacks

3 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. * macdet (02.01.07, 00:48):

    klasse.. während ich noch css google. :)

    Alle Achtung!

  2. * serels (10.01.09, 12:05):

    Hi

    Tolle Sache

    Nur geht aus dem ersten Teil der Erklärung nicht hervor, ob

  3. * YellowLed (10.01.09, 18:25):

    Ob was ..? :-)

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.