Vertikale Icon-Bar

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Benutzeravatar
Son Goku
Senior-Mitglied
Beiträge: 656
Registriert: Mi, 10. Nov 2004 17:51

Re: Vertikale Icon-Bar

#16

Beitrag von Son Goku » Mo, 27. Nov 2017 0:55

EffPeh hat geschrieben:
Mo, 27. Nov 2017 0:17
Evtl. finde ich da aber auch noch eine andere Möglichkeit.
naja wie gesagt, ist schon ok so.
ich habe meine Verticale Leiste wieder und das ist besser als nichts :mrgreen:

EffPeh
Senior-Mitglied
Beiträge: 1570
Registriert: Mi, 04. Okt 2017 10:22

Re: Vertikale Icon-Bar

#17

Beitrag von EffPeh Themen-Starter » Fr, 01. Dez 2017 14:06

AngelOfDarkness hat geschrieben:
So, 26. Nov 2017 16:27
Allerdings musste ich den erst suchen, da ich alle Leisten schwarz habe, habe ich ihn erst nicht so schnell gefunden. Somit habe ich ihn vorerst ins Overflow-Menü gepackt ;)
Sorry, hatte ich ganz übersehen. :)
Du kannst die Farbe(n) der Button-SVG-Icons ändern.
In den Zeilen...

Code: Alles auswählen

vb_isVisibleImage = 'url(blablabla...
bzw.
vb_isHiddenImage = 'url(blablabla...
..findest du einen path-Tag, der ein Attribut fill enthält. Dort kannst du deine gewünschte(n) Farbe(n) eintragen. Also etwa so:

Code: Alles auswählen

<path fill="red" ...
Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

Benutzeravatar
AngelOfDarkness
Senior-Mitglied
Beiträge: 17102
Registriert: Di, 20. Jul 2004 20:01
Wohnort: Menden

Re: Vertikale Icon-Bar

#18

Beitrag von AngelOfDarkness » Fr, 01. Dez 2017 14:54

Oh ja, danke für den Hinweis :klasse:
verwendete Browser und Erweiterungen sowie Bild vom Firefox (Stand: 13.10.2018) - Sicherheitskonzept für Windowsnutzer

„Mutter ist der Name für Gott, auf den Lippen und in den Herzen aller Kinder dieser Welt.“ (The Crow)

Benutzeravatar
Abendstern2010
Senior-Mitglied
Beiträge: 938
Registriert: Mi, 07. Aug 2013 13:29

Re: Vertikale Icon-Bar

#19

Beitrag von Abendstern2010 » Di, 18. Sep 2018 16:23

EffPeh,
ich habe in das Script einmal die Komplette LZ Symbolleiste gepackt was auch gut funktioniert;nur leider nach Neustart
muss ich auf Anpassen gehen so das die LZ Symbolleiste wieder erscheint.
Kann man dies irgendwie abstellen?
Aktuell sieht es so aus
Über die" 2 Pfeile"öffnet sich die LZ Symbolleiste und so könnte es bleiben.
Dateianhänge
firefox_2018-09-18_19-44-04.png
firefox_2018-09-18_19-44-04.png (3.02 KiB) 443 mal betrachtet
Firefox Nightly 65.0
Ich bin kein Profi lerne aber immer dazu

ritchi3000
Junior-Mitglied
Beiträge: 1
Registriert: Sa, 03. Feb 2018 14:33

Re: Vertikale Icon-Bar

#20

Beitrag von ritchi3000 » Fr, 05. Okt 2018 17:52

Hallo, ich glaube die Frage gehört hier nicht hin aber ich probiere es trotzdem

Besteht die Möglichtkeit die Vertikale Toolbar auch in Thunderbird 60.2.1 zu benutzen z.B. unten links Horizontal in der Folderpane.

Wo ich mir ein paar Icons ablegen kann ich habe oben kein Platz mehr.

Für Eure Mühe herzlichen Dank

ritchi3000

Benutzeravatar
Fox2Fox
Senior-Mitglied
Beiträge: 20997
Registriert: So, 22. Feb 2009 14:05
Wohnort: Rheinkilometer 780

