Seite 1 von 1
Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 11:47
von 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
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 12:59
von 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.
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 13:07
von 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
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 13:10
von Tommy Herrmann
Das ist doch genau der Header-Block, den auch ich auf meiner Homepage verwende.
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 13:13
von inno
Dann muss ich nochmal schauen. Danke dir!
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 13:18
von 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;
}
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 13:51
von inno
Funktioniert! Danke!
Wie ich mache ich das bei der Buttonfarbe beim Hover?
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Fr 12. Jul 2024, 14:31
von 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.
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Mo 15. Jul 2024, 11:09
von inno
Hi Tommy, danke funktioniert! Was muss ich noch anfügen damit die Farbe vom Button beim HOVR geändert wird?
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Mo 15. Jul 2024, 11:41
von 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;
}
Re: Schriftfarbe im Button anpassen / Header aus Mobirise5 Theme
Verfasst: Mo 15. Jul 2024, 11:48
von inno
Besten Dank