Farben geändert - Browser zeigen verschieden an

casa · July 18, 2011, 2:05am

Hallo,

ich habe folgendes Problem mit dem Template:
Ich hatte gestern die Farben im Azur-Template geändert. Mein Firefox-Browser hat auch alles schön nach der Änderung angezeigt. Habe anschließend auch den Temp-Ordner geleert. Alles bestens.
Heute nun bin ich am anderen Rechner und gehe mit Opera rein und… alles blau wie vorher :D. Ein paar farbliche Änderungen sind zwar ersichtlich, aber sonst sieht alles aus wie beim Standard-Template. Habe alle Caché geleert, nochmals die neuen Dateien hochgeladen, den Temp-Ordner geleert und… nix.
Es sieht jetzt so aus, dass nur [B]Firefox[/B] mein neues Template anzeigt und [B]alle anderen Browser[/B] das alte Template.
Irgendetwas muß ich ja wohl falsch gemacht haben, aber wo?
Kann mir jemand helfen? Bin für jeden Tip dankbar!!!

Ach so, was ich noch hinzufügen möchte:
Folgende Dateien habe ich bearbeitet: Im Azure-Template die [U]elements.css[/U] und die[U] fxstyles.css[/U] Dateien.
Und die Einstellung “Überprüfen ob Templates neu kompiliert werden müssen. Schalten Sie diese Einstellung aus, wenn der eShop in den Live-Betrieb geht.” habe ich mit Häkchen versehen.

ChristophH · July 18, 2011, 9:47am

Ohne den Shop sehen zu können oder die Veränderungen im Detail zu kennen kann dir keiner helfen. Hast du vielleicht einen Link? Eigentlich gibt es nur für den Internet Exploder Besonderheiten zu beachten, weil er nicht mit PNGs richtig umgehen kann.

caladan · July 18, 2011, 10:31am

die sache ist einfach… der firefox nutzt farben und verläufe via CSS …

der IE via SVG dateien.

wenn auch der IE die neuen farben nutzen soll: pass die entsprechenden SVG dateien an.

ab IE9 kannst du mit f12 die devtools aufrufen. in diesen siehst du welche svg dateien für das jeweilige element benutzt werden

casa · July 18, 2011, 2:20pm

Habe schon befürchtet, dass ich noch irgendwo anders die Farben einstellen muß
Ich mache es eigentlich immer mit Firebug, um zu gucken, wo, wie…
@caladan: Deinen letzten Satz verstehe ich nicht “ab IE9 kannst du mit f12 die devtools aufrufen. in diesen siehst du welche svg dateien für das jeweilige element benutzt werden”

Es gibt also für den Internet-Explorer auch so’n Tool, um zu gucken, in welchen -jetzt SVG-Dateien ich Änderungen machen muß?

Dann hat ja jeder Shopbetreiber doppelte Arbeit, wenn er das Template verändern will?

Wie heißt denn das Ad on für den Explorer?

coarsy2 · July 18, 2011, 2:51pm

Das Addon ist bereits integriert und kann wie von Caladan erwähnt mit F12 aktiviert werden.

Ach ja, doppelte Arbeit wäre ja noch okay, ist heutzutage schon fast die 5-fache Arbeit

Viele Grüße vom Chris

casa · July 19, 2011, 2:17am

Danke für den Tip!!
Werde aber jetzt wahnsinnig. Bei diesem Tool muß man ja ein Kurs belegen, um den zu verstehen. Der zeigt mir auch nur CSS-Dateien an. Kann da nirgends SVG-Dateien finden und die werden mir auch nicht angezeigt.
Da gibt es die Rubriken: HTML, CSS, Console, Script, Profiler und Network.
Wo muß ich denn bloß klicken?
Wie geht das bloß?

( Siehste, und schon stürzt der Explorer ab. Ich hasse den Exlorer! )

caladan · July 19, 2011, 5:12pm

ach im prinzip machs dir einfach:

