Beiträge von Mitleser

Mitleser

Zitat von lenny2

CSS ändert das Symbol „Im Ordner anzeigen“ in den Suchergebnissen der Seitenleiste nicht.

Das finde ich so nicht. Könntest du vielleicht bei Gelegenheit einen Screenshot mit einem größeren Bildausschnitt machen?

Spoiler anzeigen

OT:

Zitat von lenny2

00_VertToolbarWithButton_lite.uc.js
Es könnte nützlich sein, in die Beschreibung die Möglichkeit aufzunehmen, die Sichtbarkeit der vertikalen Symbolleiste beim Start von Firefox umzuschalten (-off\-on) toolbar.classList.toggle('button-off');

Habe die gewünschte zusätzliche Funktion hier eingefügt:
RE: Seitennavigation - Fly Out Menü

Mitleser

Ja, dann ist es wohl so...

Mitleser

Zitat von Mitleser

Das > img funktioniert nur weil du ein list-style-image Attribut gesetzt hast. Das wird nur vom Browser nicht mehr zugelassen/interpretiert.

Besser verständlich?:
Das img bei #PlacesToolbarItems toolbarbutton[container]... ist im Pfad nicht vorhanden und funktioniert nur weil du ein list-style-image Attribut gesetzt hast. Das wird nur nur vom Browser in diesem Fall nicht mehr zugelassen/interpretiert. Zumindest vermute ich das; man sollte einen Experten zurate ziehen.

Das img bei menu.bookmark-item[container] > img hingegen ist real existent und funktioniert auch anstatt .menu-icon (ohne list-style-image Attribut)

Spoiler anzeigen

Das wird mir langsam zu anstrengend...
Kauf dir endlich einen neuen Rechner...1-2 Jahre alte wieder aufbereitete Leasingrückläufer (z.B. als Businesslaptop/Workstationlaptop) gibt es auch gebraucht sehr günstig...Habe auch so einen...

Mitleser

Zitat von Horstmann

Das list-style-image an der Stelle wird demnach überschrieben?

Ja. Das > img funktioniert nur weil du ein list-style-image Attribut gesetzt hast. Das wird nur vom Browser nicht mehr zugelassen/interpretiert.

Zitat von Horstmann

Nur mal ganz grob ausgeweitet, könnte sowas auch klappen, für Leiste und Popup, je nachdem wo das jeweilige Label benutzt wird?

Nein. Aber das (Zeile 7):

CSS

/*+++++Lesezeichenordner mit relativem Pfad (Stand FF 143)+++++*/

/*Alle Lesezeichenordner im Dropdown der Lesezeichenleiste (Änderung in 143)*/
menu.bookmark-item[container] > img {
	content: url('../icons/16folder03-green.svg') !important;
}
/*Lesezeichenordner mit einem definierten Text im Dropdown der Lesezeichenleiste (Änderung in 143)*/
menu.bookmark-item:is([label="Info"],[label="Shoppen"]) > img {
	content: url('../icons/16folder03-blue.svg') !important;
}
/*Alle Lesezeichenordner in der Lesezeichenleiste (Änderung in 143)*/
#PlacesToolbarItems toolbarbutton[container].bookmark-item:not(.subviewbutton) .toolbarbutton-icon {
	content: url('../icons/16folder03-orange.svg') !important;
}
/*Lesezeichenordner mit einem definierten Text in der Lesezeichenleiste (Änderung in 143)*/
#PlacesToolbarItems toolbarbutton[label="Shoppen"].bookmark-item:not(.subviewbutton) .toolbarbutton-icon {
	content: url('../icons/16folder03-black.svg') !important;
}
/*Lesezeichenordner mit einem definierten Text ohne Anzeige des Textes in der Lesezeichenleiste (Änderung in 143)*/
#PlacesToolbarItems toolbarbutton[label="Info"].bookmark-item > .toolbarbutton-text {
	display: none !important;
}
#PlacesToolbarItems toolbarbutton[label="Info"].bookmark-item:not(.subviewbutton) .toolbarbutton-icon {
	content: url('../icons/16folder03-cyan.svg') !important;
}
/*Der Ordner 'Weitere Lesezeichen' in der Lesezeichenleiste (keine Änderung in 143)*/
#OtherBookmarks .toolbarbutton-icon {
	list-style-image: url('../icons/16folder03-red.svg') !important;
	/*funzt auch:
	content: url('../icons/16folder03-black.svg') !important;*/
}

