Buttons verkleinern

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    93.0
    Betriebssystem
    Win10

    Ich hab in meiner Zusatzleiste die searcbar und einige Buttons plaziert.

    Mit folgendem Code habe ich bisher "aufgehübscht":


    Hier mal ein Bild dazu:

    Nun möchte ich Buttons etwas kleiner haben - mir ist um die Icons in der Mitte zuviel grauer "Rahmen" drummerum.

    Und nein, ich meine nicht border, der ist schwarz und so gewollt.


    Ich habe im linken Button den Bereich, den ich weghaben will mal gelb eingefärbt und Pfeile gesetzt.

    Wie bekomme ich die Buttons etwas kleiner, ungefähr auf die Größe, die der blaue Rahmen ums Icon drummerum andeutet?

    W10 Home 64bit - FF93.x Portable

  • Zur hilfreichsten Antwort springen
  • Der 1. Button ist FF-Intern: "Ein neues Fenster öffnen".

    Der 2. Button ist vom "Video Download Helper".

    Der 3. Button ist vom "Youtube Video and Audio Downloader".

    Der 4. Button ist von "Fireshot - Capture page".


    Den ganz rechten Button hab ich mal vor 2 Jahren irgendwo hier aufgeschnappt:

    W10 Home 64bit - FF93.x Portable

  • Den ganz rechten Button

    Danke.

    So sollte das aussehen:



    CSS
    #restart-button2a > image  {
        background: gainsboro !important;
        border: 1px solid black !important;
        border-radius: 5px !important;
    }

    Du hast den Rahmen immer um den ganzen Button gemacht, also so:


    CSS
    #restart-button2a   {
        background: gainsboro !important;
        border: 1px solid black !important;
        border-radius: 5px !important;
    }


    Du musst bei den Buttonbezeichnungen immer > image anhängen.


    Neues Fenster wäre dann:


    CSS
    #new-window-button > image {
        background: gainsboro !important;
        border: 1px solid black !important;
        border-radius: 5px !important;
    }

    Mit freundlichem Gruß
    Andreas
    Mein Laptop    Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas () aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

    • Hilfreichste Antwort

    Solltest du einen pauschalen Code für alle Icons nutzen:



    Dann könnte der so aussehen:


    CSS
    #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack ,
    #nav-bar .toolbarbutton-1 > image  {
        background: gainsboro !important;
        border: 1px solid black !important;
        border-radius: 5px !important;
    }
  • Und so für eine andere Farbe bei hover auf einen Button, wenn du das noch nicht haben solltest:



    CSS
    #nav-bar .toolbarbutton-1:hover > .toolbarbutton-badge-stack,
    #nav-bar .toolbarbutton-1:hover  > image {
        background: red !important;
        fill: white !important;
        border: 1px solid black !important;
        border-radius: 5px !important;
    }
  • 2002Andreas :

    Bis hierhin aber schonmal Danke für Deine Mühe :thumbup: ...


    Mit dem Code aus #5 muß ich mich morgen näher beschäftigen - scheint, als wenn ich in einem anderen .css was zum Testen versucht hätte, was mir auch woanders dazwischenfunkt =O

    Hovern ist mir eher lästig, deswegen versuch ich das bei den Buttons zu unterbinden...


    (:| jezz is meinereiner zu müde und unkonzentriert , guuts nächtle :sleeping:

    W10 Home 64bit - FF93.x Portable

  • Hovern ist mir eher lästig

    Ok, dann den Teil einfach weglassen im Code.


    was mir auch woanders dazwischenfunkt

    Du musst mal nach deinem Code suchen, der den Rahmen und die Hintergrundfarbe der Button betrifft.

    Evtl. musst du den nur anpassen.


    muß ich mich morgen näher beschäftigen

    Lass dir Zeit und mach es ganz in Ruhe.

  • Hi,


    wenn ich das richtig verstanden habe, kannst Du das innere Padding der Button damit ↓ einstellen.

    CSS
    :root #nav-bar {
        --toolbarbutton-inner-padding: 2px 2px !important;
    }

    Es grüßt,

    Ralf

  • Dharkness :

    Danke für den Hinweis, ich hab noch 2 ähnliche Baustellen, wo ich das mal testen werde...

    Lass dir Zeit und mach es ganz in Ruhe.

    Beides hab ich eben mal gehabt und rausgekommen ist dieser Code:

    Das sieht dann im Vergleich so aus:

    Ist zwar kein großer Unterschied, aber neu gefällts mir optisch wesentlich besser ;)

    W10 Home 64bit - FF93.x Portable

  • harff182

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.
  • //Bei Interesse kann man auch eine zusätzliche Buttonleiste am unteren Bildschirmrand installieren..

    Früher als Statusleiste bekannt...

    Falls gewünscht dann wäre es dieses Script:

  • Danke für den Hinweis/Tip, aber ich bin mit meiner oben liegenden Zusatzleiste und der togglebaren Verti-Bar im Handling dermaßen zufrieden, daß ich momentan keinen Bedarf hab ;)

    W10 Home 64bit - FF93.x Portable