Border-Image machen

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.
Omniscient
Mitglied
Beiträge: 45
Registriert: 11.10.2012 10:20

Border-Image machen

Beitrag von Omniscient »

Hallo.
Ich habe eine Frage zum subsilver2-Theme :
Ich möchte gerne am "Rand" des Styles eine Grafik setzen, also praktisch eine Grafik als Border des Styles.
Hier habe ich nen Screenshot, wie es ungefähr aussehen soll :
http://imageshack.us/a/img826/113/mybbscreen.jpg

Auf dem Screen sieht man ja so eine gestreifte, blau-schwarze Grafik als Border des Forums.

Ich habe es bereits so versucht :
in der stylesheet.css von subsilver 2 im body folgendes hinzufügen :

Code: Alles auswählen

background-image: url(HIER DIE GRAFIK_URL');
	background-repeat: repeat-x;
Allerdings klappte das nicht :(
Weiß jemand, wie das geht? Vielen Dank schonmal im Vorraus. :)

LG,
Omniscient.
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12123
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Border-Image machen

Beitrag von Crizzo »

Leg eine Grafik an, die diese Streifen enthält (ca. 30x30px groß). Dann legst du ein <div> um das ganze Forum (zu ergänzen in overall_header.html und overall_footer.html). Gibst diesem z.B. padding: 10px;, eine bestimmte Breite, damit es nicht bildschirmfüllend ist, sowie diese Streifen als Hintergrundbild mit background-repeat: repeat. Damit hast du dann den gleichen Effekt erzielt.
Omniscient
Mitglied
Beiträge: 45
Registriert: 11.10.2012 10:20

Re: Border-Image machen

Beitrag von Omniscient »

BlackHawk87 hat geschrieben:Leg eine Grafik an, die diese Streifen enthält. Dann legst du ein <div> um das ganze Forum. Gibst diesem z.B. padding: 10px;, eine bestimmte Breite, damit es nicht bildschirmfüllend ist, sowie diese Streifen als Hintergrundbild mit background-repeat: repeat. Damit hast du dann den gleichen Effekt erzielt.
Und wo schreibe ich das alles hin? Tut mir leid, ich kenne mich nicht so gut mit CSS aus. :oops:
Eine Grafik habe ich schon erstellt.
Wo erstelle ich eine DIV ? Eine Schritt für Schritt Anleitung wäre toll :oops:
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12123
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Border-Image machen

Beitrag von Crizzo »

Das Div musst du in der overall_header.html öffnen also:

Code: Alles auswählen

<div id="borderwrap">
und in der overall_footer.html schließen </div>.

Jetzt schreibst du in styles/DEINSTYLENAME/theme/stylesheet.css die dazu passendne CSS-Regel:

Code: Alles auswählen

#borderwrap {
padding: 5px;
background-image: url(./images/borderstreifen.png) ;
background-repeat: repeat;
width: 950px; 
}
Musst du natürlich so anpassen, damit es zu deinen Angaben passt. Die Grafik solltest du da aber schon in den Ordner: \phpBB3\styles\DEINSTYLENAME\theme\images packen.
Omniscient
Mitglied
Beiträge: 45
Registriert: 11.10.2012 10:20

Re: Border-Image machen

Beitrag von Omniscient »

Öffne ich das Div in der ersten Zeile von overall_header, und schließe es in der letzten Zeile von overall_footer ?
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12123
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Border-Image machen

Beitrag von Crizzo »

Nein.

Sondern direkt vor und nach dem ersten Element für die Darstellung deines Forum. Genau kann ich dir das nicht sagen, ohne die Dateien zu sehen. Dazu musst du die Datei (getrennt) in die PasteBin hochladen und hier verlinken: https://www.phpbb.de/support/pastebin.php
Omniscient
Mitglied
Beiträge: 45
Registriert: 11.10.2012 10:20

Re: Border-Image machen

Beitrag von Omniscient »

Hier die Overall_Header :
https://www.phpbb.de/support/pastebin.p ... iew&s=1139

Die overall_footer habe ich nicht verändert, das heißt die overall_footer ist die Original-Templatedatei von phpbb 3.0.11 ^^
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12123
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Border-Image machen

Beitrag von Crizzo »

Versuchs mal hier mit:
Finde:

Code: Alles auswählen

<a name="top"></a> 
Füge davor ein:

Code: Alles auswählen

    <div id="borderwrap">
und für den Footer:
Finde:

Code: Alles auswählen

</body>
Füge davor ein:

Code: Alles auswählen

</div>
Grüße
Omniscient
Mitglied
Beiträge: 45
Registriert: 11.10.2012 10:20

Re: Border-Image machen

Beitrag von Omniscient »

Das ganze Forum hat nun irgendwie den Hintergrund. o.o
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 12123
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Border-Image machen

Beitrag von Crizzo »

Dann leg noch ein zweites Div rein, innerhalb von dem neuem und gib dem einen weißen Hintergrund.

Also

Code: Alles auswählen

</div></div>
in overall_footer.html statt nur </div> einfügen und oben:

Code: Alles auswählen

        <div id="borderwrap"><div style="background-color:#fff;">
Probiers dann nochmal.
Antworten

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