Re: Vertikale Icon-Bar

#21

Beitrag von Fox2Fox » Fr, 05. Okt 2018 18:05

Da wendest du dich am besten an das Thunderbird-Forum
Allgemeine Fehlersuche Anleitung für Fragen im Forum Mein Firefox Keine Support-Anfragen per PN

Benutzeravatar
AngelOfDarkness
Senior-Mitglied
Beiträge: 17102
Registriert: Di, 20. Jul 2004 20:01
Wohnort: Menden

Re: Vertikale Icon-Bar

#22

Beitrag von AngelOfDarkness » Sa, 10. Nov 2018 16:44

Der Code haut auch nicht mehr so recht hin:

Code: Alles auswählen

(function() {
/*******************************************************************************/

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

/*******************************************************************************/
	
	// Background Color
	var vb_bg_color = 'rgba( 255 , 0 , 255 , 0.75 )';
	// Border Color
	var vb_border_color = 'rgb( 0 , 0 , 0 )';
	// Number of columns
	var vb_cols = 1;
	// Visibility on Start
	var vb_visibilityOnStart = 1;
	
	// Button Icon, if Toolbar is visible
	vb_isVisibleImage = 'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M11.414 10l2.293-2.293a1 1 0 0 0 0-1.414 4.418 4.418 0 0 0-.8-.622L11.425 7.15h.008l-4.3 4.3v-.017l-1.48 1.476a3.865 3.865 0 0 0 .692.834 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm3.293-8.707a1 1 0 0 0-1.414 0L9.7 4.882A2.382 2.382 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586a2.382 2.382 0 0 1 2.3 1.7l-3.593 3.593a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414zm-9 6a4.414 4.414 0 0 0-1.571-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571 4.191 4.191 0 0 0 .9.684L6.39 8.2a4.2 4.2 0 0 0-.683-.907z"></path></svg>\')';
	
	// Button Icon, if Toolbar is hidden
	vb_isHiddenImage = 'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"></path></svg>\')';

/*******************************************************************************/

	var vb_h = window.outerHeight;
	var vb_minH = vb_h/10;
	var vb_maxH = vb_h/2;
	var vb_width = 32;
	var vb_totalwidth = vb_cols * vb_width;

var vb_style = '\
box-sizing: content-box !important; \
background-color: ' + vb_bg_color + ' !important; \
min-width: ' + vb_totalwidth + 'px !important; \
max-width: ' + vb_totalwidth + 'px !important; \
min-height: ' + vb_minH + 'px !important; \
max-height: ' + vb_maxH + 'px !important; \
position: absolute !important; \
right: 30px !important; \
padding: 10px 0px !important; \
border: 1px solid ' + vb_border_color + '; \
border-radius: 5px !important; \
box-shadow: 0px 0px 2px 2px rgba(0,0,0,.25); \
';

	var vb_element = document.getElementById('navigator-toolbox');
	var vb_toolbar = document.createElement('toolbar');
	vb_toolbar.id = 'fp-toolbar';
	vb_toolbar.setAttribute('customizable', true);
	vb_toolbar.setAttribute('mode', 'icons');
	vb_toolbar.setAttribute('style', vb_style);	
	vb_element.appendChild( vb_toolbar );
	vb_toolbar.setAttribute('collapsed', false);		

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

	setTimeout(function(){ 
		var tmp_positionInfo = vb_toolbar.getBoundingClientRect();
		var tmp_height = tmp_positionInfo.height;
		var vb_ptop = ( vb_h - tmp_height ) / 2; 
		vb_toolbar.style.top = vb_ptop + 'px';
		
		if( vb_visibilityOnStart == 0 ) {
			vb_toolbar.setAttribute('collapsed', true);
		}
	}, 500);	

/*******************************************************************************/

	try {
		Components.utils.import("resource:///modules/CustomizableUI.jsm");
		CustomizableUI.createWidget({
			id: "fp-toggle-toolbar",
			defaultArea: CustomizableUI.AREA_NAVBAR,
			removable: true,
			label: "Toggle Toolbar",
			tooltiptext: "Toggle Toolbar",
			onClick: function() {
				var node = document.getElementById('fp-toolbar');
				var isVisible = node.getAttribute('collapsed');
				
				if( isVisible == 'false' ) {
					node.setAttribute( 'collapsed' , 'true' );
					document.getElementById(this.id).style.listStyleImage = vb_isHiddenImage;
				} else {
					node.setAttribute( 'collapsed' , 'false' );
					document.getElementById(this.id).style.listStyleImage = vb_isVisibleImage;
				}
			},
			onCreated: function(aNode) {
				if( vb_visibilityOnStart == 1 ) {
					aNode.style.listStyleImage = vb_isVisibleImage;
				} else {
					aNode.style.listStyleImage = vb_isHiddenImage;
				}
				return aNode;
			}
		});
	} catch (e) {
		Components.utils.reportError(e);
	};

/*******************************************************************************/
})();
verwendete Browser und Erweiterungen sowie Bild vom Firefox (Stand: 13.10.2018) - Sicherheitskonzept für Windowsnutzer

