CSS updatesicher anpassen

Hallo ! Ich habe die Anpassung von Templates mit der beschriebenen Vererbung erfolgreich realisiert. Mein Problem ist noch das Anpassen der css files updatesicher durchzuführen. Was muß man da genau beachten ? thx lg klaus

Hallo Klaus, am einfachsten machst du das in deinem Template in der zugehörigen style.css oder deiner selbst angelegten .css, du kannst dort alles aus dem default Template überschreiben, da er zuerst im gewählten Template nach allem sucht, was er da nicht findet wird dann vom local und dann vom default genommen. Grüße Frank

1 „Gefällt mir“

[quote=“taaucher”]…da er zuerst im gewählten Template nach allem sucht, was er da nicht findet wird dann vom local und dann vom default genommen. [/quote] Hallo ! Danke…genau DAS war es was mir als Info gefehlt hat…die reihenfolge… :slight_smile: lg klaus

Hallo ! Muß hier leider mit einem Beispiel nochmals nachfragen, ob ich wirklich richtig liege: Beisspiel 1. Ich ändere Farbebezeichnungen in /templates/gradient/frontend/_resources/styles/gradient.css Dazu kopiere ich die komplette gradient.css mit selber Struktur in den ordner _local, mach dort meine Anpassungen…/templates/_locale/frontend/_resources/styles/gradient.css Frage nun dazu: Wir nun die gradient.css automatisch aus dem ordner _local aufgerufen ODER muss diese datei einen anderen Namen haben und der Aufruf im in der index Datei angepsst werden ? Beispiel 2: Ich ändere Abstände von Headerbild und Warenkorbposition in /templates/_default/frontend/_resources/styles/style.css Gehe vor wie im ersten Beispiel…aber dann wird durch Update eine neue style.css eingespielt (was ja mit 3.5.3 zu erwarten ist)…wenn ich dann mit PSPad die beiden vergleiche und die Änderungen vom Update in der datei /templates/_default/frontend/_local/styles/style.css übernehme, müsste eigentlich wieder die _locale vor der _default gelten…ODER ? thx klaus

Hallo Klaus, es wird immer erst im ausgewählten Template gesucht, wenn dort durch das Template in der index.tpl die gradient.css ausgewählt ist, wird die von dir im _local Verzeichnis abgelegte ignoriert. Am besten legst du dein eigenes Template an, und kopierst dort die gewünschten Sachen hin, und machst auch dort die Änderungen. Im falle der Style.css würde das im _local aber funktionieren, auch bei einem Update template --> _local --> _default Was er in deiner template css nicht findet, sucht er in _local, dann gehts weiter nach _default. Grüße Frank

[quote=“taaucher”]Hallo Klaus, es wird immer erst im ausgewählten Template gesucht, wenn dort durch das Template in der index.tpl die gradient.css ausgewählt ist, wird die von dir im _local Verzeichnis abgelegte ignoriert. Am besten legst du dein eigenes Template an, und kopierst dort die gewünschten Sachen hin, und machst auch dort die Änderungen. Im falle der Style.css würde das im _local aber funktionieren, auch bei einem Update template --> _local --> _default Was er in deiner template css nicht findet, sucht er in _local, dann gehts weiter nach _default. Grüße Frank[/quote] Das ist m.E. zu aufwändig, da damit ja immer die gesamte CSS-Datei überladen wird. Besser dürfte sein, im eigenen Template (oder _local) eine CSS-Datei (z.B. my.css) anzulegen, in der nur die zu ändernden CSS-Selektoren mit den zu ändernden/zusätzlichen Anweisungen enthalten sind, und die man als letzte zusätzlich im Header einbindet. Ähnlich könnte man mit broswerspezifischen CSS-Dateien verfahren.

Ja, das wäre der korrekte Weg. Also nur die Styles modifizieren, die man tatsächlich anpassen möchte.

Aber das ist doch nicht anders, wenn ich in meinem Template die css mit den Änderungen liegen habe, oder?

Doch. Wenn zuerst die Original-CSS-Datei geladen wird und dann deine Kopie der Original-CSS, werden in der Kopie ja grundsätzlich alle Eigenschaften der Original-Datei überschrieben - sprich, wenn wir Änderungen durchführen, werden die ggf. nicht übernommen / angezeigt, weil deine CSS-Datei diese Änderungen rückgängig macht. Der optimale Weg ist daher, nur das Delta in eine eigene Datei auszulagern.

