Oxid 4.6.2 Farbe von Boxen und Buttons ändern

manuel1 · July 8, 2012, 5:04pm

Hallo,

ich versuche seit 5 Stunden die Farbe von den Boxen und die von den Buttons zu ändern leider ohne Erfolg.
ich habe mir auch die ganzen Beiträge zu meiner Frage hier im Forum angeschaut, leider bin ich einfach zu doof die Farben zu ändern.
Alles mögliche probiert, mit Firebug trotzdem geht es einfach nicht.

zum Beispiel habe ich den Code für die gelbe Farbe in der oxid.css mit einer anderen ersetzt…

hat wer eine Anleitung wie ich die zwei Farben ändern kann, die gelbe Farbe von den Buttons und die blaue von den Boxen.

mein Shop läuft leider auf meinem lokalen Rechner. Hätte sonst hier den Link gepostet, damit ihr seht was ich meine.

für jede Hilfe bin ich sehr dankbar.

mfg

Manuel

Tom_Long · July 8, 2012, 5:08pm

Moin Manuel,

die meisten Buttons sind keine einfachen Farben sondern Verläufe. D.h. du hast schon mal mehrere Farbwerte. Wo du die ändern musst hängt auch von den verwendeten Browsern ab. So hat z.B. die IE9 dort eine völlig andere Methode die Farben darzustellen (Farbverlaufsdateien) als alle Browser (CSS).

Und wenn du noch etwas präzisieren könntest, in WELCHEN Boxen du WELCHE Farben ändern willst, wäre das schon mal einfacher. Dort übrigens auch… Siehe oben…

Bei allem bin ich mangels Angaben von dir mal von Azur und der aktuellen Shopversion ausgegangen.

Und das Ganze ist teilweise etwas komplexer was du schon daran siehst, dass Oxid bis heute nicht in der Lage ist, dieses Forum (und den Rest der Website) im IE9 richtig darzustellen

Beste Grüsse

Thomas

manuel1 · July 8, 2012, 6:48pm

Vielen Dank für die schnelle Antwort.

ja richtig geschätzt, das Standard-Theme azura wird verwendet. Ich möchte eigentlich insgesamt drei Änderungen vornehmen:
die Hintergrundfarbe der Top-Navigation welche standardmäßig weiss ist, die möchte auf eine andere Farbe ändern. Und überall anstatt von Orange-Farbe eine andere nehmen.
Die Hintergrundfarben der Boxen konnte inzwischen auf eine andere ändern. Jedoch was mir noch fehlt sind noch die Buttons die noch immer die blaue Farbe beinhalten zum Beispiel Abonnieren, Warenkorb usw.
Es ist das erste Mal dass ich Oxid Shop einsetze, damit ich nicht so viele Fragen ins Forum poste um den Leuten auf die Nerven zu gehen, habe ich mir extra das “online-Shops mit Oxid eShop” Buch besorgt. Da gibts es auch ein Kapitel das Template-System, die Änderung der Hintergrundfarbe der Boxen wird da auch erklärt, mehr leider nicht, was ich sehr schade finde.

könntest Du vielleicht mir bei meinem Vorhaben helfen.

vielen Dank

Tom_Long · July 8, 2012, 7:17pm

Moin manuel_,

schau dir doch einfach mal die Zeile 346 bzw. alles so um die Zeile 1340 in der oxid.css an.
Für den IE9 wird dann allerdings komplizierter

Beste Grüsse

Thomas

manuel1 · July 9, 2012, 11:09am

Hallo Thomas,

vielen Dank für Deine Hilfe.

ich wollte die Hintergrundfarbe in der Navigation von weiß auf eine andere Farbe ändern, leider wird dann die komplette Hintergrundfarbe innerhalb der Seite geändert.
Folgenden Eintrag habe ich geändert:
in der Datei reset.css Zeile 3 -> background:
lässt sich nicht irgendwo nur die HIntergrundfarbe des Navigation-Bereiches ändern??

danke

Hebsacker · July 9, 2012, 11:13am

klar - weil diese Angabe betrifft ja auch den Gesamthintergrund.

Kleiner Tipp - mit Firebug (Erweiterung für Firefox) findet man die relevanten Stellen in der CSS ganz leicht.

nickname · July 9, 2012, 11:37am

Die reset.css ist auch nicht die richtige Datei.
Richtig wäre die oxid.css. Dort in Zeile 1704 ein “background:wunschfarbe” hinzufügen für den Hintergrund der oberen Navigationsleiste.

manuel1 · July 9, 2012, 1:54pm

es haut perfekt hin. vielen Dank.

sportplatz-online.de · September 5, 2012, 3:12am

