userchrome.css downloadbutton und "new tab" wie verschieben?

sotnu

Ich habe nach langem mal meine userchromeaktualisiert (seit ein paar FF Versionen war alles etwas verschoben).

Aber ich kriege es nicht hin (habe ich noch nie, glaube ich), dass der Download-Button schön mittig ist. Ebenfalls der "new tab button" ist nicht mittig (wobei es bei diesem gar nicht so auffällt. Beim Download-Button aber schon).

Hat jemand eine Ahnung, wie ich das ändere? Habe es nie geschafft bisher. (unten ein Bild)

2002Andreas

Zitat von sotnu

wie ich das ändere?

Das liegt an deiner genutzen userChrome.css aus dem anderen Thread.

So sieht das damit hier aus:

sotnu

Ah ja, den code wollte ich eig. hier einfügen, sorry

Und ja, also es liegt natürlich daran. Aber ich meinte, ob jemand weiss, wie ich die Buttons einzeln verschieben kann. Ich habe das auch schon mit anderen Buttons gemacht, nur finde ich nicht heraus, welche Bezeichnungen diese 2 haben.

Edit: Wie man sieht (im code), habe ich auch schon versucht den"new-tab button" zu verändern. Aber zumindest mit dem Code da unten funktionierts nicht (der, der komplett in /**/

eingefasst ist).

CSS

/* Frank edited file - you are good to go...*/

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */



/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/

.tabbrowser-tab {
    min-height: 24px !important;
    max-height: 24px !important;
}

/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/

#nav-bar {
    min-height: 24px !important;
    max-height: 24px !important;
    margin-top: 0px !important;
}

/*Das sollten die Symbole in der Navigationsleiste sein*/

#nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
{
    transform: scale(0.9,0.9) !important;
    margin-top: -11px !important;
}

/*/*Verändert das "+"-Zeichen um einen neuen Tab zu öffnen (funktioniert nicht)*/

/*#tabs-newtab-button {
    vertical-align: bottom !important;
    height: 27px;
}*/*/

/*Verändert (die Höhe) des schwarzen Hintergrund hinter den Tabs (aber nicht beliebig klein) ->
Bei Verwendeung der "Titelleiste" & Stardock Groupy (Programm) muss der Wert viel höher sein, sonst verschwinden die Brwoser-Tabs
(wichtig für Stardock Groupy)*/

#TabsToolbar {
    min-height: 28px !important;
    max-height: 28px !important;
 }



/*verkleinert/vergrössert den Schliessen-,Minimieren- & Maximierenbutton*/

.titlebar-button {
    transform: translateY(-2px) scale(1,1);
}

/*Macht die (blaue) Linie beim aktiven Tab dünner*/

.tab-line {
    height: 1px !important;
}

/*Verändert die Höhe des (kompletten) Zoombutton*/

#zoom-controls {
    margin-top: -9px !important;
}

/*Verändert die Höhe des Menubutton (3 Striche)*/

#PanelUI-menu-button {
    margin-top: -9px !important;
}

/*Verändert die Höhe des "+" & "-" Zoombutton*/

#zoom-out-button, #zoom-in-button {
    margin-top: 8px !important;
}

Alles anzeigen

2002Andreas

Zitat von sotnu

welche Bezeichnungen diese 2 haben.

#tabs-newtab-button

#downloads-button

sotnu

Ok, danke schonmal. Wie findest du das nochmals heraus?

Ich werde dann mal damit rumbasteln und wieder berichten

2002Andreas

Zitat von sotnu

Wie findest du das nochmals heraus?

Lies dir das bitte mal durch:

Thema

Anleitung zur Nutzung des Inspektors und der Stilbearbeitung aus den Entwicklerwerkzeugen

Firefox enthält eine ganze Reihe von Entwicklerwerkzeugen (englisch: developer tools), mit denen man HTML, CSS, JavaScript auf Webseiten und der Firefox-Benutzeroberfläche untersuchen, bearbeiten und nach Fehlern durchsuchen kann und in erster Linie für Webentwickler gedacht sind. Es gibt folgende Entwicklerwerkzeuge:

- Inspektor

- Konsole

- Debugger

- Netzwerkanalyse

- Stilbearbeitung

- Laufzeitanalyse (nur für Webseiten)

