Seite 1 von 1
Serenity: Header mit Abstand und runden Ecken
Verfasst: 27.05.2009 09:45
von chrissla
Hi zusammen.
Ich bin gerade dabei das Forum (3.0.2) unserer Homepage anzupassen. Damit das Forum der neuen (erst geplanten) Webseite entpricht, möchte ich das Theme "Serenity" anpassen. Die meisten Änderungen habe ich bereits vorgenommen. Ich würde jetzt gerne noch den Header wie bei "Prosilver" vom Rest des Forums "abtrennen" und die Ecken jeweils abrunden. Zu den runden Ecken habe ich bisher nur Tipps mit transparenten Grafiken über die Ecken legen gefunden, allerdings nicht wirklich verstanden wie das funktioniert. Ich bin was css angeht noch ein ziemlicher DAU.
Weiss jemand, welche Dateien dazu geändert werden müssen? Ich wäre über jede Hilfe dankbar.
Gruss Chris.
Re: Serenity: Header mit Abstand und runden Ecken
Verfasst: 28.05.2009 16:46
von chrissla
ich verstehe es immer noch nicht. Seit ein paar Stunden versuche ich jetzt einfach nur den Header anzupassen. Ich habe 2 gifs, die die Ecken abrunden sollen. Allerdings finde ich einfach nicht die richtige stelle um die bilder einzubauen.
Ich habe versucht in der Datei overall_header.html die beiden bilder am rand einzufügen, was einen komplett verzerrten Header nach sich zog.
Orginal sieht so aus.
<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
<td id="logorow" align="center">
<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
</td>
</tr>
Ich verstehe einfach nicht, welche Dateien angepasst werden müssen, damit am Ende ein alleinstehender Header mit runden Ecken rauskommt.
Re: Serenity: Header mit Abstand und runden Ecken
Verfasst: 02.06.2009 10:48
von chrissla
Nach langem probieren habe ich es hinbekommen. So sieht das jetzt aus:
Abgerundete Ecken:
Code: Alles auswählen
<body class="{S_CONTENT_DIRECTION}">
<div id="wrapper">
<a name="top"></a>
<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
<td id="logorow" align="center">
<div style="height: 94px; position: relative;">
<img src="./styles/serenity/theme/images/header-left.gif" style="position: absolute; left: 0px; top: 0px;"/>
<img src="./styles/serenity/theme/images/header-right.gif" style="position: absolute; right: 0px; top: 0px;"/>
<a href="{U_INDEX}" style="position: absolute; top: 0px; left: 12px;"><img src="./styles/serenity/imageset/site_logo.gif" /></a>
</div>
eine Kleinigkeit fehlt mir jetzt allerdins noch. ich würde den Header gerne wie hier im Forum separat stellen, sodass zwischen Header und dem Rest ein kleiner Abstand ist. Hat mir dafür vielleicht jemand einen Tipp?
Gruss Chrissla.
Re: Serenity: Header mit Abstand und runden Ecken
Verfasst: 02.06.2009 14:51
von chrissla
wenn man in der css-datei ein "padding-bottom" einfügt, dann wird der abstand zwischen header und dem nächsten teilbereich grösser, aber der hintergrund des body wird angezeigt, anstelle der untersten ebene des hintergrunds.
mein ziel ist es so wie hier zwischen header und "persönlicher Bereich" eine Splate zu haben
Re: Serenity: Header mit Abstand und runden Ecken
Verfasst: 03.06.2009 10:54
von chrissla
auch das habe ich jetzt noch hinbekommen. das firefox addon "web-developper" hat mir ziemlich gut helfen können. da sieht man dann auf einen blick, welche classes bearbeitet werden müssen.
jetzt gibt es noch ein paar kleinere anpassungen zu machen (buttons tauschen, suche in den header einbauen)...