/*Alle Lesezeichenordner in der Sidebar (keine Änderung in 143)*/
treechildren.sidebar-placesTreechildren::-moz-tree-image(container) {
	list-style-image: url('../icons/16folder03-cyan.svg') !important;
}

/*Alle Lesezeichenordner in der 'Bibliothek > Chronik > Chronik verwalten' (keine Änderung in 143)*/
#placesList > treechildren::-moz-tree-image(container) {
	list-style-image: url('../icons/16folder03-yellow.svg') !important;
}
#placeContent > treechildren::-moz-tree-image(placesContentTitle) {
	list-style-image: url('../icons/16folder03-purple.svg') !important;
}

Alles anzeigen

Mitleser

Oder so:

CSS

/*Lesezeichenordner mit einem definierten Text in der Lesezeichenleiste (Änderung in 143)*/
#PlacesToolbarItems toolbarbutton:is([label="Info"],[label="Shoppen"]).bookmark-item:not(.subviewbutton) .toolbarbutton-icon {
	content: url('../icons/16folder03-black.svg') !important;
}

Mitleser

Zitat

Buttons funktionieren nur im/ für das erste Fenster

@Horstmann , die von Dir erwähnte vertikale Zusatzleiste mit Button funktioniert auch bei geöffnetem zweiten Fenster jeweils fensterabhängig. Der Dateiname ist übrigens wegen des Startzeitpunktes bewusst gewählt:
00_VertToolbarWithButton_lite.uc.js!

Mitleser

Zitat von lenny2

Ich verwende ein ähnliches Skript für die Bibliothek.

event.target.ownerGlobal.openTrustedLinkIn('chrome://browser/content/places/places.xhtml', 'tab');verursacht das Problem. Das Öffnen im Tab verkompliziert die Iconeinbindung. Das öffnen im Fenster ist hier unkomplizierter.
event.target.ownerGlobal.PlacesCommandHook.showPlacesOrganizer('History'); Siehe Screenshot + Beitrag in #89

Mitleser

Tatsächlich, funzt genau in dieser Konstellation nicht! Jetzt mit einem LinkButton (für die Bibliothek in Tab öffnen) mit event.target.ownerGlobal.openTrustedLinkIn('chrome://browser/content/places/places.xhtml', 'tab')in einem neuen Profil getestet. Hier funzt das:

CSS

#placeContent > treechildren::-moz-tree-image(placesContentTitle),
#placesList > treechildren::-moz-tree-image(closed),
#placesList > treechildren::-moz-tree-image(title, container), 
#placesList > treechildren::-moz-tree-image(title, query, hostContainer) { 
	list-style-image: url("../css/image/14folder/14folder03-031-orange.svg") !important; 
}
#placesList > treechildren::-moz-tree-image(closed, hover),
#placesList > treechildren::-moz-tree-image(title, container, hover),
#placesList > treechildren::-moz-tree-image(title, query, hostContainer, hover){ 
	list-style-image: url("../css/image/14folder/14folder13-031-orange.svg") !important; 
}
#placesList > treechildren::-moz-tree-image(open){
	list-style-image: url("../css/image/14folder/14folder13-022-gold.svg") !important; 
}
#placesList > treechildren::-moz-tree-image(open, hover){ 
	list-style-image: url("../css/image/14folder/14folder03-022-gold.svg") !important; 
}

Alles anzeigen

Das muss natürlich noch gekürzt werden.

Mitleser

lenny2 , Ich habe mal ein Beispiel meiner Iconeinbindung mit relativen Pfaden:

CSS

/*+++++Lesezeichenordner mit relativem Pfad (Stand FF 143)+++++*/

/*Alle Lesezeichenordner im Dropdown der Lesezeichenleiste (Änderung in 143)*/
menu.bookmark-item[container] > img {
	content: url('../icons/16folder03-green.svg') !important;
}

/*Alle Lesezeichenordner in der Lesezeichenleiste (Änderung in 143)*/
#PlacesToolbarItems toolbarbutton[container].bookmark-item:not(.subviewbutton) .toolbarbutton-icon {
	content: url('../icons/16folder03-orange.svg') !important;
}

