FFF 61: Abstände der Symbole in der Symbolleiste verkleinern

Alphazalpha

Hallo,

das Thema gab es schon, allerdings für alte FF-Versionen.

Wie gesagt, ich möchte die Abstände der Symbole in der Symbolleiste verkleinern, so dass ich keinen Überhang mehr habe - in meiner alten Version ging das irgendwie.

Wenn das nicht geht, hätte ich gern eine zweite Reihe für die Symbole.

Grüße
Gabi

Edit von 2002Andreas
Ich habe Deinen Beitrag mal verschoben nach: Anpassungen

2002Andreas

Zitat von Alphazalpha

eine zweite Reihe für die Symbole.

Meinst du für die Lesezeichensymbolleiste?

Wenn ja, dann bitte testen und die Werte für dich anpassen.

CSS

#personal-bookmarks {
  --bookmark_items_height: 60px; 
  --bookmark_items_lines: 7; 
}


#personal-bookmarks {
  display: block;
}


#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}


#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left: 0px;
  right: 0px;
  width: 100%;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x: visible;
  overflow-y: visible;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display: block;
}


#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}


#personal-bookmarks #PlacesToolbar .chevron{
  visibility: collapse;
}


#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}


#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 2px;
  padding-bottom: 2px;
  width:150px;
  max-width:150px;
}


#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}


#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}


#navigator-toolbox #PersonalToolbar { 
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}

Alles anzeigen

Alphazalpha

Tja, mit "Werte für mich anpassen" hab ich mal wieder so meine Probleme...

Das sind meine Ansichten der Symbolleiste:

https://share-your-photo.com/c186281a5f

Was genau muss ich in dem Code anpassen?

2002Andreas

Auch bitte wieder testen dann, ist der kompl. Code geändert.

CSS

#personal-bookmarks {
  --bookmark_items_height: 60px; 
  --bookmark_items_lines: 7; 
}


#personal-bookmarks {
  display: block;
}


#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}


#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left: 0px;
  right: 0px;
  width: 100%;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x: visible;
  overflow-y: visible;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display: block;
}


#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}


#personal-bookmarks #PlacesToolbar .chevron{
  visibility: collapse;
}


#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}


#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 2px;
  padding-bottom: 2px;
  }


#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}


#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}


#navigator-toolbox #PersonalToolbar { 
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}

Alles anzeigen

Alphazalpha

Schon viel besser!

Welche Stelle in dem Code ist für das "Zusammenrücken" der Icons zuständig?

2002Andreas

Ist im obigen Code nicht enthalten.

Teste bitte damit mal zusätzliche, Werte wenn dann anpassen.

CSS

#personal-bookmarks toolbarbutton > image { 
padding:0px !important; 
margin: 1px !important;}

Alphazalpha

Hab "margin" auf 0 gesetzt, nun passen alle Icons bis auf 2 in die obere Symbolleiste. Also hab ich 2 gelöscht.
Mein großer Dank steht in dem anderen Thread.

2002Andreas

Zitat von Alphazalpha

nun passen alle Icons

Freut mich wenn du damit zufrieden bist.

Speravir

Zitat von Alphazalpha

Wie gesagt, ich möchte die Abstände der Symbole in der Symbolleiste verkleinern, so dass ich keinen Überhang mehr habe - in meiner alten Version ging das irgendwie.

Hast Du eigentlich in Anpassungen unter Dichte schon auf Kompakt eingestellt?

Zitat

Wenn das nicht geht, hätte ich gern eine zweite Reihe für die Symbole.

Das ist leider überhaupt nicht vorgesehen. Ich kenne aber 2 Möglichkeiten:

Per CSS mit CustomCSSforFx (Custom CSS tweaks for Firefox Quantum). Aber:

Zitat

/* ADDON BAR - simulate add-on bar by moving bookmarks toolbar to the bottom ********************/
/* [!] move 'Bookmarks Toolbar Items' to navigation bar to get a top toolbar with bookmarks *****/
/* [!] not compatible to 'bookmarks toolbar - multiple lines' option ****************************/
/* [!] not compatible to 'tabs toolbar - below main content' option *****************************/
/* [!] not compatible to 'bookmarks toolbar autohide' option ************************************/
Per UserChromeJS-Skript Revert AddonBar StatusBar. Wie De Name sagt, wird damit wieder eine Statusleiste am unteren Rand erzeugt, die man mit Symbolen befüllen kann. Es gibt einen schon etwas längeren eignen Thread dafür: Statusleiste.

Endor

Dieses Script fügt oben eine neue Symbolleiste ein:

Code

var tb = document.createElement('toolbar');
tb.id = 'fp-statusbar-2';
tb.setAttribute('customizable', true);
tb.setAttribute('mode', 'icons');
tb.setAttribute('context', 'toolbar-context-menu');


var parentE = document.getElementById('PersonalToolbar').parentNode;
var childE = document.getElementById('PersonalToolbar');
parentE.insertBefore( tb , childE );


