Farbe der Buttons

Hallo,

das kannst du so hinbekommen:

1: Im jeweiligen Widget "Button" unten links auf den "Mixer" (Weitere Einstellungen) klicken, und dann rechts auf das blaue "Mehr".
2: Nun im Feld "Inline-CSS" z.B. folgendes eingeben: color: #00ff00; background: #ffffff; border-color: #ff0000
3: Das ganze dann mit 2*OK bestätigen.

color=Schriftfarbe
background= Farbe des Buttons
border-color= Farbe der Umrandung.

Hallo Jochen,

kannst du mir kurz weiter helfen:


https://www.paprika-country.de/Band/band.html

color=Schriftfarbe
background= Farbe des Buttons

es wird die Color Schriftfarbe nicht genommen?

lg Martin

Hallo Martin,

ja das kann ich nachvollziehen.
Das liegt an deinem verwendeten Layout.
In diesem werden leider teilweise die CSS-Anweisungen ignoriert.
In einem anderen Layout hingegen, geht das ganze einwandfrei.

Das ist mir vor einiger Zeit schonmal aufgefallen, das in bestimmten Layouts in den unterschiedlichsten Widgets die manuell eingefügten CSS-Anweisungen,
beim Inline-CSS einfach ignoriert werden.

Hab das damals aber nicht mehr weiter verfolgt, und mir dann anders eine Lösung dafür zurechtgebastelt.
Das würde auch in deinem Fall gehen, aber davon seh ich jetzt ab, da dies auch über das Inline-CSS gehen sollte.

Da musst du dich mal auf morgen gedulden, was Zeta selbst dazu sagt.

@sT. und @sseiz: Bitte mal überprüfen, warum dem so ist. Danke.
(!important - Hilft in den fällen auch nicht).

Danke Dir Jochen !

@sseiz @sT.

können sie mir da weiter helfen?

lg Martin

Hallo,

wenn CSS im Inline-CSS ignoriert wird, liegt es daran, dass anderes CSS eine höhere Spezifität hat. Das kann man normalerweise mit einem "!important" überschreiben, das ist aber in inline-css nicht erlaubt. In solchen Fällen müssten Sie per INLINE-Feld einfach dem Button einen eigenen Klassennamen vergeben und diesen dann per Projekt-CSS entsprechend stylen.

Die mag für manchen jetzt wie Latein klingen, aber wer solche Anpassungen unbedingt braucht muss da aktuell durch

Hallo Martin,

folgende 2 einfache (und schnelle) Möglichkeiten nun für dich:

1: Wenn dir nur eine andere "Randfarbe" für die Buttons reichen sollte, dann kannst du das unter Inline-CSS mitborder-color: #000000; erreichen.
Das wird dann auch in deinem verwendeten Layout so übernommen.

2: Oder du schaust du mal die "Buttons" auf Marios-Seite an: https://www.zella.de/code/button.html
Suchst dir davon einen aus, und passt diesen deinen Wünschen an.
Dabei dann halt fortlaufende ".button1,2,3,4," für jeden (unterschiedlichen) Button erstellen und diese dann im Code auch so ändern.
---------------------------------

Zitat von sseiz

Das kann man normalerweise mit einem "!important" überschreiben, das ist aber in inline-css nicht erlaubt.

Ah, mal wieder was dazu gelernt

Ich glaube, da hab ich mist erzählt, was "!important" in Inline-CSS anbelangt. Scheint mir doch erlaubt zu sein. Muss ich verwechselt haben.

Versuchen Sie also, nach der Farbangabe jeweils noch ein "!important" anzugeben, also z.B. so: color: #00ff00 !important; background: #ffffff !important; border-color: #ff0000 !important;

Zitat von sseiz

Ich glaube, da hab ich mist erzählt, was "!important" in Inline-CSS anbelangt. Scheint mir doch erlaubt zu sein. Muss ich verwechselt haben.

Ah, OK

Zitat von sseiz

Versuchen Sie also, nach der Farbangabe jeweils noch ein "!important" anzugeben, also z.B. so: color: #00ff00 !important; background: #ffffff !important; border-color: #ff0000 !important;

Ja, das scheint in dem Layout so zu greifen.

Danke das hat geholfen.

gibt es auch für Maus Hoffer auch noch parameter?, weil diese einstellung jetzt nicht mehr greifen?

lg Martin

Hallo Martin,

ich kenne jetzt keinen "Befehl" für die Farbe des Hover-Effektes für das "Inline-CSS".
Ich glaube das geht auch so gar nicht, das dies ja nicht nur eine Simple Anweisung ist, sonder etwas was "abgearbeitet" werden muss (also den Mouse-Over).
Vermutlich wirst du da nicht drumrum kommen, dir dann eine individuelle Lösung dafür zurecht zu basteln (CSS-Klasse).
Als Anhaltspunkt, schau dir das vom Mario dazu an.

Oder @sseiz und @sT. gibt es da was direktes für das Inline-CSS?

Zitat von Jochen

Oder Stefan S und Steffen T. gibt es da was direktes für das Inline-CSS?

Hallo zusammen,

Stefan S und Steffen T. ,

ich wollte fragen :

Zitat von whe-king

gibt es auch für Maus Hoffer auch noch parameter?, weil diese einstellung jetzt nicht mehr greifen?

lg Martin

Für Mouse-Over muss eine CSS-Klasse zugewiesen werden. Mit Hilfe dieser Klasse kann man dann den Hover-Status definieren.

Du kannst das so umsetzen.

Gehe zu Einstellungen > CSS und kopiere dort folgendes hinein:

<style>.button1 {color: #fff !important;font-weight: bold !important;background: red !important;border-color: red !important;transition: all 0.3s ease;}.button1:hover {color: red !important;background: #f6f6f6 !important;}.button2 {color: #fff !important;font-weight: bold !important;background: blue !important;border-color: blue !important;transition: all 0.3s ease;}.button2:hover {color: blue !important;background: #f6f6f6 !important;}
</style>

Nun fügst du wie gewohnt das Widget Button ein. Hier trägst du unter CSS-Klasse button1 bzw. button2 ein.

Wenn das funktioniert kannst du im CSS die Farben anpassen.

PS: Da der Code hier im neuen Forum noch nicht optimal dargestellt wird habe ich das für dich hochgeladen. LINK