Navigationsleiste farblich verändern

Hallo nemessis,

bei mir in Producer- und Stripe-Layouts funktioniert es mit zusätzlichem CSS so:

<style>
.navbar ul.nav li:nth-child(1) > a {
color: #ffffff;
background-color: #000000;
border-top: 2px solid #5FB22B;
border-bottom: 2px solid #5FB22B;
}
.navbar ul.nav li:nth-child(2) > a {
color: #FFFF00;
background-clor: #00FF00;
border-top: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
}
.navbar ul.nav li:nth-child(3) > a {
color: #000000;
background-color: #FF0000;
border-top: 0px solid #5FB22B;
border-bottom: 0px solid #5FB22B;
}
</style>

Der Code ist beliebig erweiterbar, wird aber auch in die Unternavigations ("Klappmenü") übernommen.

Hierfür müsste dann der "Unternavi-CSS-Code" angepasst werden, um das zu verhindern, wenn es nicht gewünscht wird.

Hoffe, es funktioniert auch bei Dir.

Herzliche Grüße

Sunny

Bei "Einstellungen" -> "CSS".

Dann schauen was passiert, also, wie es aussieht, Farben anpassen und ein bisschen ausprobieren. Ist kein "Rundum-Sorglos-Paket" sondern "Hilfe zur Selbsthilfe".

Viel Spass.

Kein Wunder. Solcher CSS Code ist Layoutabhängig, solche Details verraten Sie uns aber grundsätzlich nie

Welches Layout nutzt Du denn? Es funktiniert in Producer und Stripe, in Business 13 und 14.

So sieht es bei mir aus:

[Blockierte Grafik: http://s663564760.online.de/navileiste-farbig.jpg]

Moin,

du kannst es noch 10x versuchen. Wenn der obige Code nicht zum Layout passt, dann wirst da keinen Erfolg haben ...

Dat steht bei Dir für den aktiven Menü-Eintrag in der bundle.css:

ul.mainmenu a.topmenuactive {
    color: #fff;
    background: #FF7B02;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 0;
    background-clip: padding-box;
    box-shadow: inset 0 20px 20px 0 rgba(0,0,0,0.2), 0px 5px 10px 0 rgba(0,0,0,0.5);
}

Von allein ist es da nicht reingekommen.

Die ul Auflistung müsstest Du dann via CSS durch iterieren. Dat erste Elemente kannste z.B. mit ul > :first-child ermitteln. Bzw. einzelne Elemente via ul > :nth-child(1) fürs erste Unterelement, ul > :nth-child(2) für 2. usw.

Wenn Du beides kombinierst, dann sollte in etwa sowas rauskommen und der zweite Menü-Eintrag sollte blau werden, wenn er aktiv wird:

ul.mainmenu > :nth-child(2) a.topmenuactive {
    color: #fff;
    background: #027BFF;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 0;
    background-clip: padding-box;
    box-shadow: inset 0 20px 20px 0 rgba(0,0,0,0.2), 0px 5px 10px 0 rgba(0,0,0,0.5);
}

Zitat von nemessis

ich wollte alle Button unterschiedlich bei inaktiv machen...

Macht in meinen Augen keinen Sinn, da der farbliche Button ja gerade den aktiven Menü-Punkt kennzeichnet. Wenn Sie es dennoch probieren mögen, dann versuchen sie beim CSS Selektor einfach mal hinter dem a das .topmenuactive wegzulassen. Ist aber ungetestet.

Dieser Thread ist mal wieder ein gutes Beispiel dafür, wieviel Zeit verschwendet wurde, bis man auf Basis der gegebenen Informationen am eigentlichen Punkt – nämlich der Hilfestellung – angelangt ist. Gerade bei Nutzern, die nicht erst seit gestern hier aktiv sind, macht mich das etwas betrübt. Wir investieren hier viel Zeit, um Ihnen kostenlose Hilfe zu bieten. Bitte investieren Sie beim Verfassen Ihrer Anfrage auch genügend Zeit!

Aus diesem Grunde mal wieder der Hinweis, wie man eine brauchbare Anfrage hier verfassen sollte:

Wenn Sie Fehler / Probleme melden oder Fragen haben, seien Sie bitte so spezifisch wie möglich. "Funktioniert nicht" ist für uns sehr schwer einzuschätzen. Wir wissen nicht, was Sie erwarten haben und was Sie getan haben, um das Erwartete zu erreichen. Es ist daher notwendig, alles genau zu beschreiben:

1. Welche Zeta Producer Version nutzen Sie?
2. Welches Layout nutzen Sie? Z.B.: "Smart Responsive" (Hilfe > Programminfo > Support-Informationen)
3. Was möchten Sie erreichen?
4. Was haben Sie gemacht? Beschreiben Sie Schritt für Schritt, welche Vorgänge Sie in Zeta Producer durchgeführt haben.
5. Welches Resultat haben Sie erwartet?
6. Was ist stattdessen passiert?
7. Falls etwas falsch aussieht, zeigen Sie uns das anhand eines Screenshot und teilen Sie uns die URL der Website mit.
8. Falls Sie eine Fehlermeldung erhalten, nutzen Sie die im Fehlerdialog enthaltene Option uns den Fehler zu berichten (unten links auf den Pfeil klicken). Alternativ klicken Sie die Option "Fehlerdetails" an posten den Text hier. Nur so erhalten wir genügend Details zur Fehlermeldung.

Zitat von nemessis

ich wollte alle Button unterschiedlich bei inaktiv machen...

Hast Du es nun hinbekommen? Falls nicht, hier ein kleiner Denkanstoß:

ul.mainmenu a {
    color: #fff;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 0;
    background-clip: padding-box;
    box-shadow: inset 0 20px 20px 0 rgba(0,0,0,0.2), 0px 5px 10px 0 rgba(0,0,0,0.5);
}    
ul.mainmenu > :nth-child(1) a {
    background: #FF7B02;
}
ul.mainmenu > :nth-child(2) a {
    background: #027BFF;
}
ul.mainmenu > :nth-child(3) a {
    background: #02FF7B;
}
ul.mainmenu > :nth-child(4) a {
    background: #FF027B;
}

Usw. usw.