Twentyfourteen CSS Anpassung

Detlef2

Ich habe schon sehr lange das Theme twenty fourteen im Einsatz und verzweifle gerade an der Suche nach der css Klasse die in den Buttons für die grüne Farbe zuständig ist...

Das grün ist z.b. auch in den "bearbeiten" Links im Backend und als Auswahlfarbe für die Gutenberg Farbpalette vorhanden. Somit denke ich, dass es eine übergeordnete Klasse ist...
Meine Seite, es geht um die zwei Buttons erstes und letztes drittel der Seite.

Danke fürs schauen!

Hatte ich vergessen zu erwähnen, habe ein Child Theme im Einsatz...

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

SuMu

der lange grüne Button
div.wp-block-button:nth-child(13) > a:nth-child(1)
geh mal im Browser am Pc z. B Firefox, auf den Button, rechte Maustaste => Element untersuchen

Sailor56

Code

a.wp-block-button__link {
  background-color: 'deine Farbe';
}
a.wp-block-button__link:hover {
  background-color: 'deine Farbe';
}

Detlef2

Zitat von Sailor56

Code

a.wp-block-button__link {
  background-color: 'deine Farbe';
}
a.wp-block-button__link:hover {
  background-color: 'deine Farbe';
}

Danke Sailor56, hat geklappt!!!
Auf der Seite weiter unten ist nochmal ein Button mit grünem Rand, der beim drüberfahren ganz grün wird.
Ich habe folgendes in die style.css kopiert,

Code

.is-style-outline .wp-block-button__link:not(.has-text-color) {
    color: #c1c1c1;
}
.wp-block-button__link:hover, .wp-block-button__link:focus, .is-style-outline .wp-block-button__link:not(.has-text-color):hover, .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
    background-color: #512aa6;
    color: #fff;
}

die CSS Klasse wird aber durch irgendeine übergeordnete Klasse (ich irre mich wahrscheinlich) überschrieben.
Siehe Anhang...

Sailor56

Du solltest niemals in der style.css solche Dinge ändern, sondern immer das 'zusätzliche CSS' im Customizer nutzen.
Dann solltest du dein autoptimize Plugin deaktivieren. zumindestens so lange, bis deine Änderungen so wirken.
Dieser Code funktioniert bei mir für den 2. Button:

Code

.is-style-outline a.wp-block-button__link:not(.has-text-color) {
      background-color: 'deine Farbe';
      color: 'deine Farbe';
}
.is-style-outline a.wp-block-button__link:not(.has-text-color):hover {
  background-color:'deine Farbe';
    color: 'deine Farbe';
}

sollte das auch nicht wirken, dann kannst du noch ein !important; zu der jeweiligen Formatierung hinzufügen... etwa so:

CSS

.is-style-outline a.wp-block-button__link:not(.has-text-color) {
      background-color: 'deine Farbe' !important;
      color: 'deine Farbe' !important;
}
.is-style-outline a.wp-block-button__link:not(.has-text-color):hover {
  background-color:'deine Farbe' !important;
    color: 'deine Farbe' !important;
}

Detlef2

Danke Sailor56, hat geklappt!!!
Ich hatte es vor vielen Jahren so "gelernt", dass ich eine style.css im Child Theme angelegt habe und dort die Änderungen vorgenommen habe.
Das mit dem zusätzlichen CSS im Cosumizer habe ich auch gesehen, dachte aber das ich in der Child Theme style.css alles auf einem "Haufen" habe...

Lieben Dank für deine Zeit, hast mir wirklich sehr geholfen!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twentyfourteen CSS Anpassung

Jetzt mitmachen!