[QUOTE=nickname;94765]Die reset.css ist auch nicht die richtige Datei.
Richtig wäre die oxid.css. Dort in Zeile 1704 ein “background:wunschfarbe” hinzufügen für den Hintergrund der oberen Navigationsleiste.[/QUOTE]

tut mir leid das ich ma mehr infos brauche.

wo genau muss ich die background farbe für die navi-leiste in zeile 1704 angeben? dort is ja gar keine farbe angegeben, die man einfach anpassen könnte, darum wo muss ich das attribut background syntax technisch richtig setzen?

desweiteren möchte ich alles was im gesamten shop blau ist, also die ganzen boxen, buttons und so die farben ändern. wäre jemand von euch vielleicht so nett mir zu sagen die einzelnen punkte zu nennen wo ich das jeweils ändern muss. ich gehe mal davon aus das dies alles in der oxid.css zu finden ist oder?

und wie bekomme ich am besten den farbverlauf mit der neuen farbe hin? kann man das am hexcode irgendwie errechnen? ich brauche schönes sattes fußballplatz grasgrün;)

das oben in der Box hat sich ALLES erledigt. das habe ich alles selbst herausgefunden, weil ich endlich kapiert habe, wie firebug funktioniert!

Diese Frage bleibt:

ach und kann ich irgendwie die ecken abrunden?

huhu;)

ok nun ärgert mich firebug:D

ich möchte nun noch den rahmen der kategorie boxen anpassen. firebug liefert mir den befehl “border-color: -moz-use-text-color #58B3CA #58B3CA;” in oxid.css in line 726 zurück.

ABER dort befindet sich diese zeile nicht.

oh man und ich dachte jetzt schon ich hätte firebug verstanden:(

ok die obige box hat sich schon wieder erledigt! wenn die quellcodezeile nicht da ist, wo firebug sagt, dann einfach dort einfügen wo firebug sagt!
also ich hoffe das das grundsätzlich so richtig ist. in meinem fall hat das funktioniert:D

ABER, ABER, ABER

Eine frage bleibt noch immer:

ach und kann ich irgendwie die ecken abrunden?

Gruß
Maik

nickname · September 5, 2012, 7:40am

Guten Morgen Maik,
du schreibst aber schon immer recht lange Beitäge

Also deine Zeile 1706 in der oxid.css kann scheinbar nur im Firefox richtig angezeigt werden.
Mach das doch mal testweise so, sind auch abgerundete Ecken (in den meisten Browsern) mit dabei:


#navigation {clear:both; width:932px; padding: 4px;background:darkgrey; border-radius:8px}

sportplatz-online.de · September 5, 2012, 7:51am

[QUOTE=nickname;100720]Guten Morgen Maik,
du schreibst aber schon immer recht lange Beitäge :)[/QUOTE]

Guten morgen.

ja ich schreibe lieber ausführlich, damit es nicht zu unnötigen mißverständnissen kommt und die anderen user auch wissen worum es mir geht uns sich nicht die hälfte dazu denken müssen, was ich denn nun meine.

[QUOTE=nickname;100720]Also deine Zeile 1706 in der oxid.css kann scheinbar nur im Firefox richtig angezeigt werden.[/QUOTE]

Danke für den Hinweis, allerdings habe ich gerade in meinem IE feststellen dürfen, dass das Problem nicht nur auf Zeile 1706 beschränkt ist. Absolut alle änderen werden NICHT im IE angezeigt! Was kann ich da machen?

[QUOTE=nickname;100720]Mach das doch mal testweise so, sind auch abgerundete Ecken (in den meisten Browsern) mit dabei:


#navigation {clear:both; width:932px; padding: 4px;background:darkgrey; border-radius:8px}

[/QUOTE]

würdest du mir bitte sagen, wo genau ich das einbinden soll? also jetzt wo ich endlich den firebug soweit verstanden habe, liefert mir dieser die quellcode passagen, aber ohne das seh ich den wald vor lauter bäumen nicht oder die quellcodezeile vor lauter quelldateien nicht.

ich glaube ich unterschätze mich oft selbst. wieder einmal habe ich es doch selbst hinbekommen. runde ecken:D

aber was ich mit dem IE mache hab ich keine plan. da ich da nichtmal ne ahnung habe, glaube ich diesmal wirklich das ich das nicht selbst hinbekomme:D

bin über hilfe bezüglich IE anzeige dankbar.

Gruß
Maik

nickname · September 5, 2012, 7:58am

[QUOTE=sportplatz-online.de;100721]
würdest du mir bitte sagen, wo genau ich das einbinden soll? [/QUOTE]

