Menüs in protostar ändern

derkps · 31. August 2020

Hallo,

ich benutze hier protostar und möchte die Hintergründe des Menüs ändern, insbesondere die Blaufärbung bei den Submenüs.

Ich finde die Klassen aber nicht mehr.

Probiert habe ich mit allem was .nv oder .navigation heißt.

Hat jemand eine Idee?

vG

addi · 31. August 2020

Suchst du Einblicke? Wenn du mit CSS anfängst nutze doch den Inspektor (der Webdeveloper Tools) im Mozilla Firefox oder Google Chrome.

Rechte Maustaste an einer Stelle der Webseite und im dann erscheinenden Kontextmenü auf "Element untersuchen" (FF) oder "Untersuchen" (Chrome) klicken – schon die Tags abklappern und ihre Attribute sehen, einschließlich der darauf liegenden Klassen.

derkps · 1. September 2020

Gute Idee, Danke!

chr-hl · 1. September 2020

Hallo,

anschließende CSS-Ergänzungen solten in der user.css eingetragen werden.

Sofern diese Datei noch nicht existiert, ist sie im Verzeichnis css des Templates zu erstellen. Sie wird dann automatisch eingebunden.

Christian

derkps · 1. September 2020

Hallo,

ich bin immer noch auf dieser Seite und kann mittels Firefox-Inpector die Klassen in protostar identifizieren, mit denen ich die Navigation umfärben kann.
Ausnahme: die obersten Elemente nach Klick. Sie färben sich dunkelgrau.

Im Inpector kann ich nur Einträge unter 'inline: 26' aber keine .class finden.

Die Farben #9e9e9e; bzw. rgb(158, 158, 158); sind template.css nicht aufgeführt.

Das verstehe ich nicht! Irgend wo muss der Background nach Klick doch herkommen.

Vielleicht kann mich jemand schlauer machen.

vG

christine2 · 1. September 2020

Hallo,

schau mal in den Seitenquelltext, da siehst Du es:

Code

body.site {
        border-top: 3px solid #9e9e9e;
        background-color: #ffffff;
    }
    a {
        color: #9e9e9e;
    }
    .nav-list > .active > a,
    .nav-list > .active > a:hover,
    .dropdown-menu li > a:hover,
    .dropdown-menu .active > a,
    .dropdown-menu .active > a:hover,
    .nav-pills > .active > a,
    .nav-pills > .active > a:hover,
    .btn-primary {
        background: #9e9e9e;
    }

Alles anzeigen

Kommt von den Einstellungen: Erweiterungen > Templates > Stile > Erweitert:

In der user.css kannst Du gewünschten Segmente einsetzen & damit überschreiben.

Änderst Du es in der template.css, geht es nur mit einem: !important; da es als Inline segment (siehe oben) hart codiert ist. Aber wie gesagt: user.css, aber diese hast Du ja eh schon.

Liebe Grüße

Christine

Ergänzung: Sehe gerade, dass Du in der user.css in der letzten Zeile 188 das da hast: ) statt: }

Heißt: Wenn Du dort jetzt Codes reinsetzt, werden diese nicht greifen. Also zuerst das ausbessern.

addi · 1. September 2020

Schon mal in den Template Einstellungen (Template Style) geschaut? Upps, zu spät...

derkps · 2. September 2020

Oha, ganz andere Baustelle

Danke für den Hinweis!

Blöd ist aber, dass die Schriftfarbe der inaktiven Btn die gleiche Farbe ist wie die Farbe des aktiven Btn (Template-Farbe). Eigentlich wollte ihr etwas hellere Farben einsetzen. Die sieht man aber kaum.
Wahrscheinlich wird man das auch nicht (inline) über user.css ändern.

Den Hinweis zu 'important' verstehe ich nicht. Wie/wo könnte ich das denn anwenden?

Zeile 180 in user.css. habe ich korrigiert.

Ach addi: Nicht ärgern.
Dabei sein ist alles. Der Wille zählt.

vG

I got it!

Ich habe in user.css eine Zeile ergänzt

CSS

/*3013*/ /*Hauptmenü*/
.nav-pills > li > a { 
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 2px;
    margin-bottom: 2px; /*Abstand Hauptmenü-Submenü*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #000 !important;
}

Alles anzeigen