Das meinte ich ja. Ich schreibe in meine css nur die Änderungen, und dann ist es ja nichts anderes.

[quote=“taaucher”]Das meinte ich ja. Ich schreibe in meine css nur die Änderungen, und dann ist es ja nichts anderes.[/quote] Das kann eigentlich gar nicht funktionieren… Denn wenn in Deinem Verzeichnis eine CSS-Datei gefunden wird, werden die gleichnamigen Dateien in tiefer liegenden Verzeichnisebenen nicht mehr geladen…

1 „Gefällt mir“

[quote]Besser dürfte sein, im eigenen Template (oder _local) eine CSS-Datei (z.B. my.css) anzulegen, in der nur die zu ändernden CSS-Selektoren mit den zu ändernden/zusätzlichen Anweisungen enthalten sind, und die man als letzte zusätzlich im Header einbindet.[/quote] Hallo ! Danke mal an Alle… wenn ich es richtig verstehe baue ich den Aufruf der eigenen CSS die ich in _local oder im eigen template-ordner habe in den Header ein. Aus meiner Erfahrung ist aber dann noch die Reihenfolge relevant mit der der Aufruf der eigenen CSS erfolgt. Wie muß der Aufruf erfolgen, dass die Informationen in den per default aufgerufenen CSS überschrieben werden ? thx lg klaus PS: OK DAS [quote]die man als letzte zusätzlich im Header einbindet[/quote] habe ich leider jetzt erst gelesen… alles klar …dann mal eifrig probieren… Eine Anregung hätte ich noch: Ich kenne zB von CONTAO (vorm. Typolight) die Funktion, dass die css Dateien zusammengefasst werden (ab Version 2.9.1)… damit reduziert sich ja deutlich die Ladezeit der Seite…wäre das nicht auch eine sinnvolle Funktion für shopware ?

[quote=“avenger”][quote=“taaucher”]Das meinte ich ja. Ich schreibe in meine css nur die Änderungen, und dann ist es ja nichts anderes.[/quote] Das kann eigentlich gar nicht funktionieren… Denn wenn in Deinem Verzeichnis eine CSS-Datei gefunden wird, werden die gleichnamigen Dateien in tiefer liegenden Verzeichnisebenen nicht mehr geladen…[/quote] Also wenn ich die Abschnitte, die ich anders formatieren möchte, in meiner css entsprechend ändere, dann sollte das doch passen, diese sind ja in der _default vorhanden und werden mit meinen überschrieben. Habe das Gefühl das wir hier etwas aneinander vorbei reden, oder ich es anders meine als es verstanden wird.

[quote=“taaucher”][quote=“avenger”][quote=“taaucher”]Das meinte ich ja. Ich schreibe in meine css nur die Änderungen, und dann ist es ja nichts anderes.[/quote] Das kann eigentlich gar nicht funktionieren… Denn wenn in Deinem Verzeichnis eine CSS-Datei gefunden wird, werden die gleichnamigen Dateien in tiefer liegenden Verzeichnisebenen nicht mehr geladen…[/quote] Also wenn ich die Abschnitte, die ich anders formatieren möchte, in meiner css entsprechend ändere, dann sollte das doch passen, diese sind ja in der _default vorhanden und werden mit meinen überschrieben. Habe das Gefühl das wir hier etwas aneinander vorbei reden, oder ich es anders meine als es verstanden wird.[/quote] Verstehe ich das richtig ? Würdest Du nur die geänderten Zeilen in das CSS setzen…ähnlich wie bei der Vererbung der Templates ? LG Klaus

Also ich mache es so: Wenn in der _default z.B. .my_options {position: absolute; top: 58px;left:490px;} steht, aber ich die Position ändern will, dann schreibe ich in meine css z.B. .my_options {position: absolute; top: 100px;left:30px;} und überschreibe somit die default.

Hi… So wäre mein Ansatz gewesen bevor ich hier nachgefragt habe… Wenn ich mir das alles nochmals durchlese…glaub ich ihr meint beide das Selbe… Würde es mal so zusammenfassen: Lege eigene xyzmy.css an, lade die als letztes im Header…führe dort nur die Optionen an die ich ändern will…egal ob die vorher in _default oder im gradient css-ordner bestimmt wurden. Passt das so ? lg klaus