/*Der Ordner 'Weitere Lesezeichen' in der Lesezeichenleiste (keine Änderung in 143)*/
#OtherBookmarks .toolbarbutton-icon {
	list-style-image: url('../icons/16folder03-red.svg') !important;
	/*funzt auch:
	content: url('../icons/16folder03-black.svg') !important;*/
}

/*Alle Lesezeichenordner in der Sidebar (keine Änderung in 143)*/
treechildren.sidebar-placesTreechildren::-moz-tree-image(container) {
	list-style-image: url('../icons/16folder03-cyan.svg') !important;
}

/*Alle Lesezeichenordner in der 'Bibliothek > Chronik > Chronik verwalten' (keine Änderung in 143)*/
#placesList > treechildren::-moz-tree-image(container) {
	list-style-image: url('../icons/16folder03-yellow.svg') !important;
}
#placeContent > treechildren::-moz-tree-image(placesContentTitle) {
	list-style-image: url('../icons/16folder03-purple.svg') !important;
}

Alles anzeigen

Mitleser

Zitat

Hat den Titel des Themas von „Wenn man eine Rese tut, ...“ zu „Wenn man eine Reise macht, ...“ geändert.

"Wenn man eine Reise tut" bezieht sich meist auf das Sprichwort "Wenn einer eine Reise tut, so kann er was erzählen", das von Matthias Claudius stammt.

Mitleser

@Horstmann
Zeitgleicher Post, siehe EDIT in #34.

Mitleser

Zitat von Horstmann

Das Prinzip sollte/könnte auch für andere Stellen klappen, die --menuitem-icon als Variable benutzen.

Könnte sein, hier handelt es sich allerdings um --bookmark-item-icon.

CSS

.bookmark-item {
 &[container], &[hostContainer] {
   --bookmark-item-icon: url("chrome://global/skin/icons/folder.svg");
 }
}

EDIT: @Horstmann, ja das funktioniert auch.

CSS

/*original*/
#context-reload {
 --menuitem-icon: url("chrome://global/skin/icons/reload.svg");
}
/*neu*/
#context-reload > .menu-icon {
	content: url("../css/image/16synchronization-3neongreen.svg") !important;
}

Mitleser

Zitat von Horstmann

Einen Vorschlag hätte ich noch

Die kürzeste Version ever! Der Preis geht an Horstmann für Version 1!
Vers. 2 funzt nicht.

Mitleser

Wenn ich die Größe des Icons von 14/14 (.svg-Größe) auf 12/12 haben möchte (und ich werde das auch so lassen), sieht das bei mir genauso aus wie hier:

CSS

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
	width: 12px !important;
	height: 12px !important;
	margin-left: -1px !important;
	padding-right: 29px !important;
	padding-bottom: 7px !important;
}
menu.bookmark-item[container="true"]:hover::before  {
	content: url("../css/image/14folder/14folder13-031-orange.svg") !important;
}
menu.bookmark-item[container="true"] > img {
	display: none !important;
}

Alles anzeigen

Mitleser

Hier funktionieren beide Versionen:

content: url("../css/image/14folder/14folder03-031-orange.svg") !important;

oder auch

background-image: url("../css/image/14folder/14folder03-031-orange.svg") !important;

wobei content sicherlich die bessere Lsg. ist, da die Background-Attribute gekürzt bzw. gelöscht werden können. Und wenn das Icon 16/16 ist, benötigt es auch keine Größenangabe. Hier funzt diese Kurzform:

CSS

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
	padding-right: 24px !important;
	padding-bottom: 2px !important;
}
menu.bookmark-item[container="true"] > img {
	display: none !important;
}

Mitleser

Zitat von Horstmann

Für den spezifischen Zweck könnte man evtl. auch ein background-image oder ::before Element als Ersatz benutzen

Habe ich genauso gemacht:

CSS

/*+++++Dropdown Lesezeichen: Ordnersymbol neues Icon+++++++++++++*/
menu.bookmark-item[container="true"]::before  {
    background-image: url("../css/image/14folder/14folder03-031-orange.svg") !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: left 1px top 0px !important;
    padding-right: 24px !important;
}
menu.bookmark-item[container="true"]:hover::before  {
    background-image: url("../css/image/14folder/14folder13-031-orange.svg") !important;
}
/*Originalicon löschen*/
menu.bookmark-item[container="true"] > img {
    display: none !important;
}

