Sie sind hier: Startseite » Web To Date » Tipps Alpha

Grafiküberschriften in Textüberschriften umwandeln


Unter Alpha werden die Überschriften h1 als Grafik ausgegeben.

Sieht zwar schick aus, ist aber nicht unbedingt Suchmaschinen freundlich.

Es sind Änderungen in der page.ccml und style.css notwendig.

In der page.ccml folgenden Abschnitt suchen:

Code

<cc:picture obj="pic.h1"
src="pic_h1.gif"
dst="'ph'+&page.content.uid+'.gif'"
text="&page.content.caption"
textcolor="&usercolor.alt.dark"
fontname="MarioBecker"
textleft="0"
fontbold="0"
textalign="left"
textvalign="bottom"
textheight="36"
fontsize="16"
smooth="4">

<h1 style="background-image:url(<cc:printpictureurl obj="pic.h1">);"></h1>

und durch diesen Code ersetzen:

Code

<cc:if cond="&page.content.caption">
<h1><cc:print value="&page.content.caption"></h1>
</cc:if>


Um das Aussehen der Überschrift zu definieren, habe ich in der style.css die h1 Anweisung wie folgt definiert:

Code

{
margin: 0px;
padding: 4px 0px 3px 0px;
font-size: 200%;
color: #748891;
}


Änderungen der Größe, Farbe und Zuweisung des Platzes (padding) sind natürlich frei wählbar.

Beispiel: Siehe die Überschrift des hiesigen Tutorials!


Die Anleitung zu diesem Tipp erhielt ich freundlicher Weise von Siegmann Webdesign.

Zugriffe heute: 3 - gesamt: 2765.