unter out/azure/src/bg/svg findest du alle svg dateien. diese können mit notepad oder einem beliebigen texteditor geändert werden.

dort siehst du folgendes:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="select-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="#adefff"/>
            <stop offset="50%" stop-color="#389cb4"/>
            <stop offset="100%" stop-color="#18778e"/>
        </linearGradient>
        <style type="text/css">
            rect {
              fill: url(#select-gradient);
            }
        </style>
    </defs>
    <rect x="0" y="0" rx="0" ry="0" height="100%" width="100%"/>
</svg>

die rot markierten sachen sind die farbe. es handelt sich hierbei um einen start wert, mittel wert und stop wert. einfach die passenden farben eintragen und fertig.

was die dev tools angeht: natürlich sollte man wissen wie man mit sowas umgeht

die svg dateien für “hover” effekte werden gezeigt in dem du folgendes machst:

dev tools schliessen.
seite mit strg + f5 reloaden
auf das entsprechende element mit der mouse draufzeigen
f12 drücken
oben links in den dev tools auf das mouse zeiger symbol klicken
das gewünschte element auswählen
rechts in den css eigenschaften schauen welche svg datei das ist
diese ändern

das tolle an den ie devtools ist, dass du die verschiedenen ie versionen testen kannst

casa · July 31, 2011, 4:20pm

Vielen Dank für Deine Anleitung!!
Nun habe ich’s verstanden!!

Waldfee · August 1, 2011, 3:23pm

Ha nun kann ich mein hier erlerntes wissen auch mal anwenden.

Ich habe das Problem mit den Farben anders gelöst.

Habe einfach mit Photoshop farbliche flächen erstellt. so ca. 5px breit und 15px lang.

Dann einfach ein verlauf oder muster drüber oder eben beides und dann die bilder auf den server gepackt und im css die farben gegen das img. ausgetauscht.

geht super und jeder browser spielt mit.

caladan · August 4, 2011, 9:11am

@waldfee das ist richtig, jedoch nicht optimal. die verläufe über css bzw svg darzustellen bietet einfach eine kleinere website. daher auch dieser weg

Der_Graubart · January 6, 2012, 9:29pm

hm, leider hat das Ändern der Farbwerte bei mir nicht gefunzt.

Ich habe die Datei “grad_blue.svg” im Verzeichnis “/httpdocs/out/azure/src/bg/svg” wie beschrieben mit meinen Farbwerten verändert.

Dann alles aktualisiert, geleert, neu geladen…

Nix - IE8 bleibt alles in blau…

Muss ich vielleicht noch eine weitere Datei ändern?
In Firefox, Chrome und Opera läuft alles.

Noch ein Hinweis: bei mir sind die Werte für
<stop offset=“0%” und stop offset=“50%” identisch

aber das kann doch kein Grund sein, oder?

Meine grad_blue.svg aktuell:

<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
<defs>
<linearGradient id=“select-gradient” x1=“0” x2=“0” y1=“0” y2=“1”>
<stop offset=“0%” stop-color="#9c39de"/>
<stop offset=“50%” stop-color="#9c39de"/>
<stop offset=“100%” stop-color="#8418de"/>
</linearGradient>
<style type=“text/css”>
rect {
fill: url(#select-gradient);
}
</style>
</defs>
<rect x=“0” y=“0” rx=“0” ry=“0” height=“100%” width=“100%”/>
</svg>

Tom_Long · January 6, 2012, 9:57pm

Moin Uwe,

der IE8 nutzt auch nicht die SVG-Dateien, das macht nur der IE9.
Denk doch mal darüber nach, was für einen Sinn vielleicht die IE8 und IE7.CSS haben

Beste Grüsse

Thomas

PS: Im IE9 sieht es ekellila aus und im Firefox etwas “gedeckter”

Der_Graubart · January 6, 2012, 10:00pm

du bist doof

DANKE!!

Der_Graubart · January 9, 2012, 7:08pm

Hi,

jetzt sollte es im IE9 besser aussehen - ich lerne jeden Tag dazu