- Speicher

- Web-Speicher

- Barrierefreiheit

Dieser Beitrag beschränkt sich…

milupo

15. Februar 2020 um 15:48

Damit verrutschen die Icons incl. dem Download-Button:

CSS

#nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
{
    transform: scale(0.9,0.9) !important;
    margin-top: -11px !important;
}

Damit passt der Neuer Tab Button wieder:

CSS

/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/
#TabsToolbar #tabs-newtab-button {
   margin-top: -7px !important;
   margin-bottom: -15px !important;
   margin-left: -2px !important;  
}


.tabbrowser-tab {
   min-height: 25px !important;
   max-height: 25px !important;
}

.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
   border: 2px solid lightgrey !important;  
}

.tabbrowser-tab {  
   padding-inline: .7px !important;
}


/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/

#nav-bar {
    min-height: 24px !important;
    max-height: 24px !important;
    margin-top: 0px !important;
}

/*Das sollten die Symbole in der Navigationsleiste sein*/

#nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
{
    transform: scale(0.9,0.9) !important;
    margin-top: -11px !important;
}


#TabsToolbar {
    min-height: 28px !important;
    max-height: 28px !important;
 }



/*verkleinert/vergrössert den Schliessen-,Minimieren- & Maximierenbutton*/

.titlebar-button {
    transform: translateY(-2px) scale(1,1);
}

/*Macht die (blaue) Linie beim aktiven Tab dünner*/

.tab-line {
    height: 1px !important;
}

/*Verändert die Höhe des (kompletten) Zoombutton*/

#zoom-controls {
    margin-top: -9px !important;
}

/*Verändert die Höhe des Menubutton (3 Striche)*/

#PanelUI-menu-button {
    margin-top: -9px !important;
}

/*Verändert die Höhe des "+" & "-" Zoombutton*/

#zoom-out-button, #zoom-in-button {
    margin-top: 8px !important;
}

Alles anzeigen

2002Andreas

So würde es mit den Buttons incl. dem Downloadbutton passen:

CSS

#nav-bar .toolbarbutton-icon {
    transform: scale(0.9,0.9) !important;
    margin-bottom: 8px !important;
}

#downloads-button {
    transform: scale(0.9,0.9) !important;
    margin-bottom: 8px !important;
}

Zitat von sotnu

mal damit rumbasteln

Dann hast du ja jetzt Vorschläge bekommen

milupo

Noch ein Hinweis: Die Zeilen 3 bis 6 kannst du entfernen. Es ist nicht mehr üblich, den Namensraum anzugeben. Gelegentlich führt die Angabe des Namensraums zu einem Fehler.

2002Andreas

Ergänzend.

In Zeile 38 sind diese Zeichen doppelt, und müssen entfernt werden.

*/

sotnu

Danke für eure Hilfe!

Ich habe dann mal alles so angepasst (hauptsächlich Andreas Code kopiert und kleine Änderungen vorgenommen und altest Zeug von mir gelöscht, was glaube ich nicht mehr funktioniert/keine Funktion mehr hat). Andreas hat noch eine Tabumrandung für mich mit reingeschmuggelt

(Ps. Die ganzen Leisten sind jetzt inklusive "Titelleiste" insgesamt etwa so hoch, wie ein default-Firefoxbrowser ohne "Titelleiste")

CSS

/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/
#TabsToolbar #tabs-newtab-button {
   margin-top: -7px !important;
   margin-bottom: -15px !important;
   margin-left: -2px !important;  
}

/*Verändert die höhe der Browser-Tabs*/
.tabbrowser-tab {
   min-height: 21px !important;
   max-height: 21px !important;
}
/*Top-Linie beim (inaktiven) tab in "solid #429CE3"*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
   border-top: 2px solid #429CE3 !important;  
}

.tabbrowser-tab {  
   padding-inline: .7px !important;
}

/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/

#nav-bar {
    min-height: 23px !important;
    max-height: 23px !important;
    margin-top: 0px !important;
}

/*Das sollten die Symbole in der Navigationsleiste sein*/

#nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
{
    transform: scale(0.9,0.9) !important;
    margin-top: -11px !important;
}


#TabsToolbar {
    min-height: 25px !important;
    max-height: 25px !important;
 }