CustomizableUI.registerArea( 'fp-statusbar-2' , { legacy: true } );

Alles anzeigen

Das hier: https://github.com/Endor8/userChr…ster/userChrome
muss zur Verwendung von Scripte wie obigen aber zuerst gemacht werden.
Mfg.
Endor

Speravir

Zitat von Endor

Dieses Script fügt oben eine neue Symbolleiste ein:

Schick, sieht sehr nach Abwandlung von RevertAddonStatusbar aus. Ich habe das wie üblich in eine Funktion eingebettet und auf den Browserkontext reduziert; zusätzlich let statt var und eine andere ID (ist ja keine Statusbar mehr):

Code

(function() {


if (location != 'chrome://browser/content/browser.xul')
   return;


let tb = document.createElement('toolbar');
tb.id = 'uc-toolbar-2';
tb.setAttribute('customizable', true);
tb.setAttribute('mode', 'icons');
tb.setAttribute('context', 'toolbar-context-menu');


let parentE = document.getElementById('PersonalToolbar').parentNode;
let childE = document.getElementById('PersonalToolbar');
parentE.insertBefore( tb , childE );


CustomizableUI.registerArea( 'uc-toolbar-2' , { legacy: true } );


})();

Alles anzeigen

Eventuell wäre noch eine Vbox gut, die man dann einfärben kann (wie in RevertAddonStatusbar).

Ich persönlich müsste übrigens mit nav-bar anstelle von PersonalToolbar arbeiten.

Endor

Hallo Speravir

Du weißt ja, ich bin nur der Jäger, ich suche und sammle Scripte,
obiges habe ich, glaube ich, mal von aborix bekommen.
Wie man da jetzt in Deine modifizierte Version, die ich prima finde,
noch eine Vbox einbaut, weiß ich leider auch nicht.
Vielleicht ließt aborix ja mit, hoffe ich....
Mfg.
Endor

aborix

So bekommt man die Leiste in eine vbox:

Ersetze

Code

parentE.insertBefore( tb , childE );

durch

Code

let vbox = document.createElement('vbox');
vbox.appendChild(tb);
parentE.insertBefore( vbox , childE );

Endor

Hallo aborix.
Vielen Dank! :klasse:

Funktioniert bestens.

Hier jetzt das Script mit obiger Änderung und Zeile zum Einfärben:

Code

(function() {


if (location != 'chrome://browser/content/browser.xul')
   return;


let tb = document.createElement('toolbar');
tb.id = 'uc-toolbar-2';
tb.setAttribute('customizable', true);
tb.setAttribute('mode', 'icons');
tb.setAttribute('context', 'toolbar-context-menu');


let parentE = document.getElementById('PersonalToolbar').parentNode;
let childE = document.getElementById('PersonalToolbar');
let vbox = document.createElement('vbox');
vbox.id = 'uc-tb2-vbox';
vbox.appendChild(tb);
parentE.insertBefore( vbox , childE );
vbox.style.backgroundColor = '#E7E7E7'; //als Wert geht: red, green, yellow oder black, aber auch zbs. #f7f7f7 usw.


CustomizableUI.registerArea( 'uc-toolbar-2' , { legacy: true } );


})();

Alles anzeigen

Nochmals vielen Dank.
Mfg.
Endor

Speravir

Zitat von Endor

Hier jetzt das Script mit obiger Änderung und Zeile zum Einfärben:

Bitte wie in RevertAddonStatusbar noch eine ID für die Vbox einfügen. Ich habe bei mir direkt nach

Code

let vbox = document.createElement('vbox');

die Zeile

Code

vbox.id = 'uc-tb2-vbox';

eingefügt, aber der Name ist letztendlich egal, solange er einzigartig ist.

Der Hintergrund ist, dass man so die (untere) Statusbar und diese Leiste gemeinsam in der userChrome.css ansprechen kann. Ich habe allerdings schon bemerkt, dass man da als Nutzer von Light Themes mit dieser oberen Leiste trotzdem etwas aufgeschmissen ist.

Endor

Hallo Speravir.
Habe ich oben wunschgemäß geändert.
Habe die Zeile so übernommen.
Siehe auch:
https://github.com/Endor8/userChr…ewtoolbar.uc.js
Mfg.
Endor

Speravir

Zitat von Endor

Hallo Speravir.
Habe ich oben wunschgemäß geändert.
Habe die Zeile so übernommen.

Um mich zu wiederholen: Schick. Danke.

Da du da Skript „newtoolbar“ genannt hast, könnte man nun noch überlegen, ob man die von mir kreierten IDs ändert, sowas wie

Code

tb.id = 'uc-newtb';

und

Code

vbox.id = 'uc-newtb-vbox';

Ha, da fällt mir auf, das man sich das Leben erleichtern würde, wenn man die fast unterste Zeile folgendermaßen änderte:

Code

CustomizableUI.registerArea( tb.id , { legacy: true } );

Analog dasselbe dann auch in der RevertAddonStatusbar, die Variable ist nur leicht anders.