Theme Twenty Twelve - Farbe der Navigationsbuttons ändern

Knightfire

Hallo Zusammen,

habe für das o.g. Theme versucht, die Navigation in einer anderen Farbe darzustellen. Finde dazu aber nichts in der CSS. Suche ich falsch, oder woran kann das liegen? Kann man diese nicht ändern?

Gruß!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Hi,

ich glaube dieser Block in der style.css des Themes ist dafür zuständig.

CSS

.main-navigation .assistive-text:focus,.site .screen-reader-text:hover,
.site .screen-reader-text:active,
.site .screen-reader-text:focus {
    background: #fff;
    border: 2px solid #333;
    border-radius: 3px;
    clip: auto !important;
    color: #000;
    display: block;
    font-size: 12px;
    padding: 12px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100000; /* Above WP toolbar */
}

Alles anzeigen

Der Schwerpunkt bei dem du ansetzen musst ist die Klasse .main-navigation.
Wie man aber sieht werden noch andere Klassen angesprochen, also müsstest du die .main-navigation auslagern und ihr dann deine Wunschdefinition in Punkto Farben verpassen.
Eventuell reicht es aber auch schon, wenn du am ende der style.css dieses einfügst und die Farben nach deinem Wunsch anpasst.

Code

.main-navigation {
    background: #fff;
    border: 2px solid #333;
    color: #000;
}

Aber sei dir bewusst, das die Änderung bei einem Theme Update wieder weg ist, sofern du nicht mit einem Twenty Twelve Child Theme arbeitest.

Knightfire

Hallo. Hat beides nicht geholfen. Ich bekomme die Navigation nicht grün. Die Rahmen schon, notfalls den ganzen Hintergrund, aber nicht nur die Navigationspunkte. Gern hätte ich den aktiven Tab ja sogar noch in einer anderen Farbe. Ich glaube, das wird nix?

Azrael_0815

.main-navigation li a in styles.css

Knightfire

Hallo. Diesen Abschnitt gibt es mehrfach.

Unter:

/* Header */

finde ich:

.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;

und unter

/* Minimum width of 600 pixels. */

Finde ich:

.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover,
.main-navigation li a:focus {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation li ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
border-left: 0;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {
background: #e3e3e3;
color: #444;

Wo bin ich richtig?

misaf

Wie genau soll nun die Menuleiste ausschauen? Hintergrund? Textfarbe etc. ... Dann kann man sicher besser helfen!

Diese einzelnen Abschnitte aus der CSS haben verschiedene Bedeutungen!

.main-navigation li ul li a steht bspw. für die Untermenupunkte. dafür steht das li ul li a.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme Twenty Twelve - Farbe der Navigationsbuttons ändern

Jetzt mitmachen!