„Mutter ist der Name für Gott, auf den Lippen und in den Herzen aller Kinder dieser Welt.“ (The Crow)

Benutzeravatar
Abendstern2010
Senior-Mitglied
Beiträge: 938
Registriert: Mi, 07. Aug 2013 13:29

Re: Vertikale Icon-Bar

#23

Beitrag von Abendstern2010 » Mi, 14. Nov 2018 17:10

AngelOfDarkness hat geschrieben:
Sa, 10. Nov 2018 16:44
Der Code haut auch nicht mehr so recht hin:
Schade bei mir funktioniert das Script seit heute gar nicht mehr.
Firefox Nightly 65.0
Ich bin kein Profi lerne aber immer dazu

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 18777
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: Vertikale Icon-Bar

#24

Beitrag von Sören Hentzschel » Mi, 14. Nov 2018 21:55

Folgende Zeile suchen:

Code: Alles auswählen

CustomizableUI.registerArea( 'fp-toolbar' , { legacy: true } );
und danach einfügen:

Code: Alles auswählen

CustomizableUI.registerToolbarNode(vb_toolbar);


Meine Beiträge zum Firefox-Quellcode (4 Beiträge; Letzter Beitrag: 05.09.2018)

Benutzeravatar
Abendstern2010
Senior-Mitglied
Beiträge: 938
Registriert: Mi, 07. Aug 2013 13:29

Re: Vertikale Icon-Bar

#25

Beitrag von Abendstern2010 » Mi, 14. Nov 2018 22:33

Sören recht vielen dank funktioniert wieder.
Firefox Nightly 65.0
Ich bin kein Profi lerne aber immer dazu

Benutzeravatar
AngelOfDarkness
Senior-Mitglied
Beiträge: 17102
Registriert: Di, 20. Jul 2004 20:01
Wohnort: Menden

Re: Vertikale Icon-Bar

#26

Beitrag von AngelOfDarkness » Sa, 24. Nov 2018 18:11

Was aber nicht nicht klappt ist, dass die Toolbar auch automatisch wieder mittig auf halber Bildschirmhöhe positioniert. Ebenso ist der Button zum Ein/aus-Schalten der Bar nicht mehr da.

Code: Alles auswählen