Ja also grundsätzlich: Wenn irgendwo ein moz steht, bedeutet das “Mozilla” = für den Firefox.
Mein Code ist nur etwas CSS, du löscht deine Zeile 1706 aus der oxid.css raus und kopierst meine rein. Das ist alles

sportplatz-online.de · September 5, 2012, 8:01am

[QUOTE=nickname;100724]Ja also grundsätzlich: Wenn irgendwo ein moz steht, bedeutet das “Mozilla” = für den Firefox.
Mein Code ist nur etwas CSS, du löscht deine Zeile 1706 aus der oxid.css raus und kopierst meine rein. Das ist alles ;)[/QUOTE]

ah die info “moz” sauge ich begierig auf. also bedeutet das ich müsste in der gesamten oxid.css für jede änderung eine zusätzliche zeile für IE einbauen?

ah ich hätte da noch ne frage zu einer box. da es hier ja auch um boxen geht können wir das ja gleich hier mit erschlagen;)

in meinem shop (http://www.sportplatz-online.de/) möchte ich rechts die Tags-Box unter die PayPal-Box schieben. wie mache ich das? dazu finde ich keinen bezugspunkt in firebug. es wäre sehr nett, wenn mir das evtl. jemand anhand des firebugs erklärt wie ich das damit grundsätzlich rausfinde, damit ich das zukünftig selber weiß.

ich vermute der firebug angezeigte php-code muss dafür umsortiert werden. nun rechts im fenster style wird ja wunderbar angezeigt in welcher datei und zeile die einträge zu finden sind, aber beim html code finde ich absolut keine info wo ich den code finde (datei, zeile).

wenn das irgendwie mithilfe des firebugs zu ermitteln ist, wäre ich dankbar für eine entsprechende erklärung damit ich das in zukunft selbst finde.

danke.

Gruß
Maik

nickname · September 5, 2012, 8:06am

Nein. Wenn du einen einfachen Hintergrund so machst, wie ich geschrieben habe, gilt das für alle Browser. Willst du allerdings einen Farbverlauf, musst du für verschiedene Browser unterschiedliche CSS-Angaben machen.

sportplatz-online.de · September 5, 2012, 8:12am

[QUOTE=nickname;100726]Nein. Wenn du den Hintergrund so machst, wie ich geschrieben habe, gilt das für alle Browser.[/QUOTE]

achso ich habe jetzt nur das attribut “border-radius:8px” übernommen, da ich bei padding, width und background andere werte habe die auf mein design abgestimmt sind.

wovon ist die anzeige im IE denn genau abhängig? kann man das grundsätzlich an einem bestimmten punkt fest machen, weil das Problem is ja nicht nur bei zeile 1706, sondern bei allen design elementen im shop.

Edit:
wenn ich für verschiedene browser verschiedene css-angaben brauche, warum funktioniert dann das blaue ausgangsdesign mit farbverlauf? das war doch auch nur mit moz angegeben für firefox?

Gruß
Maik

nickname · September 5, 2012, 9:25am

[QUOTE=sportplatz-online.de;100727]
wenn ich für verschiedene browser verschiedene css-angaben brauche, warum funktioniert dann das blaue ausgangsdesign mit farbverlauf? das war doch auch nur mit moz angegeben für firefox?

Gruß
Maik[/QUOTE]

Nein nein, da übersiehst du etwas. Schau mal zB. hier:

/*** GRADIENTS -> ***/
/* Blue */
.gridView .titleBox,
.itemSlider .titleBlock,
.itemSlider .titleBlock:hover,
.gridView .priceBox,
.box h3,
.box h2,
.sectionHead,
.pageHead,
#currencies a.selected,
#languages a.selected,
.flyoutMenu a.selected,
.dropDown a.selected,
.thumbNav a.cur,
.thumbNav a.cur:hover,
.promoBox strong.promoPrice,
.itemSlider .prevItem span.slideBg,
.itemSlider .nextItem span.slideBg,
.specBox h3{
    background: #389cb4 url(../bg/svg/grad_blue.svg);
    background: -moz-linear-gradient(#adefff, #389cb4, #18778e);
    background: -ms-linear-gradient(#defff, #389cb4, #18778e);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #adefff), color-stop(50%, #389cb4), color-stop(100%, #18778e));
    background: -webkit-linear-gradient(#adefff, #389cb4, #18778e);
    background: -o-linear-gradient(#adefff, #389cb4, #18778e);
    background: linear-gradient(#adefff, #389cb4, #18778e);
}

Ich empfehle dir, erstmal ohne Farbverlauf zu arbeiten, das machts viel einfacher.

sportplatz-online.de · September 5, 2012, 6:00pm

[QUOTE=nickname;100734]Ich empfehle dir, erstmal ohne Farbverlauf zu arbeiten, das machts viel einfacher. ;)[/QUOTE]

Ich habe alle “gradients” zum navi background in “oxid.css” angepasst, aber keine wirkung im IE.

Gruß
Maik

nickname · September 5, 2012, 6:25pm

…kann ich nicht bestätigen, deine Zeile 1706 sieht immer noch so aus:

 #navigation {clear:both; background:-moz-linear-gradient(#00FF00, #00CC00, #006600) repeat scroll 0 0 transparent; width:940px; padding-top: 0px; border-radius:5px;}

Würde sie stattdessen wie folgt aussehen, dann würde es auch funktionieren:


#navigation {clear:both; 
    background: #389cb4 url(../bg/svg/grad_blue.svg);
    background: -moz-linear-gradient(#00FF00, #009900, #006600);
    background: -ms-linear-gradient(#00FF00, #009900, #006600);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(50%, #009900), color-stop(100%, #006600));
    background: -webkit-linear-gradient(#00FF00, #009900, #006600);
    background: -o-linear-gradient(#00FF00, #009900, #006600);
    background: linear-gradient(#00FF00, #009900, #006600); width:940px; padding-top: 0px; border-radius:5px;}

Aternativ kannst du aber auch ein

#navigation,

so ab Zeile 306 mit einfügen und den ganzen background aus Zeile 1706 entfernen.

sportplatz-online.de · September 6, 2012, 12:14am

[QUOTE=nickname;100795]…kann ich nicht bestätigen, deine Zeile 1706 sieht immer noch so aus:

 #navigation {clear:both; background:-moz-linear-gradient(#00FF00, #00CC00, #006600) repeat scroll 0 0 transparent; width:940px; padding-top: 0px; border-radius:5px;}

[/QUOTE]

du hast recht. aber es ist mir ein rätsel warum das so aussieht.

[QUOTE=nickname;100795]Würde sie stattdessen wie folgt aussehen, dann würde es auch funktionieren:


#navigation {clear:both; 
    background: #389cb4 url(../bg/svg/grad_blue.svg);
    background: -moz-linear-gradient(#00FF00, #009900, #006600);
    background: -ms-linear-gradient(#00FF00, #009900, #006600);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(50%, #009900), color-stop(100%, #006600));
    background: -webkit-linear-gradient(#00FF00, #009900, #006600);
    background: -o-linear-gradient(#00FF00, #009900, #006600);
    background: linear-gradient(#00FF00, #009900, #006600); width:940px; padding-top: 0px; border-radius:5px;}

[/QUOTE]

eigentlich sollte es so aussehen. dieser ganze block mit den verschiedenen “gradient” war gestern noch da. ich bin ja gestern zeile für zeile durchgegangen und und habe für jeden “gradient” die farben angepasst. ist mir echt ein rätsel warum da nun nur noch die eine zeile ist.

[QUOTE=nickname;100795]Aternativ kannst du aber auch ein

#navigation,

so ab Zeile 306 mit einfügen und den ganzen background aus Zeile 1706 entfernen.[/QUOTE]

ah ich habe gerade mal bei zeile 36 geguckt. da steht der ganze block auch mit den angepassten farben. also habe ich gestern die farben wohl in zeile 306 angepasst und nicht 1706:D

aber wenn der ganze block mit den ganzen “gradient” bei 36 drin steht und alle farben angepasst sind, dann müsste es doch gehen??

zum verständnis wie zeile 306 bei mir aussieht:

background: #389cb4 url(../bg/svg/grad_blue.svg);
    background: -moz-linear-gradient(#00FF00, #009900, #006600);
    background: -ms-linear-gradient(#00FF00, #009900, #006600);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(50%, #009900), color-stop(100%, #006600));
    background: -webkit-linear-gradient(#00FF00, #009900, #006600);
    background: -o-linear-gradient(#00FF00, #009900, #006600);
    background: linear-gradient(#00FF00, #009900, #006600);

gruß
Maik

nickname · September 6, 2012, 7:08am

Guten Morgen Maik,

also wie deine oxid.css aussieht, musst du hier nicht posten, denn das hab ich mir auf deiner Seite angesehen. Dadurch auch meine exakten Zeilenangaben mit den Änderungsvorschlägen.
Setze meine Vorschläge erstmal um, dann funktioniert es auch
Momentan sieht deine Zeile 1706 immer noch so aus:

#navigation {clear:both; background:-moz-linear-gradient(#00FF00, #00CC00, #006600) repeat scroll 0 0 transparent; width:940px; padding-top: 0px; border-radius:5px;}