Serenity: Header mit Abstand und runden Ecken

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Serenity: Header mit Abstand und runden Ecken

Beitrag 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.
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Re: Serenity: Header mit Abstand und runden Ecken

Beitrag 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.
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Re: Serenity: Header mit Abstand und runden Ecken

Beitrag 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.
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Re: Serenity: Header mit Abstand und runden Ecken

Beitrag 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
chrissla
Mitglied
Beiträge: 13
Registriert: 27.05.2009 09:35

Re: Serenity: Header mit Abstand und runden Ecken

Beitrag 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)...
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“