/*Verändert die Höhe des (kompletten) Zoombutton*/

#zoom-controls {
    margin-top: -9px !important;
}

/*Verändert die Höhe des Menubutton (3 Striche)*/

#PanelUI-menu-button {
    margin-top: -9px !important;
}

/*Verändert die Höhe des "+" & "-" Zoombutton*/

#zoom-out-button, #zoom-in-button {
    margin-top: 8px !important;
}

#downloads-button {
    transform: scale(0.9,0.9) !important;
    margin-bottom: 8px !important;
}

#navigator-toolbox {
    margin-top: -3px !important;
}

Alles anzeigen

Hätte aber ein paar Fragen

Und zwar, was verändert das da?

CSS

.tabbrowser-tab {  
   padding-inline: .7px !important;
}

Und wie mache ich, dass die Linie (border-top) bei aktiven Tabs angezeigt wird und nicht bei den Inaktiven? Ich habe versucht das "not" und die runden Klammern zu löschen, hat aber nicht funktioniert. Weil ich vermisse eig. die tab.line, die es mal bei Firefox gab für aktive Fenster. Dank Andres reingeschmuggeltem Code habe ich jetzt wieder sowas wie die ursprüngliche tab.line (nur nicht bei aktiven Tabs).

CSS

/*Top-Linie beim (inaktiven) tab in "solid #429CE3"*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
   border-top: 2px solid #429CE3 !important;  
}

Und dann noch ne andere Frage: Mit Win+Shift"Ctrl+I öffnet man ja diese Browserkonsole. Das hat funktioniert, aber nach mehrmaligen schliessen von Firefox geht die nicht mehr auf. Auch nicht, wenn ich die übers Firefox-Menu öffnen will (es kommt zwar ein Ladekreis, aber es geht nicht mehr auf).

grisu2099

Zitat von sotnu

Das hat funktioniert, aber nach mehrmaligen schliessen von Firefox geht die nicht mehr auf.

Vor dem Beenden von Firefox zuerst die Werkzeuge schließen...

Nach ein paar Neustarts des Firefox geht das dann wieder.

2002Andreas

Zitat von sotnu

was verändert das da?

Den Abstand der Tabs nebeneinander.

Hier mal mit größerem Wert zwecks Test.

Zitat von sotnu

dass die Linie (border-top) bei aktiven Tabs angezeigt wird

CSS

.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background  {
  border-top: 3px solid red !important;
}

Zitat von sotnu

nach mehrmaligen schliessen von Firefox geht die nicht mehr auf.

Im Profilordner den Unterordner:

chrome_debugger_profile

löschen, und den Fx neu starten.

Der Order wird dann wieder neu erstellt.

Dharkness

Zitat von sotnu

Und wie mache ich, dass die Linie (border-top) bei aktiven Tabs angezeigt wird und nicht bei den Inaktiven?

Teste es mal damit ↓.

CSS

/* Top-Linie beim aktivem Tab in "solid #429CE3" */
.tabbrowser-tab[selected="true"] > .tab-stack > .tab-background {
   border-top: 2px solid #429CE3 !important;  
}

sotnu

Danke nochmals allen. Und ok, werde drauf achten, dass ich das Fenster schliesse, bevor ich Firefox schliesse

Und der Code von Andreas hat geklappt. Sieht jetzt schlussendlich so aus (Um die höhe der Leisten zu vergleichen rechts ein Firefox ohne CSS und ohne Titelleiste, aber mit kompakten Tabs, die es ja standartmässig bei Firefox nicht mehr gibt. Links dann bearbeitet und mit Titelleiste (für Groupy)):

2002Andreas

Danke für die Rückmeldung. 👍

Schön dass dein Problem gelöst ist.

userchrome.css downloadbutton und "new tab" wie verschieben?

Anleitung zur Nutzung des Inspektors und der Stilbearbeitung aus den Entwicklerwerkzeugen

Ähnliche Themen

Klicken Sie mit der mittleren Maustaste auf Undo Close Tab für Firefox 92?

Einträge im Tab Kontextmenü mit Icon versehen

userChrome.css Anpassung für verschwendeten Platz bei mehrzeiliger Tableiste

FF89 Tableiste unten und Tabs mittig

Anpassungen des "Hamburgermenüs"

TabContext Menü in Nightly