Alle Buttons gleichzeitig ansprechen

  • Huhu,

    Ich würde gerne allen meine Buttons im gesamten Forum den selben Border-Radius (7px) und die selbe Border-width zuweisen. Auch denen bei den Benutzereinstellungen und Co.
    Kann man das mit einer einzigen oder so wenig wie möglichen CSS-Klassen oder Ähnlichem?

    Wenn man nur..

    Code
    * {
    CODE
    }

    .. eingibt, dann werden auch die Ecken der Container rund, das möchte ich nicht. :/ Komme da einfach nicht dahinter...

    Bitte um Hilfe :)

    Liebe Grüße!

  • Ich würde die LESS-Variablen nehmen:

    @wcfSmallButtonBorderRadius:7px;
    @wcfButtonBorderRadius:7px;

    Wobei ich jetzt aber nicht weiss was SmallButtons sind und wo die Variable zum Einsatz kommt :|

  • Das funktioniert auch nur, wenn sonst nichts dazwischenfunkt - z.B. ein Stil, der standardmäßig alles eckig macht und dazu nicht entsprechende Variablen nutzt.
    An sich hast du aber Recht, das müsste funktionieren.

    Ich tippe auf die ButtonGroups in z.B. Beiträgen. Da wird immerhin die Klasse .smallButtons verwendet. ;)

  • Schon mal ganz logisch mit

    CSS
    .button { border-radius: 6px; }


    versucht?

    ja, das hab ich schon versucht - damit werden die Meisten Buttons so, wie sie sollen. Allerdings nicht die in den Eintellungen :(

    Ich würde die LESS-Variablen nehmen:

    @wcfSmallButtonBorderRadius:7px;
    @wcfButtonBorderRadius:7px;

    Wobei ich jetzt aber nicht weiss was SmallButtons sind und wo die Variable zum Einsatz kommt :|

    Kann es sein, dass die LESSS Variablen nur funktionieren, wenn man den "Blue Temptation" Style als Basis verwendet? Ich hab als Vorlage den weißen Standard Style genommen

    auf

    Code
    .smallButtons

    und

    Code
    .largeButtons

    reagiert das Forum leider irgendwie gar nicht :O

  • @wcfButtonBorderRadius sollte alle großen Buttons abrunden auch in den Einstellungen:

    Bzw. welche genau meinst du?

    Ich tippe auf die ButtonGroups in z.B. Beiträgen. Da wird immerhin die Klasse .smallButtons verwendet.


    Dachte ich auch, aber da wird nichts abgerundet.

  • @wcfButtonBorderRadius sollte alle großen Buttons abrunden auch in den Einstellungen:

    Bzw. welche genau meinst du?


    Dachte ich auch, aber da wird nichts abgerundet.

    Meinte eh die Buttons :) Mit dem Code funktioniert es, nur die ganz kleinen werden nicht rund, aber da spiele ich mich einfach noch ein wenig :)
    Das einzige Problem an der LESSS Variable ist, dass nun im Content-Bereich auch runde Ecken sind, siehe Screenshot - wie bekomme ich die denn wieder weg? Die sind nun leider auch in den Beiträgen drin

    Edit: Und wie bekomme ich nun einen 2px starken Rand um die Buttons?

    Danke erstmal :)

    Lg!

  • Dachte ich auch, aber da wird nichts abgerundet.


    Doch, der erste von links wird gerundet oder meinst du eine Änderung hat keine Auswirkungen?

    2px starken Rand um die Buttons


    border-width: 2px;

    dass nun im Content-Bereich auch runde Ecken sin


    Seltsam, dass er alles abrundet, wenn du explizit sagst, dass er alles abrunden soll.

    auf

    Code
    .smallButtons


    und

    Code
    .largeButtons


    reagiert das Forum leider irgendwie gar nicht :O

    CSS
    .smallButtons .button { bla }


    sollte theoretisch funktionieren.

  • Unter

    Code
    .largeButtons .button {
    border-radius: 7px;
        border: 2px solid;
        border-color: #383842;
    }

    bleibt alles unverändert :(

    Mit der Less Variable von wwdc kriege ich zumindest die Runden ecken hin, aber halt nicht die Stärke des Borders.
    Und es werden eben nicht nur die Buttons abgerundet, sondern auch ein Teil vom Content.. Kann ich das irgendwie beheben?

    Gibts für die Border-Width auch eine LESS Variable?

    Danke für die Antworten :)

  • Gibts für die Border-Width auch eine LESS Variable?


    Ich habe auf die Schnelle keine gefunden.

    Kann ich das irgendwie beheben?


    Kannst du mal bitte alles im zusätzlichen LESS posten (falls die Lizenz das zulässt oder es nicht zum Stil selbst gehört)? Da scheint irgendwo die falsche Variable verwendet zu werden.
    Verhält sich das in den anderen Stilen gleich? Ich kann gerade nicht selbst nachsehen.
    Ansonsten wirst du um das .button, .smallButtons .button { border-width: 2px; border-radius: 7px; } nicht herumkommen.

    bleibt alles unverändert


    Wie kommst du eigentlich auf .largeButtons?

  • Huhu nochmal.

    Danke für die Antworten und eure Bemühungen mit mir, habs heute mit klarem Kopf (bin gestern einfach schon zu lange dran gesessen, und hatte nen Fehler übersehen, darum wurden auch die anderen Ecken von Containern rund :P) nochmal versucht und folgenden Code verwendet:

    CSS
    .button, .smallButtons .button {
    border-radius: 7px !important;
        border: 2px solid #383842 !important;
    }

    Damit werden nur die Buttons in den Threads übernommen, nicht aber die in den Benutzereinstellungen. :(
    Gibts für die in den Benutzereinstellungen nen Extra-Code? Der Code den mir Firebug anzeigt kommt mir doch etwas lang vor:

    Code
    .formSubmit button, .formSubmit input[type="reset"], .formSubmit input[type="submit"], .formSubmit input[type="button"], .formSubmit .button

    damit würde es zwar funktionieren, aber gibts da nicht nen simpleren CSS Schnippsel? Außerdem müsste ich da auch mal durchchecken, ob überhaupt alle restlichen Buttons übernommen werden.

    Das mit den

    Code
    .largeButtons

    war ein Missverständnis ... Ich glaube die gabs mal im WBB3 :whistling: War gestern schon ein wenig durcheinander *hust*

    Liebe Grüße ^^

  • Mit diesem Code werden alle Buttons angesprochen zumindest geht das bei mir.

    Das bei Individuelles CSS und LESS eintragen:

    CSS
    .messageOptions nav ul.smallButtons > li:first-child a.button {
        border-top-left-radius: @wcfSmallButtonBorderRadius;
    }
    .message.messageSidebarOrientationLeft .messageOptions nav ul.smallButtons > li:last-child a.button, 
    .message.messageReduced .messageOptions nav ul.smallButtons > li:last-child a.button {
        border-bottom-right-radius: @wcfSmallButtonBorderRadius;
    }

    Das bei Überschreiben von LESS-Variablen eintragen:

    CSS
    @wcfButtonBorderRadius: 6px;
    @wcfSmallButtonBorderRadius: 6px;

    „Vergebung verändert nichts an unserer Vergangenheit, aber sie bereichert unsere Zukunft.“

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!