ich möchte gerne die Ansicht eines Artikels auf der Startseite komplett anders gestalten.
Was muss ich alles ändern, wenn ich die product.tpl komplett spiegeln und für mich anpassen möchte?
Hier mein konkreter Fall:
Ich habe ich die product.tpl gedoppelt und product_anders.tpl genannt.
Dort habe ich dann meine Änderungen gemacht.
So weit so gut. Allerdings holt sich die Datei seine Designbefehle ja aus der CSS.
Dort habe ich meine Befehle in einer ebenfalls gedoppelten und umbenannten #body .product.head eingegeben.
Sie heisst nun #body .product.head_anders.
Alles was mit head zu tun hat, habe ich dann in der product_anders.tpl dementsprechend in head_anders verändert, aber es will leider nicht klappen.
Mit Sicherheit muss ich noch mehr Sachen im CSS doppeln, nehme ich an?
Anstatt alle vorhandenen CSS-Angaben einfach zu doppeln, hättest du den einfacheren Weg wahlen können:
[ul]
[li] für dein spzielles Template bindest du eine 2 CSS-Datei mit zusätzlichen Regeln ein.[/li][li]du veränderst die Namen der id´s und klassen ein wenig und ergänzt die vorhandene CSS-Datei[/li][/ul]
Was du vor hast ist unnötig schwierig und auf Dauer nicht pflegbar…
Vielen Dank!
Ok, da hab ich wohl falsch gedacht. Hab aber noch nicht viel verändert. Ich werde es gerne mit deiner Idee versuchen.
Ich kenne mich leider nicht sehr gut aus.
Ich lege also trotzdem meine product.tpl an, nur das diese auf eine oxid_2.css zugreift?
Das klingt gut. Wie mache ich der der tpl an, dass sie sich die infos nicht von der oxid.css holt?
Du hast in dem derzeitigen Template ja html-Tags mit verschiedenen Klassen, id´s etc.
z. B.:
<h1 class="fn" id="test_product_name">Artikeltitel</h1>
<span class="desc description" id="test_product_shortdesc">Kurzbeschreibung des Artikels</span>
In deinem neuen template “product_anders.tpl” nennst du sie jetzt einfach um:
<h1 class="fn" id="test_product_name_2">Artikeltitel</h1>
<span class="desc description" id="test_product_shortdesc_2">Kurzbeschreibung des Artikels</span>
Dann kannst du getrennte CSS-Angaben einfach in die vorhandene CSS-Datei einbauen. Die Regeln werden ja nur ausgeführt, wenn das passende Template gezogen wird.
also mit _2 schnappt sich das template dann auch automatisch die oxid_2.css?
Bei _beispiel dann die oxid_beispiel?
Das ist aber sehr viel Arbeit. Allein bei der product.tpl findet mein Suchprogramm 127 Mal “id”.
Muss ich die alle ändern? Und viel wichtiger. Wenn ich in der normalen oxid.css noch irgendwelche anderen Änderungen mache, muss ich die dann ja in der oxid_2.css auch mit machen, oder?
<h1 class=“fn” id=“test_product_name_2”> klingt logisch, aber wie mache ich es denn dann bei <input id=“test_remove_[{$testid}]” ? Vielleicht <input id=“test_remove_[{$testid_2}]”?
Nein, es wird nicht automatisch eine neue css-Datei erstellt oder eingefügt.
Die leicht veränderten id’s, Klassen etc sorgen nur dafür, das bereits vorhandene css-Anweisungen nicht mehr greifen. Du definierst einfach neue, indem du die vorhandenen regeln nach deinen wünschen umschreibst.
Du musst natürlich nur das ändern, was du auch verändern willst.
Ich empfehle dir erstmal die Basics von selfhtml zum Thema. Als browser-addon firebug zum testen des gelernten…
Damit liefert die originale “oxid.css” auch nach Updates noch das Grundlayout. Nur die veränderten Teile kommen in die neue CSS rein. So bleibt das Ganze sogar noch einigermaßen updatetauglich.
Noch einfacher wäre die Vergabe eines Identifiers an einem alles umschließenden Tag. Dann müßte nicht an jedem Element die Änderung im Template vorgenommen werden. Die darin eingeschlossenen Elemente können sich dann auf diese neue Klasse / ID beziehen. Diese jetzt hier an Beispielen zu erklären, übersteigt jedoch den Rahmen.
Das ist natürlich auch eine Möglichkeit. Ich denke es hängt davon ab, was man genau vor hat. Wenn man nur ein paar Schrift- und Hintergrundfarben austauschen will, ist dein Weg der einfachere.
Bei einer komplett neu gestalteten Ansicht, ist mein Weg einfacher, weil man nicht jede angewendete CSS-Regel explizit überschreiben muss.
