Irgendetwas mache ich falsch. Ich möchte die Vergleichbox (Artikel vergleichen) von 250px auf 400px verändern. Nehme den Eintrag aus dem default emotion.css und kopiere es in meinen NameEmoten.css Doch die Änderungen werden NICHT übernommen. Egal was ich tue, es passiert nichts. Mit firebug wir noch immer die emotion.css aus dem default Ordner angezeigt. Was kann ich tun? Wie kann ich herausfinden woran es liegt? Ändere ich es z.B. direkt im default emotion.css klappt es wunderbar, aber das ist ja nicht die Lösung. Dieses ganze vererben bringt mich noch um den Shop…musste schon für navigation Änderungen das Tuch schmeißen. Komischerweise werden aber andere Veränderungen, z.B. Farbe etc übernommen… Ich hoffe es kann mir einer helfen 
Hallo tronx, wenn du dein Template von dem Emotion-Template ableitest, muss du bedenken, dass du es mit drei verschiedenen CSS-Dateien zu tun hast: 1. style.css in _default/frontend/_resources/styles/ 2. emotion.css in _emotion/frontend/_resources/styles/ 3. “deinstyle.css” in emotion_deintemplate/frontend/_resources/styles/ Es kommt öfters auch vor, dass bestimmte CSS-Styles mit dem Befehl “!important” markiert sind. Wenn dass der Fall ist in style.css oder emotion.css, dann kannst du diese Styles nicht einfach überschreiben, sondern musst ebenfalls ein “!important” setzen. Es könnte außerdem sein, dass die Breite der Vergleichsbox über das Grid-System definiert wurde. Das erkennt man daran, dass eine Div eine CSS-Klasse wie “grid_6” enthält. Bei wirklich umfangreichen Anpassungen an deinem Template empfehle ich es, auf die Standard-Styles zu verzichten und eine komplett eigene CSS aufzubauen (ist aber sehr viel Arbeit…).
1 „Gefällt mir“
Hi, vielen Dank für deine Antwort. Ok das leuchtet ein wenig ein. Ich habe vom originalen emotion.css die Zeilen die ich verändern möchte in das meineemotion.css kopiert, dort ist auch ein Important! im text. muss ich vllt das Important in der Originalen löschen? (eben gemacht, hat nichts gebracht). Um das hier geht es mir, >> top:0; left: 400px !important; #compareHighlight, #compareHighlight.active { background: #fff; top:0; left: 250px !important; color: #9a9a9a; font-weight: normal; border-color: #d7d7d7; border-style: solid; border-width: 0 1px 1px; height: 17px; padding: 4px 25px 4px 10px; /*CSS3*/ -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 0 2px #dfdfdf; -moz-box-shadow: 0 0 2px #dfdfdf; box-shadow: 0 0 2px #dfdfdf; } Mit komplett eigenen meinst du das default direkt bearbeiten? Denn arbeit habe ich auch so genug, man versucht stundenlang irgendwelche Anpassungen zu machen, aber es passiert manchmal nichts und das ist für mich nicht nachvollziehbar, ich erkenne oft keine Logik dahinter. Ich ging immer davon aus, das die Vererbung, immer über meine eigene emotion.css nach oben gereicht wird. Ist in meinem emotion nichts enthalten wird auf die default emotion.css zugegriffen. liege ich damit falsch? Gruß
[quote=“tronx”] Mit komplett eigenen meinst du das default direkt bearbeiten? Denn arbeit habe ich auch so genug, man versucht stundenlang irgendwelche Anpassungen zu machen, aber es passiert manchmal nichts und das ist für mich nicht nachvollziehbar, ich erkenne oft keine Logik dahinter. Ich ging immer davon aus, das die Vererbung, immer über meine eigene emotion.css nach oben gereicht wird. Ist in meinem emotion nichts enthalten wird auf die default emotion.css zugegriffen. liege ich damit falsch? [/quote] Ja und Nein, es werden nacheinander die drei CSS-Dateien von dem Browser geladen. Danach wertet dieser die Definitionen aus und das geschieht nach dem entsprechenden W3C-Standard. Es wird immer die Definition verwendet, die die “beste” Selektierung des angesprochenen HTML-Elements aufweist. Das hat mit der Vererbung der SMARTY-Templates von Shopware aber nichts mehr zu tun, hier müssen die Grundlagen für CSS gelernt werden. 1. Löschen der Caches im Backend! Bei mir funktioniert die Lösung von tronx. 2.Falls das nicht funktioniert genauer selektieren und !important verwenden. Viel Erfolg HTH
1 „Gefällt mir“
Vielen Dank an euch für die Tipps, doch leider klappt es noch immer nicht. 
Eine Frage, da wo das Important! steht, das wird sozusagen in der Vererbung „erzwungen“? Sollte ich lieber auf dem Server die ganzen caches löschen, denn mit backend/ cache löschen klappt es wie gesagt noch immer nicht. Übrigens, laut firebug wird noch immer die standard emotion.css geladen. Lediglich bei Color etc greift es auf die nameemotion.css zu.
[quote=„tronx“] Eine Frage, da wo das Important! steht, das wird sozusagen in der Vererbung „erzwungen“? [/quote] Das Important „überschreibt“ alle anderen CSS-Angaben der Eigenschaft bei der es steht (hier left) für das selektierte Element, aber das hat nichts mit der SMARTY-Template-Vererbung zu tun. Nur falls, es da noch Unklarheiten gab. In der meintemplate.css muss am Ende stehen: Anstatt 100px und 0px der jeweils gewünschte Wert. #compareHighlight, #compareHighlight.active { top: 0px; left: 100px !important; } 1. Backend Shopware alle Caches löschen 2. Im Browser alle Caches und Cookies löschen; nimm halt Google Chrome, wenn Du die Einstellungen dort schneller findest (Tools ->Browser Daten löschen) 3. Dann die Seite wieder aufrufen. Von emotion.css und default.css und color.css etc. immer die Finger lassen! Alle CSS-Änderungen können in der eigenen CSS-Datei vorgenommen werden. !important immer als letztes Mittel anwenden, das kann sich unter Umständen auf andere Stilvorgaben auswirken, wenn dort auch die Klasse verwendet wird. Lieber genauer selektieren. Unvorhersehbar oder von Shopware verursacht passiert bei der CSS-Interpretation auch nichts, das folgt streng den Standardvorgaben für CSS - zumindest bei den aktuellen Browsern für die Desktop-Rechner. Wenn es nicht klappt, schick einen Link per PM. Viel Erfolg HTH
1 „Gefällt mir“
sooooo…ich habe es hinbekommen, aber ich musste es hierhin kopieren Original /* FINISHED AND COMPARE ------------------------ */ .finished h3, .finished p.bold, #compareContainerResults li, #compareHighlight, .container_20 .grid_3.compare_desc {border-color: #dfdfdf;} Danach /* FINISHED AND COMPARE ------------------------ */ .finished h3, .finished p.bold, #compareContainerResults li, #compareHighlight, .container_20 .grid_3.compare_desc {border-color: #dfdfdf;left: 400px !important;} <<<< Wenn ich es in der letzten Zeile (sprich ganz unten) der CSS kopiere, wird es nicht übernommen. Wie ist das zu verstehen? Sollte ich jetzt eine dumme Frage gestellt haben, bitte ich um Entschuldigung. Eventuell ein Tipp was ich im Internet mir durchlesen sollte, damit ich nicht mehr solche Fragen stelle ;-)? PS: Nochmals DANKE den Link kann ich dir gerne schicken, der Shop ist aber im Wartungsmodus. Geht es trotzdem über einen direkten Link?
Hallo tronx, unbeliebteste Antwort aller Zeiten: Das kann so nicht stimmen. Es sei denn, Du hast noch mehr verändert.
#compareHighlight wird mehrfach hin und her geändert in emotion.css und die left-Position wird nach der von dir verwendeten Zeile im CSS mit !important gesetzt. Somit sollte sie deine Angabe überschreiben, falls du diese in emotion.css geändert hast. Und am Ende der eigenen CSS-Datei hatte ich es extra getestet. Mit dem Wartungsmodus kann ich natürlich beim Vergleichen nichts erkennen. Ich würde aber auch einen Passwortschutz über htaccess empfehlen. Dann kommt wirklich keiner auf die Seite. Im Wartungsmodus muss der Rest, vor allem das Impressum bereits funktionieren, um rechtlich auf der sicheren Seite zu sein. Lesestoff - schwierig, es gibt so viel. Vielleicht mal hiermit starten, wenn Englisch kein Problem ist. http://www.w3schools.com/ und Learn CSS. http://www.w3.org/standards/webdesign/htmlcss Ziemlich veraltet, aber auf deutsch; http://de.selfhtml.org/css/formate/index.htm Kaskade und HTML-Element direkt formatieren. Viel Erfolg