(function() {
/*******************************************************************************/

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

/*******************************************************************************/
	
	// Background Color
	var vb_bg_color = 'rgba( 255 , 0 , 255 , 0.75 )';
	// Border Color
	var vb_border_color = 'rgb( 0 , 0 , 0 )';
	// Number of columns
	var vb_cols = 1;
	// Visibility on Start
	var vb_visibilityOnStart = 1;
	
	// Button Icon, if Toolbar is visible
	vb_isVisibleImage = 'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M11.414 10l2.293-2.293a1 1 0 0 0 0-1.414 4.418 4.418 0 0 0-.8-.622L11.425 7.15h.008l-4.3 4.3v-.017l-1.48 1.476a3.865 3.865 0 0 0 .692.834 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm3.293-8.707a1 1 0 0 0-1.414 0L9.7 4.882A2.382 2.382 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586a2.382 2.382 0 0 1 2.3 1.7l-3.593 3.593a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414zm-9 6a4.414 4.414 0 0 0-1.571-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571 4.191 4.191 0 0 0 .9.684L6.39 8.2a4.2 4.2 0 0 0-.683-.907z"></path></svg>\')';
	
	// Button Icon, if Toolbar is hidden
	vb_isHiddenImage = 'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"></path></svg>\')';

/*******************************************************************************/

	var vb_h = window.outerHeight;
	var vb_minH = vb_h/10;
	var vb_maxH = vb_h/2;
	var vb_width = 32;
	var vb_totalwidth = vb_cols * vb_width;

var vb_style = '\
box-sizing: content-box !important; \
background-color: ' + vb_bg_color + ' !important; \
min-width: ' + vb_totalwidth + 'px !important; \
max-width: ' + vb_totalwidth + 'px !important; \
min-height: ' + vb_minH + 'px !important; \
max-height: ' + vb_maxH + 'px !important; \
position: absolute !important; \
right: 30px !important; \
padding: 10px 0px !important; \
border: 1px solid ' + vb_border_color + '; \
border-radius: 5px !important; \
box-shadow: 0px 0px 2px 2px rgba(0,0,0,.25); \
';

	var vb_element = document.getElementById('navigator-toolbox');
	var vb_toolbar = document.createElement('toolbar');
	vb_toolbar.id = 'fp-toolbar';
	vb_toolbar.setAttribute('customizable', true);
	vb_toolbar.setAttribute('mode', 'icons');
	vb_toolbar.setAttribute('style', vb_style);	
	vb_element.appendChild( vb_toolbar );
	vb_toolbar.setAttribute('collapsed', false);		

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

	setTimeout(function(){ 
		var tmp_positionInfo = vb_toolbar.getBoundingClientRect();
		var tmp_height = tmp_positionInfo.height;
		var vb_ptop = ( vb_h - tmp_height ) / 2; 
		vb_toolbar.style.top = vb_ptop + 'px';
		
		if( vb_visibilityOnStart == 0 ) {
			vb_toolbar.setAttribute('collapsed', true);
		}
	}, 500);	

/*******************************************************************************/

	try {
		Components.utils.import("resource:///modules/CustomizableUI.jsm");
		CustomizableUI.createWidget({
			id: "fp-toggle-toolbar",
			defaultArea: CustomizableUI.AREA_NAVBAR,
			removable: true,
			label: "Toggle Toolbar",
			tooltiptext: "Toggle Toolbar",
			onClick: function() {
				var node = document.getElementById('fp-toolbar');
				var isVisible = node.getAttribute('collapsed');
				
				if( isVisible == 'false' ) {
					node.setAttribute( 'collapsed' , 'true' );
					document.getElementById(this.id).style.listStyleImage = vb_isHiddenImage;
				} else {
					node.setAttribute( 'collapsed' , 'false' );
					document.getElementById(this.id).style.listStyleImage = vb_isVisibleImage;
				}
			},
			onCreated: function(aNode) {
				if( vb_visibilityOnStart == 1 ) {
					aNode.style.listStyleImage = vb_isVisibleImage;
				} else {
					aNode.style.listStyleImage = vb_isHiddenImage;
				}
				return aNode;
			}
		});
	} catch (e) {
		Components.utils.reportError(e);
	};

/*******************************************************************************/
})();
Dateianhänge
vertikaletoolbar.png
verwendete Browser und Erweiterungen sowie Bild vom Firefox (Stand: 13.10.2018) - Sicherheitskonzept für Windowsnutzer

„Mutter ist der Name für Gott, auf den Lippen und in den Herzen aller Kinder dieser Welt.“ (The Crow)

Antworten

Wer ist online?

Mitglieder in diesem Forum: Sephira und 2 Gäste