# Farbe der Top Navigation ändern

**URL:** <https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499>\
**Category:** Shopware 3.5\
**Tags:** templates--design\
**Created:** [17. April 2011 um 15:55 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499 "2011-04-17T15:55:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [17. April 2011 um 15:55 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/1 "2011-04-17T15:55:31Z")

</div>

Hallo zusammen, finde zum Thema Top Navigation immer nur ein “transparent” in der CSS Datei. Kann der obere Balken nur durch eine neue Grafik eingefärbt werden? Wie sieht`s dann allerdings mit den verschiedenen Farbtönen aus, sprich Kategorie gewählt = dunkler. Gruß Jens

---

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [6. Mai 2011 um 14:11 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/2 "2011-05-06T14:11:22Z")

</div>

Hat hier niemand eine Idee!?

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [6. Mai 2011 um 14:23 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/3 "2011-05-06T14:23:38Z")

</div>

Wenn ich deine Frage verstehen würde, hätte ich evtl eine Idee 😉 Du kannst die Navi doch per CSS so gestalten wie du willst. Hintergrundgrafik, feste Farbe, Transparent etc. Was meinst du genau?

---

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [6. Mai 2011 um 14:44 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/4 "2011-05-06T14:44:04Z")

</div>

Finde die entsprechende Stelle in der CSS leider nicht. Eigentlich müsste sich doch etwas ändern, wenn ich hier die Werte ändere, oder!? #topbar input {color: #666;border-color:#555;}

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [6. Mai 2011 um 14:52 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/5 "2011-05-06T14:52:54Z")

</div>

Ohne das Template zu kennen bzw. einen Link zur Seite kann ich dir nicht weiterhelfen. Ich kenne ja die CSS Datei nicht 😉

---

<div class="post-metadata">

**Author:** ![Porter](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@Porter](https://forum.shopware.com/u/Porter)\
**Post date:** [6. Mai 2011 um 14:54 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/6 "2011-05-06T14:54:30Z")

</div>

Die Farben der Top-Navi sind in den CSS Dateien hinterlegt. Such mal nach #mainNavigation…müsste in der colors.css so um Zeile 65 und in den Untertemplates in der black, blue etc. css so um die Zeile 71 sein…

---

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [6. Mai 2011 um 15:05 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/7 "2011-05-06T15:05:49Z")

</div>

Hier der Auszug aus der css Datei: /\* SHOP NAVIGATION ------------------------ \*/ #topbar input {color: #666;border-color:#555;} #topbar input:hover {border:0 none; } #topbar .currency {border-color: #c9c9c9} #topbar select {color: #666;background-color: transparent;} .my\_options a {color: #666} #mainNavigation {background-color: transparent;} #mainNavigation a {color:#444;border-left-color: #aaaaaa; border-right: 1px solid #fff;} #mainNavigation .dropactive:hover a {color: #000000;} #mainNavigation ul li a.active {color: #fff;border-right: 1px solid #c4c4c4;border-left: 1px solid #b5b5b5; } #mainNavigation ul li a.first {border-left: 0 none;} Theoretisch müsste ich doch nur die Zeile #topbar input {color: #666;border-color:#555;} anpassen, oder!?

---

<div class="post-metadata">

**Author:** ![Porter](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@Porter](https://forum.shopware.com/u/Porter)\
**Post date:** [6. Mai 2011 um 15:15 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/8 "2011-05-06T15:15:59Z")

</div>

Wenn Du nur die Hintergrundfarbe der oberen Navi-Zeile ändern willst wäre es wohl eher (hier als beispiel Template gray / gray.css) [quote]#mainNavigation {background-color: #7c7c7c;}[/quote] Die Farbe der unteren Navi-Zeile (die mit dem Default-Suchfeld) findest Du in der gleichen css unter Zeile 397 [quote]div#searchcontainer {background-color:#e9e9e9;}[/quote]

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [6. Mai 2011 um 15:22 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/9 "2011-05-06T15:22:43Z")

</div>

[quote=„user\_one“]Hier der Auszug aus der css Datei: /\* SHOP NAVIGATION ------------------------ \*/ #topbar input {color: #666;border-color:#555;} #topbar input:hover {border:0 none; } #topbar .currency {border-color: #c9c9c9} #topbar select {color: #666;background-color: transparent;} .my\_options a {color: #666} #mainNavigation {background-color: transparent;} #mainNavigation a {color:#444;border-left-color: #aaaaaa; border-right: 1px solid #fff;} #mainNavigation .dropactive:hover a {color: #000000;} #mainNavigation ul li a.active {color: #fff;border-right: 1px solid #c4c4c4;border-left: 1px solid #b5b5b5; } #mainNavigation ul li a.first {border-left: 0 none;} Theoretisch müsste ich doch nur die Zeile #topbar input {color: #666;border-color:#555;} anpassen, oder!?[/quote] topbar input wäre das Formularfeld in der Navi 😉 #mainNavigation {background-color: #Hier der Farbcode;}

---

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [6. Mai 2011 um 15:24 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/10 "2011-05-06T15:24:26Z")

</div>

Habe jetzt aus #mainNavigation {background-color: transparent;} #mainNavigation {background-color: #7c7c7c;} gemacht und den Cache gelöscht, jedoch ohne Veränderung

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [6. Mai 2011 um 15:46 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/11 "2011-05-06T15:46:50Z")

</div>

Der CSS Code ist auf jeden Fall richtig. In welcher Datei hast du das nun gemacht? Ich empfehle dir mit Firefox und Firebug zu arbeiten, da kannst du deine Änderungen direkt im Browser machen und siehst sofort die Auswirkungen.

---

<div class="post-metadata">

**Author:** ![user\_one](https://avatars.discourse-cdn.com/v4/letter/u/e480ec/32.png) [@user\_one](https://forum.shopware.com/u/user_one)\
**Post date:** [6. Mai 2011 um 16:31 UTC](https://forum.shopware.com/t/farbe-der-top-navigation-andern/2499/12 "2011-05-06T16:31:53Z")

</div>

Endlich gfeunden, es wurden bereits Anpassungen vorgenommen, allerdings wurden diese ganz ans Ende der CSS gesetzt.