Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme

[inno]

Hallo Tommy,
wie kann ich die Schriftfarbe im Button bei einem Header aus dem Mobirise5 Theme anpassen?
Ist es auch möglich die Farbe beim Mouseover anzupassen?
Grüße

[Tommy Herrmann]

Moin,

ja - da müsstest Du dann aber schon genau den Button zeigen, den Du meinst.

Es gibt ja jede Menge unterschiedlicher Buttons in jeder Menge unterschiedlicher Farben, die alle ihre eigene CSS haben. Das ebenso auch bei Hover (Mausüber). Natürlich kann man in beiden Fällen einfach eine andere Farbe angeben.

Beispiel meiner Homepage im Header-Block:

https://www.mobirise-tutorials.com/

Dort verwendet Mobirise diese CSS-Klassen, also:

class="btn"
+
class="btn-white-outline"

zusammen gefasst sieht das dann so aus:

class="btn btn-white-outline"

Das sieht dann in diesem Beispiel so aus. Dort ist jeweils das Element "color" für die Farbe zuständig.

Code: Alles auswählen

.btn-white-outline,
.btn-white-outline:active {
  background-color: transparent !important;
  border-color: #fafafa;
  color: #fafafa;
}

und für "hover":

Code: Alles auswählen

.btn-white-outline:hover,
.btn-white-outline:focus,
.btn-white-outline.focus,
.btn-white-outline.active {
  color: #cfcfcf !important;
  background-color: transparent!important;
  border-color: #cfcfcf !important;
  box-shadow: none!important;
}

Wolltest Du nun z.B. die Farbe Rot (#ff0000) in der class="btn-white-outline", dann änderst Du eben "color" entsprechend.

Diesen Code könntest Du dann z.B. in den Bereich CSS-Editor des Blocks eintragen.

Code: Alles auswählen

.btn-white-outline,
.btn-white-outline:active {
   color: #ff0000 !important;
}

Entsprechend kannst Du das bei hover auch so machen.

[inno]

Hi Tommy, das hilft mir leider nicht weiter!
wie geschrieben geht es um den Header aus dem Mobirise Theme 5. Das Bild mit dem Wasser, wie im Screenshot.
Hast du hier vielleicht eine Lösung.
Danke und viele Grüße

[Tommy Herrmann]

Das ist doch genau der Header-Block, den auch ich auf meiner Homepage verwende.

[inno]

Dann muss ich nochmal schauen. Danke dir!

[Tommy Herrmann]

Deswegen sagte ich ja, man müsste schon genau den Button mit der Class sehen, den Du verwenden willst.

Je nachdem welche Farbe und Art der Button zeigt, ist auch die Class eine andere.

In diesem Fall der weiße Button mit class="btn-white".


Das wäre dann mal als Beispiel bei diesem Block so mit roter Schriftfarbe:

Code: Alles auswählen

.btn-white, .btn-white:active {
  color: #ff0000 !important;
}

[inno]

Funktioniert! Danke!
Wie ich mache ich das bei der Buttonfarbe beim Hover?

[Tommy Herrmann]

Gewitter ohne Ende - musst die Dachrinne auf 20 Meter sauber machen, kam rüber wie die Niagara-Fälle


Na genauso, da sind nun auch noch (außer "hover") diese anderen Elemente, wie "focus", dran geschrieben. Sollte man dann wahrscheinlich auch so übernehmen.

So wechselt die Schriffarbe bei Hover in Blau.

Code: Alles auswählen

.btn-white:hover,
.btn-white:focus,
.btn-white.focus,
.btn-white.active {
  color: #0000FF !important;
}

Also dann alles zusammen so in den Bereich "CSS Editor" schreiben.

Code: Alles auswählen

.btn-white, .btn-white:active {
  color: #ff0000 !important;
}

.btn-white:hover, .btn-white:focus, .btn-white.focus, .btn-white.active {
  color: #0000FF !important;
}

Natürlich könnte man auch noch Hintergrund, Schriftgröße und anderes anpassen.

[inno]

Hi Tommy, danke funktioniert! Was muss ich noch anfügen damit die Farbe vom Button beim HOVR geändert wird?

[Tommy Herrmann]

Moin,

die Farbe vom Button wird ja durch eine Hintergrundfarbe bestimmt.

Also beim "hover" (Mausüber) dann zum Beispiel noch die Hintergrundfarbe (background-color) nach belieben ändern:


background-color: #e2e2e2 !important;

Code: Alles auswählen

.btn-white:hover, .btn-white:focus, .btn-white.focus, .btn-white.active {
  color: #0000FF !important;
  background-color: #e2e2e2 !important;
}

[inno]

Besten Dank