Hallo, ist es möglich, kleine Bildchen in der linken seite bei den Kategorien und den Informationen einzufügen? Zumindest bei den einzelnen Informationspunkten, Impressum usw. fände ich das interessant. Bin für jede Anregung dankbar. Schönen Abend Frank
Hey, hast du dir mal die Template-Erstellung angeschaut. Da ist schön beschrieben wie man Anpassungen macht. Das sollte über die CSS Datei gehen. CSS wäre dies ein Beispiel: ul { list-style-image:url(<pfad zum icon>);
}
In der style.css von meinem Template steht z.B.
#content #left ul li a {
display:block;
font-size:11px;
margin:0 0 0 0;
padding:8px 0 8px 15px;
}
Ich hoffe ich konnte dir weiterhelfen.
Gruß ottscho
Hallo, also die Formatierungen in der css sind mir bekannt, allerdings möchte ich den einzelnen Links ein Bild vorsetzen, sprich vor den AGB ein Bildchen, vorm Impressum usw. mfg Frank
[quote=“taaucher”]Hallo, also die Formatierungen in der css sind mir bekannt, allerdings möchte ich den einzelnen Links ein Bild vorsetzen, sprich vor den AGB ein Bildchen, vorm Impressum usw. mfg Frank[/quote] Hallo Frank, so würde ich es versuche. In der menu_left.tpl ist der Code, welcher die Shopseiten auflistet: [code] {foreach from=$sMenu.gLeft item=item}
- [{$item.description}]({if $item.link}{$item.link|rewrite:$item.description}{else}{url controller=‘custom’ sCustom=$item.id title=$item.description}{/if} “{$item.description}”)
{/foreach} [/code] Da du jetzt für jeden Menüpunkt ein eigenes Icon benötigst, musst du die - klassifizieren. Daher würde ich die Class mit einbauen. - Am einfachsten nimmst du hier den Names des Menüpunktes: [code] {foreach from=$sMenu.gLeft item=item}
- [{$item.description}]({if $item.link}{$item.link|rewrite:$item.description}{else}{url controller=‘custom’ sCustom=$item.id title=$item.description}{/if} “{$item.description}”)
{/foreach} [/code] Jetzt kannst du in der CSS jeden einzelnen Menüpunkt definieren:li.impressum{ display: block; color: #000000; background-color: transparent; background-image: url(../images/raute.jpg); background-repeat: no-repeat; background-position: 0 0.2em; text-decoration: none; margin-left: 5px; padding-left: 20px; list-style-type: none; } li.agb{ display: block; color: #000000; background-color: transparent; background-image: url(../images/anderes\_icon.jpg); background-repeat: no-repeat; background-position: 0 0.2em; text-decoration: none; margin-left: 5px; padding-left: 20px; list-style-type: none; }Code ungetestet! Gruß ottscho
Super, das funktioniert schon mal wenn ich das im default Ordner ändere. man muß hier aber darauf achten, in der css auch die genaue Bezeichnung mit groß/klein Schreibung anzugeben. Jetzt versuche ich allerdings vergeblich, die menu_left.tpl zu beerben, hier ist ja kein Block vorgesehen, geht das dennoch? Habe mir jetzt in meinem Template die menu_left.tpl abgelegt, dann mit {extends file="../\_default/frontend/index/menu\_left.tpl"} und der Änderung gefüllt, aber es tut sich nichts (fehlt ja auch eigentlich der prepend oder append Befehl, oder?) mfg Frank
Okay, ohne die erste Zeile extends… geht es, danke! Das Template wird dann also komplett ersetzt. Wieder etwas gelernt. Einziges Problem, Bilder, die ich per css einbinde, werden doch nicht angezeigt. Textpositionierung funktioniert.
Um ein Bildchen bzw Icon vor z.B. die AGB auf der linken Seite zu bekommen, benötigt man doch nur einen einfachen Befehl. li { list-style:url("dateiname.gif"); }
- [/code] wird alles in kleinbuchstaben umgewandelt…
[quote=„taaucher“]Einziges Problem, Bilder, die ich per css einbinde, werden doch nicht angezeigt. Textpositionierung funktioniert.[/quote] Da hast Du die Bilder vermutlich im falschen Verzeichnis liegen… Wo liegen die denn?
[quote=“x3llon”]Um ein Bildchen bzw Icon vor z.B. die AGB auf der linken Seite zu bekommen, benötigt man doch nur einen einfachen Befehl. li { list-style:url(“dateiname.gif”); }[/quote] Und das soll dann in die css?
[quote=“avenger”][quote=“taaucher”]Einziges Problem, Bilder, die ich per css einbinde, werden doch nicht angezeigt. Textpositionierung funktioniert.[/quote] Da hast Du die Bilder vermutlich im falschen Verzeichnis liegen… Wo liegen die denn?[/quote] Also sie liegen in meinem template unter /images/icons/ und angegeben habe ich background-image: url("../images/icons/user1.ico"); Funktioniert mit anderen Bildern in der css auch.
so ist es 
musst es natürlich in den enstprechenden contain etc einbauen aber das dürfte dir ja klar sein
Hmmm, funktioniert leider nicht. Auch der absolute Pfad zu den Bildern ändert nichts. Es müßte dann doch in der css folgendes zumindest ein Bil anzeigen: li.agb{list-style:url("../images/dateiname.gif");}
ich würde als erstes probieren ob sich überhaupt irgendwas tut. z.B. li.agb{ list-style:decimal; } Hast du in deinem Shop das Cachen deaktiviert?
Das Cachen habe ich nicht deaktiviert, wenn ich im css eine Positionsänderung vornehme wird mir das beim Aktualisieren des Browsers auch sofort angezeigt.
[quote=“taaucher”]Das Cachen habe ich nicht deaktiviert, wenn ich im css eine Positionsänderung vornehme wird mir das beim Aktualisieren des Browsers auch sofort angezeigt.[/quote] Wenn Du FireBug im Einsatz hast: Den Netzwerk-Tab anwählen, und die Seite komplett neu laden lassen (vorher auch Browsercache löschen.) Nach dem Laden siehst Du alle angeforderten Elemente, und kannst dann auch die komplette URL sehen, von der das Bild geladen werden soll…
Guten Morgen, also er zeigt mir in jedem Falle an, das, z.B. die
- geladen wird, allerdings ist dort kein Link zu einem Bild angegeben. In der css steht folgendes:
li.Impressum{ display: block; color: #000000; background-color: transparent; background-image: url("../images/sprite\_slider\_arrows.png"); background-repeat: no-repeat; background-position: 0 0.2em; text-decoration: none; margin-left: 5px; padding-left: 20px; list-style-type: none; }Habe es auch mit list-style probiert. ohne Erfolg.
So, ich habe jetzt einen Weg gefunden, das Ganze in der Template Style zu implementieren: #content #left ul#servicenav li.anfahrt{background-image: url("../images/icons/home.ico"); background-repeat: no-repeat; padding-left: 12px;} Das funktioniert, alles andere in Bezug auf ein Bild davor in der css geht leider nicht. Jetzt habe ich noch das Problem, das die Begriffe aus 2 oder 3 Wörtern ja auch definiert werden müssen, doch wie ersetze ich die Leerzeichen in der css? mfg Frank
Morgen zusammen, versuchs mal damit: [code]
- [/code] Das musst du natürlich im Template mache, da wo der Code erstellt wird. Dann solltest du anstatt Leerzeichen Unterstriche haben. Grüße Ottscho
1 „Gefällt mir“
Das klappt, wie sieht das denn mit Ö und Ü aus, da klappt es nicht wenn ich daraus ein u oder o mache.