Alles anzeigen

CSS

/*+++++Lesezeichenleiste: Ordnersymbol neues Icon+++++++++++++*/
#PlacesToolbarItems > toolbarbutton[container="true"] {
	background-image: url("../css/image/14folder/14folder03-022-gold.svg") !important;
	height: 14px !important;
	background-repeat: no-repeat !important;
	background-size: 28px 16px !important;
	background-position: left -1px top 3.5px !important;
}
#PlacesToolbarItems > toolbarbutton[container="true"]:hover{
	background-image: url("../css/image/14folder/14folder13-022-gold.svg") !important;
}
/*Originalicon löschen*/
#PlacesToolbarItems toolbarbutton[container="true"].bookmark-item:not(.subviewbutton) > .toolbarbutton-icon {
	display: none !important;
}

Alles anzeigen

Mitleser

Ich habe mal per 'Suchen und Ersetzen' lt. #3 deinen Code ersetzt, funktioniert es nun?

CSS

#urlbar[open] > .urlbar-background {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar[focused] > .urlbar-background{
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

/*Adress und Suchfeld - Rahmen farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

.urlbar-background {
   border-radius: 4px !important;;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbar-background {
   animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > .urlbar-background {
   box-shadow: none !important;
}

/*Popup-Menü wird ausgeblendet wenn Suche über Adressleiste erfolgt*/
.urlbarView {
   display: none !important;
}

#PopupAutoCompleteRichResult {
   display: none !important;
}

#searchbar:focus-within {
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

/*Abstände der Einträge in Menüs wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
   padding-block: 1px !important;
   padding-inline-start: 14px !important;
   font-size: 13px !important;
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !important;
}

/*Mehrzeilige Lesezeichen-Symbolleiste*/
#PersonalToolbar {
   max-height: calc(19px * 3) !important;
}

#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
   display: block !important;
}

#PersonalToolbar toolbarbutton {
   min-height: 19px !important;
   max-height: 19px !important;
}

#PlacesToolbarItems {
   max-height: 57px!important;
   display: flex!important;
   flex-wrap: wrap!important;
   overflow-x: visible!important;
   overflow-y: auto!important;
}

#PlacesToolbar,
#PersonalToolbar > scrollbar {
   -moz-window-dragging: no-drag !important;
}

#PlacesToolbar #PlacesChevron {
   display: none !important;
}


@media not (-moz-bool-pref: 'sidebar.verticalTabs') {
  .tabbrowser-tab[fadein]:not([pinned]) {
  	flex: 0 1 auto !important;
    max-width: 150px !important;

    tab-group[collapsed] > & {
      min-width: 0 !important;
      max-width: 0 !important;
    }
  }
}

/*tabbreite an tabtext anpassen*/
.tabbrowser-tab {
  &:not([pinned]) {
   flex: 0 0 auto !important;
   max-width: 250px !important;
  }
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-left: 5px !important;
  margin-left: 1px !important;
  width: unset !important;
}

.tab-close-button {
  display: flex !important;
}

.tab-close-button {
  display: flex !important;
}


/*Lautsprechersymbol auf Tab größer und blau*/
.tab-icon-overlay {
   fill: #083469 !important;
   transform: scale(1.3) !important;
}

/*Tab schließen Button HG bei hover (background) und  x (fill) je nach Farbe*/
.tab-close-button[fadein]:hover {
   fill: white !important;
   background: #70100c !important;
}

/*Keine Einblendungen bei Hover über Tab*/
#tab-preview-panel {
   display: none !important;
}

/*Eckige Tabs ohne HG Schatten*/
.tab-background {
   box-shadow: none !important;
   border-radius: 2px !important;
}

/*Aktiver Tab HG Farbeinstellung*/
.tabbrowser-tab[visuallyselected] .tab-background {
   background: #083469 !important;
}

/*Neuer Tab Button ausblenden*/
#TabsToolbar #tabs-newtab-button {
  display: none !important;
}

/*Neuer Tab ausblenden*/
.tabbrowser-tab[label="Neuer Tab"] {
  display: none !important;
}

