Ich melde mich dann die Tage nochmal zurück
Ok.
Ich melde mich dann die Tage nochmal zurück
Ok.
Es gibt auch ein Benutzerskript von Aris:
// Restore 'Space & Separator' items script for Firefox 60+ by Aris
//
// Default browser scripts always remove spaces and separators from default palette, so
// because of that they are added to an own toolbar now.
//
// - spaces and separators can be moved to any toolbar
// - to remove spaces or separators move them into palette
// - configuration toolbar behaves like a default toolbar, items and buttons can be placed on it
// - configuration toolbar is not visible outside customizing mode
// - default "Flexible Space" item is hidden from palette and added to configuration toolbar
// [!] BUG: do not move spaces, flexible spaces or separator to configuration toolbar or it will cause glitches
// [!] BUG: do not move main 'space'-item to palette or it will be hidden until customizing mode gets reopened
// [!] Fix for WebExtensions with own windows by 黒仪大螃蟹 (for 1-N scripts)
Components.utils.import("resource:///modules/CustomizableUI.jsm");
var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
var appversion = parseInt(Services.appinfo.version);
var AddSeparator = {
init: function() {
if (appversion >= 76 && location != 'chrome://browser/content/browser.xhtml')
return;
/* blank tab workaround */
try {
if(gBrowser.selectedBrowser.getAttribute('blank')) gBrowser.selectedBrowser.removeAttribute('blank');
} catch(e) {}
var tb_config_label = "Configuration Toolbar";
var tb_spacer_label = "Space";
var tb_sep_label = "Separator";
var tb_spring_label = "Flexible Space";
try {
if(document.getElementById('configuration_toolbar') == null) {
if(appversion <= 62) var tb_config = document.createElement("toolbar");
else var tb_config = document.createXULElement("toolbar");
tb_config.setAttribute("id","configuration_toolbar");
tb_config.setAttribute("customizable","true");
tb_config.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb_config.setAttribute("mode","icons");
tb_config.setAttribute("iconsize","small");
tb_config.setAttribute("toolboxid","navigator-toolbox");
tb_config.setAttribute("lockiconsize","true");
tb_config.setAttribute("ordinal","1005");
tb_config.setAttribute("defaultset","toolbarspacer,toolbarseparator");
document.querySelector('#navigator-toolbox').appendChild(tb_config);
CustomizableUI.registerArea("configuration_toolbar", {legacy: true});
if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_config);
if(appversion <= 62) var tb_label = document.createElement("label");
else var tb_label = document.createXULElement("label");
tb_label.setAttribute("label", tb_config_label+": ");
tb_label.setAttribute("value", tb_config_label+": ");
tb_label.setAttribute("id","tb_config_tb_label");
tb_label.setAttribute("removable","false");
tb_config.appendChild(tb_label);
if(appversion <= 62) var tb_spacer = document.createElement("toolbarspacer");
else var tb_spacer = document.createXULElement("toolbarspacer");
tb_spacer.setAttribute("id","spacer");
tb_spacer.setAttribute("class","chromeclass-toolbar-additional");
tb_spacer.setAttribute("customizableui-areatype","toolbar");
tb_spacer.setAttribute("removable","false");
tb_spacer.setAttribute("label", tb_spacer_label);
tb_config.appendChild(tb_spacer);
if(appversion <= 62) var tb_sep = document.createElement("toolbarseparator");
else var tb_sep = document.createXULElement("toolbarseparator");
tb_sep.setAttribute("id","separator");
tb_sep.setAttribute("class","chromeclass-toolbar-additional");
tb_sep.setAttribute("customizableui-areatype","toolbar");
tb_sep.setAttribute("removable","false");
tb_sep.setAttribute("label", tb_sep_label);
tb_config.appendChild(tb_sep);
if(appversion <= 62) var tb_spring = document.createElement("toolbarspring");
else var tb_spring = document.createXULElement("toolbarspring");
tb_spring.setAttribute("id","spring");
tb_spring.setAttribute("class","chromeclass-toolbar-additional");
tb_spring.setAttribute("customizableui-areatype","toolbar");
tb_spring.setAttribute("removable","false");
tb_spring.setAttribute("flex","1");
tb_spring.setAttribute("label", tb_spring_label);
tb_config.appendChild(tb_spring);
// CSS
var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
#configuration_toolbar { \
-moz-appearance: none !important; \
background-color: var(--toolbar-bgcolor); \
background-image: var(--toolbar-bgimage); \
background-clip: padding-box; \
color: var(--toolbar-color, inherit); \
} \
#main-window:not([customizing]) #configuration_toolbar { \
visibility: collapse; \
}\
#main-window[customizing] #configuration_toolbar #tb_config_tb_label { \
font-weight: bold !important; \
}\
#main-window[customizing] #configuration_toolbar :-moz-any(#spacer,#separator,#spring) { \
-moz-margin-start: 20px; \
}\
#main-window[customizing] #configuration_toolbar :-moz-any(#wrapper-spacer,#wrapper-separator,#wrapper-spring) .toolbarpaletteitem-label { \
display: block !important; \
-moz-margin-end: 20px; \
}\
#main-window[customizing] #wrapper-spacer #spacer { \
margin: 2px 0 !important; \
}\
#main-window[customizing] #configuration_toolbar #wrapper-spring #spring { \
margin: -1px 0 !important; \
min-width: 80px !important; \
}\
#main-window[customizing] #configuration_toolbar > * { \
padding: 10px !important; \
}\
#main-window[customizing] #configuration_toolbar > :-moz-any(#wrapper-spacer,#wrapper-separator,#wrapper-spring) { \
border: 1px dotted !important; \
-moz-margin-start: 2px !important; \
-moz-margin-end: 2px !important; \
}\
#main-window[customizing] toolbarspacer { \
border: 1px solid !important; \
}\
toolbar[orient="vertical"] toolbarseparator { \
-moz-appearance: none !important; \
border-top: 1px solid rgba(15,17,38, 0.5) !important; \
border-bottom: 1px solid rgba(255,255,255, 0.3) !important; \
margin: 2px 2px !important; \
height: 1px !important; \
width: 18px !important; \
}\
toolbar[orient="vertical"] toolbarspacer { \
-moz-appearance: none !important; \
height: 18px !important; \
width: 18px !important; \
}\
#customization-palette toolbarpaletteitem[id^="wrapper-customizableui-special-spring"], \
#customization-palette-container :-moz-any(#spring,#wrapper-spring) { \
display: none !important; \
}\
#main-window:not([customizing]) toolbar:not(#configuration_toolbar) toolbarspring {\
max-width: 100% !important; \
}\
\
'), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}
} catch(e){}
}
}
/* initialization delay workaround */
document.addEventListener("DOMContentLoaded", AddSeparator.init(), false);
/* Use the below code instead of the one above this line, if issues occur */
/*
setTimeout(function(){
AddSeparator.init();
},2000);
*/
Alles anzeigen
Im Anpassen-Fenster wird dann oben eine Konfigurationsleiste mit Symbolen für Leerraum, Trennzeichen und flexiblen Leerraum eingefügt.
Meinst du das so?
Die Idee gefällt mir ausgesprochen gut. Deutlich besser als wie bisher von mir umgesetzt mit zusätzlichem, direkt folgenden Leerraum (angesprochen als toolbarspring) und dem Nachbarselektor:
Aber Krümel extrahierend (auch zur Info GermanFreme82 ) : Statt :after und :before hier besser zwei Doppelpunkte nutzen, also ::after und ::before, denn das sind Pseudoelemente, keine Pseudoklassen. Siehe dazu CSS/Tutorials/Selektoren/Pseudoelement im SELFHTML-Wiki (rechts oben kann man dann zu Pseudoklassen weiterschalten).
Nachtrag: Ich bin nun doch wieder zurückgegangen, das alte Aussehen gefällt mir etwas besser. Deshalb hier die vollständige Regel:
#sidebar-button + toolbarspring {
border-left: 2px solid var(--lwt-accent-color) !important;
color: var(--lwt-accent-color) !important;
min-width: 2px !important;
max-width: 2px !important;
width: 2px !important;
margin-left: 3px !important;
margin-right: 3px !important;
}
Anmerkungen:
Jetzt habt ihr mich etwas verwirrt ;-).
Ich habe in den letzten Tagen das hier verwendet und bin mit dem Ergebnis eigentlich ziemlich zufrieden.
/*-------------------------------------------------------*/
/* Trennstrich + Hintergrund für TAB geschlossen Button */
/*-----------------------------------------------------*/
#_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action .toolbarbutton-badge-stack {
background: #FF8F00 !important;
border-radius: 35px !important;
}
#_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:hover .toolbarbutton-badge-stack {
background-color: #FF0039 !important;
border-radius: 35px !important;
}
Alles anzeigen
Es wäre natürlich jetzt noch der Hammer, wenn ich ein paar Pixel links und rechts daneben noch Freiraum hätte, aber so, das ich später (falls gewünscht) den Button auch verschieben kann und sich diese Freistellen mitbewegen würden.
Welches von euren ganzen Scripten nun das richtig ist überblicke ich jedoch gerade nicht ganz richtig. Könntet ihr mir das bitte nochmal posten, also als endgültige letzte Variante ?
Jetzt habt ihr mich etwas verwirrt ;-).
Selber!
Du hast doch gar keinen Trennstrich (mehr). Is’ aber schick.
Kannst Du als Themeneröffner noch so nett sein und „Seperator“ zu „Separator“ korrigieren?
Jetzt habt ihr mich etwas verwirrt ;-).
Selber!
Du hast doch gar keinen Trennstrich (mehr). Is’ aber schick.
Kannst Du als Themeneröffner noch so nett sein und „Seperator“ zu „Separator“ korrigieren?
Ja genau ich hab das mit dem bunten Kreis genommen und wenn man mit der Maus drüber geht, dann leuchtet es rot. Ich finde das sehr hilfreich.
Was mit jetzt noch fehlt ist links und rechts daneben ein wenig Freiraum ;-).
Was mit jetzt noch fehlt ist links und rechts daneben ein wenig Freiraum
Meinst du das so?
Wenn ja dann teste bitte. Die Werte kannst du dir ja anpassen:
/*-------------------------------------------------------*/
/* Trennstrich + Hintergrund für TAB geschlossen Button */
/*-----------------------------------------------------*/
#_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action .toolbarbutton-badge-stack {
background: #FF8F00 !important;
border-radius: 35px !important;
}
#_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:hover .toolbarbutton-badge-stack {
background-color: #FF0039 !important;
border-radius: 35px !important;
}
#_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action {
margin-left: 15px !important;
margin-right: 15px !important;
}
Alles anzeigen
Hallo
Bei dem Script von Aris wo kann ich da die Farbe ändern und die Stärke der Separatoren
Hallo
Bei dem Script von Aris wo kann ich da die Farbe ändern und die Stärke der Separatoren
Du beziehst dich auf
Es gibt auch ein Benutzerskript von Aris:
oder? Die Quelle ist übrigens space_and_separator_restorer.uc.js auf GitHub. Ich hab mir das nicht bis ins letzte Detail angesehen, aber das Skript hat einen CSS-Bereich (beginnt in Zeile 105), wo Eigenschaften zu ändern oder ergänzen wären, wobei zu beachten ist, dass am Ende jeder Zeile immer ein Backlslash („\“) stehen muss.
Weiter kann ich nicht helfen, ich bin jetzt erst mal überfordert damit, was es mit dem toolbarspacer auf sich hat. Ich nutze nur CSS, wie oben gepostet, und sehe über die Browserwerkzeuge nur toolbarsprings.
Die kannst du auch separat per CSS bearbeiten:
#customizableui-special-separator {
appearance: none !important;
border-left: 1px solid red !important;
border-top: none !important;
}
Damit kannst du alle diese Separatoren ändern.
Wenn du nur einzelne bearbeiten willst, mußt du mit dem Inspektor die genaue Nummer ermitteln.
EDIT:
Der obige Code ist falsch...
Hier die richtige Version:
Wo genau muss der Farbcode den hin, habe es vor, in und hinter der Klammer versucht, Fehlschlag.
Die kannst du auch separat per CSS bearbeiten:
Schön, wenn es hier funktioniert. Ich habe aber die Erfahrung gemacht, dass das nicht immer funktioniert. Ob es an fehlender Spezifität liegt oder daran, dass das Skript eventuell nach dem CSS geladen wird oder einer Kombination aus beidem, hab ich nicht untersucht.
#customizableui-special-separator
Das ist dann nur ein bestimmter Trenner und nicht „alle Separatoren“. Aber ich hab bei mir beispielsweise welche mit ID customizableui-special-spring88 bzw. …89 (dabei habe ich gar nicht so viele Trenner eingebaut). Wenn man sie alle ansprechen wollte, wäre dafür als Selektor dann dieses zu wählen:
beziehungsweise spezifischer wie oben am 28. Juni oder eben gleich das Element toolbarspring ohne ID. Es hängt alles davon ab, was genau man will.
Wo genau muss der Farbcode den hin, habe es vor, in und hinter der Klammer versucht,
Nur innerhalb der geschweiften Klammern. Wie sah denn deine Deklaration mit der Farbangabe aus?
#configuration_toolbar
Von der Bezeichnung der ID ausgehend erscheint mir das für die gesamte Leiste zu gelten, nicht für einen Trenner. Wenn Du es im Skript ändern willst, nicht separat wie von Grisu vorgeschlagen, probiere zuerst mit der letzten Regel
#main-window:not([customizing]) toolbar:not(#configuration_toolbar) toolbarspring {\
max-width: 100% !important; \
}\
analog zu meinem Nachtrag im obigen Posting vom 28. Juni (nur den Teil innerhalb der Klammern). Die Farbe muss zweimal angegeben werden (oben als var(--lwt-accent-color) zu sehen), die Dicke leider viermal (2px). Unabhängig davon muss das Skript wohl mal geupdatet werden, weil -moz-appearance doch gar nicht mehr funktioniert.
#customizableui-special-separator gilt für alle Separatoren, die mit dem Skript erzeugt werden. Wenn du nur einen bestimmten ansprechen willst, brauchst die Nummer dahinter zusätzlich.
customizableui-special-spring88
Das sind flexible Abstände, für die sinngemäß das gleiche gilt: Einmal ohne die Zahl dahinter greift das für alle...
Wie funktioniert den das mit dem Inspektor, damit ich diese Nummern find, ich habe es versucht aber keine Nummern für die Icons gefunden.
Wie funktioniert den das mit dem Inspektor, damit ich diese Nummern find, ich habe es versucht aber keine Nummern für die Icons gefunden.
Das sollte dir helfen:
#customizableui-special-separator gilt für alle Separatoren, die mit dem Skript erzeugt werden. Wenn du nur einen bestimmten ansprechen willst, brauchst die Nummer dahinter zusätzlich.
Wie oben erwähnt, benutze ich das Skript nicht. Aber ich sehe das, was Du behauptest, dort auch nicht. Wenn es so wäre, wäre das Skript schlecht programmiert. Denn eine ID darf immer nur einmal pro Seite vorkommen, was hier das Browserfenster ist, und die Syntax, die Du präsentierst, steht für eine gesamte ID. Die Syntax für eine Teilübereinstimmung sehe ich im Skript und habe ich oben auch verwendet, weshalb das hier
Das sind flexible Abstände, für die sinngemäß das gleiche gilt: Einmal ohne die Zahl dahinter greift das für alle...
genauso falsch ist. Übrigens sind das genau die Abstände, die man ohne Skript über das Anpassen der Symbolleiste einfügen kann. Über das CSS werden sie ihrer Flexibilität beraubt. (Aaah, ich erinnere mich gerade: Das Skript ermöglicht es wieder, feste Abstände einzufügen, wie es früher standardmäßig der Fall war.)
Du hast Recht. Richtig muß es heißen:
toolbarseparator[id^=customizableui-special-separator]
Damit sind dann alle Separatoren, die mit dem Skript erzeugt werden, angesprochen.
Ich war nicht ganz bei der Sache, als den obigen Blödsinn geschrieben habe, sorry...
Kann alles mal passieren. Schlecht wäre nur, wenn es auf Dauer unkorrigiert bliebe.
Das stimmt natürlich.
Bei dem Script von Aris
Aris hat das Skript gerade aktualisiert, und zwar genau im CSS-Teil. Damit ist auch dieses hier hinfällig:
wobei zu beachten ist, dass am Ende jeder Zeile immer ein Backlslash („\“) stehen muss.
Der CSS-Bereich beginnt jetzt ab Zeile 100.