Dein Template, _local, _default, das ist die Reihenfolge.

1 „Gefällt mir“

[quote=“taaucher”]Dein Template, _local, _default, das ist die Reihenfolge.[/quote] Hi ! Kann nur sagen…hat perfekt so geklappt… sbox ist nun mein eigenes Template /templates/sbox/frontend/index/header.tpl > Pfade angepasst und eigene *.css laden /templates/sbox/frontend/_resources/styles > eigene *.css angelegt und angepasst DANKE !! lg klaus

[quote=„taaucher“]Dein Template, _local, _default, das ist die Reihenfolge.[/quote] Aber es wird ja nur eine CSS-Datei aus allen Pfaden geladen, die CSS-Dateien aus allen Pfaden werden ja nicht zusammengeführt. D.h., wenn Du z.B. eine eigene color.css hast mit nur einer CSS-Anweisung, dann würde damit die color.css in _default komplett ersetzt, und alle CSS-Anweisungen dieser color.css wären nicht mehr verfügbar. Und selbst wenn Shopware alle CSS-Dateien entlang des Pfades „Dein Template, _local, _default“ laden würde (was es aber nicht tut), hätten die CSS-Anweisungen in „_default“ höchste Priorität, und würden Anweisungen für gleiche Selektoren überschreiben. Lediglich zusätzliche Selektoren und Anweisungen hätten dann Wirkung. Ich sehe also nur den einen von mir schon beschriebenen Weg: eigene CSS-Datei erstellen und zusätzlich laden, dann hat man alle Probleme damit gelöst. Hast Du mal einen Link zu Deinem Shop?

Hallo ! Nachdem ich ja die ganze Diskussion hier offensichtlich ausgelöst habe, möchte ich meinen Weg, der zum Ziel geführt hat, hier für andere Einsteiger kurz beschreiben: sbox ist nun mein eigenes Template > war vorher gradient Benötigte Ordnerstruktur herstellen. Spezielle Bilder in diesem Template ablegen die nur für “sbox” gelten. zB logo.jpg /templates/sbox/frontend/index/header.tpl > Pfade angepasst und eigene *.css laden {extends file="templates/\_default/frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen" append} <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='templates/sbox/frontend/_resources/styles/sbox.css'%7D"><link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='templates/sbox/frontend/_resources/styles/sbox-extra.css'%7D"> {/block} {block name="frontend\_index\_header\_css\_ie" append} <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" media="all" href="{link file='frontend/_resources/styles/ie6_sbox.css'}" /> <![endif]-->{/block} /templates/sbox/frontend/_resources/styles > eigene *.css angelegt und angepasst ie6-gradient > umbenennen zu ie6-sbox.css gradient.css > umbenennen zu sbox.css neue *.css anlegen (hier sbox-extra.css), mit den Optionen aus /templates/_default/frontend/_resources/styles überschrieben werden: /\* CSS Document framework \*/ /\* GENERAL & TYPOGRAPHY ------------------------ \*/ a, a:link, a:visted {color:#FE9900} /\* LINKS ------------------------ \*/ a {text-decoration: none;color:#FE9900;} a:hover {color:#FE9900;text-decoration: underline;} a.link {color:#FE9900;font-weight: bold;} /\* CSS Document style \*/ /\* HEADER ------------------------ \*/ #header {height: 140px;position: relative; width: 100%;} #header #logo a {background: url(../images/logo.jpg) no-repeat;width: 998px;height: 138px;text-indent: -9999px;position: absolute;left: -9px;top: 1px;display: block;margin: 1px 0 0 0px; padding: 0 0 0 0px} /\* SHOPNAVIGATION Account, Notes, Basket ------------------------ \*/ #shopnavi .newbasket {width: 300px;position: absolute; right: 0px;top:50px;} .ajax\_basket\_result .inner\_cart div { height:30px;} /\* My options \*/ .my\_options {position: absolute; top: 85px;left:510px;} Die sbox-extra.css überschreibt hier individuell die Linkfarben und Lage, Größe Header Logo die ursprünglich im Ordner _default definiert waren. In diesem Fall werden teile von style.css und framework.css überschrieben. Das ist natürlich individuell… So klappt es bei mir. http://www.schluesselbox.at (ist aber noch Wartungsseite vorgeschalten) thx für die Hilfe von Allen… lg klaus