.tabbrowser-tab[label="Neuer Tab"] {
  display: none !important;
}

/* Visuelle Anzeige des Seitenladezustands in der Kopfzeile der Tabs*/
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 0;
   background-color: #2A970A;
   height: 3px;
}

.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 1;
   transform-origin: left center;
   animation: 2s ease-in-out scale;
}

.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
   transition: opacity 2s ease-out;
}

@keyframes scale {
   0% {transform: scaleX(0);}
   100% {transform: scaleX(1);}
}

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
}

#navigator-toolbox {
    position: relative;
    padding-bottom: calc( var(--tab-min-height) + 8px );
}


/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 30px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0 8px !important;
    background-size: 25px 17px !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt */
.private-browsing-indicator-with-label {
    display: none !important;
}

/* Tabbreite tab max-width */
.tabbrowser-tab[fadein]:not([pinned]) {
   max-width: 150px !important;
   overflow: hidden !important;

Alles anzeigen

Mitleser

Arsen , probiere mal .urlbar-background statt #urlbar-background....

Mitleser

Zitat von lenny2

Ein guter universeller Button, aber CSPmuss deaktiviert werden, security.browser_xhtml_csp.enabled set to false.
Vielleicht haben Sie das bereits korrigiert?

lenny2 Hallo, ich habe diesen Button mal umgeschrieben. Statt 'https://www.reddit.com/r/FirefoxCSS/' kannst du auch jeden anderen Link (im UserConfig-Bereich) auf eine Website einfügen (z.B.: about:about).

JavaScript

// JavaScript Document
// B_UniversalLink.uc.js

// Das Script erstellt einen Button, der einen Link auf eine - im UserConfig-Bereich konfigurierbare - Website (hier als Beispiel: reddit.com/r/FirefoxCSS/) ausführt. So kann auch bei ausgeblendeter Lesezeichenleiste auf die Seite schnell zugegriffen werden.
// Bei mehreren Buttons die id-Änderung nicht vergessen...

(function() {
  if (!window.gBrowser)
	return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
         id = 'link-button-uni', // Id des Buttons
       link = 'https://www.reddit.com/r/FirefoxCSS/', // Linkziel des Buttons
      label = 'Quicklink: reddit.com/...', // Bezeichnung des Buttons
tooltiptext = 'Quicklink:\nreddit.com/r/FirefoxCSS/',
// Icon-------------------------------------------------------
       icon = 'reddit-small_16.svg',  // [Name.Dateiendung] des Symbols
   iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
//const end
	if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
		Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
	}
//----
CustomizableUI.createWidget({
    id: id,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: label,
    tooltiptext: tooltiptext,

    onCreated: (button) => {
		button.style.MozContextProperties = 'fill, stroke, fill-opacity';
		button.style.listStyleImage = 'url("' + curProfDir + iconPath + icon + '")';
		button.style.minWidth = 'fit-content';
//click
button.addEventListener('click', () => {
	if (event.button === 0) {
       	 event.target.ownerGlobal.openTrustedLinkIn(link, 'tab');
	}
});
	}
});
//----
})();

Alles anzeigen

Mitleser

Phil L. Herold (44) ist gestorben.

Beiträge von Mitleser

Icon für Lesezeichen-Ordner CSS-Code funktioniert nicht mehr

Icon für Lesezeichen-Ordner CSS-Code funktioniert nicht mehr

Icon für Lesezeichen-Ordner CSS-Code funktioniert nicht mehr

Icon für Lesezeichen-Ordner CSS-Code funktioniert nicht mehr

Icon für Lesezeichen-Ordner CSS-Code funktioniert nicht mehr

Buttons funktionieren nur im / für das erste Fenster

Icon für Lesezeichen-Ordner nicht mehr in Farbe (CSS-Code streikt)

Icon für Lesezeichen-Ordner nicht mehr in Farbe (CSS-Code streikt)

Icon für Lesezeichen-Ordner nicht mehr in Farbe (CSS-Code streikt)

Wenn man eine Reise macht, ...

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

FF143 - Foldericons in Unterordnern werden nicht mehr zugewiesen

Rahmen der Urlbar lässt sich farblich nicht mehr ändern

Rahmen der Urlbar lässt sich farblich nicht mehr ändern

Button ändern bei einem Skript

In memoriam