Buttons verkleinern

harff182

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

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

CSS

/*     hier abgeguckt:
    https://www.camp-firefox.de/forum/thema/130232
*/

 #fp-statusbar-2 toolbarbutton {
    background: gainsboro !important;
    border: 1px solid black !important;
    border-radius: 5px !important;
}

#searchbar {
    background: white !important;
    border: 4px solid black !important;
    border-radius: 5px !important;
}

Alles anzeigen

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?

2002Andreas

Zitat von harff182

und einige Buttons plaziert.

Hast du bitte mal den Code für diese Button.

Rahmen und Hg hast du ja selber dafür erstellt.

harff182

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:

JavaScript

//    (13_)RestartFirefoxButtonM.uc.js 
//    version 0.3 = Asbach uralt... ..leider nicht dokumentiert :(
//
//    1910xx:    eigenes Icon und "berechneter" Icon-Path

(function() {

    if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'restart-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {   
                var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                    id: 'restart-button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Neustart',
                    tooltiptext: 'Neustart (mit Rechts- und Mittelklick wird userChrome.js-Cache geleert)',
                    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/restart-button3.png") + '");',
                    
                    onclick: 'if (event.button == 1 || event.button == 2) { \
                                    event.preventDefault(); \
                                    Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime). \
                                        invalidateCachesOnRestart(); \
                                 }; \
                                 Services.startup.quit(Services.startup.eRestart | Services.startup.eAttemptQuit);' //gemäß #2 = milupo
                };                
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);                
                return toolbaritem;
            }        
        });
    } 
    catch(e) { };        
   
})();

Alles anzeigen

2002Andreas

Zitat von harff182

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;
}

2002Andreas

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;
}

2002Andreas

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;
}

harff182

2002Andreas :

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

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

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

2002Andreas

Zitat von harff182

Hovern ist mir eher lästig

Ok, dann den Teil einfach weglassen im Code.

Zitat von harff182

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.

Zitat von harff182

muß ich mich morgen näher beschäftigen

Lass dir Zeit und mach es ganz in Ruhe.

Dharkness

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;
}

harff182

Dharkness :

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

Zitat von 2002Andreas

Lass dir Zeit und mach es ganz in Ruhe.

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

CSS

/*     22_Rahmen.css
    searchbar und Buttons in der Zusazleiste "fp-statusbar-2" aufhübschen.

    Ziel: Buttons außen kleiner, innen größer/maekanter, passende Umrandung(border)*/

/*     211011: Ansatz und weitere Gedanken von Andreas:
            https://www.camp-firefox.de/forum/thema/133510-buttons-verkleinern/?postID=1184941#post1184941
    
    211012: so sagts mir optisch mehr zu ;)
*/

#fp-statusbar-2 .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#fp-statusbar-2 .toolbarbutton-1 > image  {
    background: gainsboro !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    height: 30px !important;
    width: 30px !important;
}

/* new-window-button-icon verändern*/
#new-window-button {
    list-style-image: url('../icons/Window_64.gif') !important;
}

/* restart-button-icon verändert in 13_RestartFirefoxButtonM.uc.js */

/*und als letztes */
#searchbar {
    background: white !important;
    border: 4px solid black !important;
    border-radius: 5px !important;
}

Alles anzeigen

Das sieht dann im Vergleich so aus:

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

^L^

BTW: Buttons lassen sich übrigens auch in der ''Menüleiste'' platzieren ...

harff182

Zitat von ^L^

BTW: Buttons lassen sich übrigens auch in der ''Menüleiste'' platzieren ...

Da hat meinereiner abba nich jenuch Platz

^L^

Boersenfeger

//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:

JavaScript

/* Statusleiste für Firefox */

// https://www.camp-firefox.de/forum/viewtopic.php?p=1052187&sid=d4e33b574226439c26dfb45629b71369#p1052187
// entwickelt von aborix 
// Anpassung für DownloadStatusModoki: https://www.camp-firefox.de/forum/thema/129854-downloadstatusmodoki-uc-js-umbasteln/?postID=1136067#post1136067 

(function() {

  if (location != AppConstants.BROWSER_CHROME_URL)
    return;
  
  var css =`
    #new-toolbar {
    height: 28px; 
    direction: rtl;
    -moz-window-dragging: no-drag;
    /* border-top: 1px solid black !important; 
    background-image:  linear-gradient( rgba(192,192,192,1), rgba(255,255,255,1) ),  none; } */
    `; 
  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');

  var vbox  = document.createXULElement('vbox');
  document.getElementById('navigator-toolbox').parentNode.parentNode.insertBefore(
  vbox, document.getElementById('browser-bottombox'));
  vbox.style.backgroundColor = '#ffe4c4';
  vbox.appendChild(tb);

  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);  
   
})();

setTimeout(function() {
    if (window.__SSi == 'window0')
      return;
    let tabbar = document.getElementById('TabsToolbar');     
    let tab = gBrowser.selectedTab;
    tabbar.style.display = '-moz-box';
    duplicateTabIn(tab, 'tab');
    gBrowser.moveTabTo(gBrowser.selectedTab, tab._tPos);
    gBrowser.removeTab(tab);
    tabbar.style.display = ''; 
  }, 1500);

Alles anzeigen

harff182

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

Jolli1

Vielen Dank für den Tipp.

Boersenfeger

Gerne

Buttons verkleinern

harff182 12. Oktober 2021 um 16:28

Ähnliche Themen

Die 3 Buttons schließen, verkleinern, minimieren vom FF einfärben

"verkleinern, vergrössern,schliessen" Buttons wurden verschoben

Buttons werden nicht geladen

userChrome Tabs umgestalten, Icons anlegen