''>ZITAT(Germanboy4u @ May 17 2009, 9:07) 172124
Hallo liebe Leser und Foren Nutzer,
ich würde gerne ein Bild als Hintergrund im Kopf von den Boxen nutzen.
Also da wo Kategorien, Warenkorb etc steht.
Wo genau muss ich da den Hintergrund einbinden? Und wie genau.
Leider bin ich kein css experte :) Daher brauche ich eure Hilfe.
Danke
Germanboy4u
[/b]
Ich versuche Dir das mal anhand der Adminbox zu erklären:
1. Dein-template/boxes/box_admin.html geht ja mit folgendem Code los:{snippet file=BoxStart.html heading=#heading_admin# id=BoxAdmin}
Dazu sollte man wissen was in der BoxStart.html steht, da ist nun folgendes definiert:"Box{if $class} $class{/if}"{if $id} id="{$id}"{/if}>
{if $heading}
<h3>{$heading}</h3>
{/if}
"Inner">
aus diesen Angaben sehen wir folgendes heraus:
1. die ID (wichtig für die CSS-Deklaration) verweist auf "BoxAdmin"
2. für den Header der AdminBox benötigt man die Angabe h3
Jetzt also die Datei boxes.css geöffnet und geschaut ob diese Angaben da irgendwie drin stehen!
Nett wie das Template [CSS Shop/Onlineshop Template s oder Tabellen Shop/Onlineshop Template s ] aufgebaut ist, ist da bereits alles vorgegeben.
Mit dem Code am Anfang der boxes.css:/ <agl.folder "Boxen Allgemein"> /
.Box { background: url("img/boxBg.png") repeat-y top left; width: 198px }
.Box h3 { background: url("img/boxHeader.png") no-repeat top left; height:27px; padding:0 }
.Box h3 span { line-height: 27px; display: block; padding-top:3px; height:27px; font-size: 14px; Text-align:center }
.Box h3 span a { font-size: 14px }
.Box .Inner { background: url("img/boxInner.png") no-repeat top left; width:190px; padding:0 }
.BoxBottom { background: url("img/boxBottom.png") no-repeat top left; height:10px; margin-bottom: 6px }
/ </agl.folder> /definierst Du die Einstellungen für alle Boxen.
Sollten Deine Boxen also alle gleich aussehen brauchst Du hier nur die Angabe für "h3" zu machen und kannst den Wert "ID=BoxAdmin" getrost vergessen. Wie gesagt das gilt für alle Boxen. In dem Beispiel habe ich für den Boxenhintergrund und für den Boxeninhalt auch gleich noch nen Bild drin, das brauchst Du ja vielleicht nicht, ist aber gut man weiß wie es geht.
Wenn Du nun wie in unserem Beispiel die Adminbox anders gestalten willst dann fügst Du einfach zusätzlich zu dem oben genannten folgende Einträge in der boxes.css hinzu:/ <agl.folder "BoxAdmin"> /
#BoxAdmin { background: url("img/boxBg_2.png") repeat-y top left; width: 198px; Text-align: center }
#BoxAdmin h3 { background: url("img/boxHeader_2.png") no-repeat top left; height:10px; padding:0 }
#BoxAdmin h3 span { display: block; padding-top:3px; height:10px; Text-align:center }
#BoxAdmin .Inner { background: url("img/boxInner_2.png") no-repeat top left; width:190px; padding:0 }
/ </agl.folder> /
Die genauen Angaben zu Höhen, Breiten, Schriftgrad und Bilder (png ist kein Muss) sind natürlich Werte aus meinem Shop/Onlineshop und müssen daher angepasst werden.
Ich hoffe es hilft Dir.
Gruß Uwe