Themes verändern auch Text in der Tableiste

milupo

2002Andreas Ich habe ja schon ewig nicht mehr in ein Theme hineingesehen. Diese Light-Themes bestehen ja de facto nur noch aus einer manifest.json und einer Grafik (hier png). Yana Framework.net zeigt den Rahmen um die Titelleisten-Schaltflächen, aber in der manifest.json steht nur Folgendes:

JSON

{"theme": {"images": {"theme_frame": "top.png"}, "colors": {"frame": "rgba(229,230,232,1)", "tab_background_text": "#000"}}, "version": "2.0", "name": "Yana-Framework.net", "manifest_version": 2, "description": "Light blue Persona-theme by the authors of the Yana Framework for PHP"}

2002Andreas

Zitat von milupo

steht nur Folgendes:

Hallo milupo ..

danke für die Erklärung.

Ich habe jetzt alles mögliche versucht, finde aber keine Lösung dafür.

genetic

Zitat von 2002Andreas

finde aber keine Lösung dafür.

Schade, gibt's ja selten 😉

Zitat von 2002Andreas

Ich habe jetzt alles mögliche versucht

Trotzdem vielen Dank für Deinen Einsatz 👍

2002Andreas

Zitat von genetic

vielen Dank für Deinen Einsatz

gern geschehen, auch wenn es leider nicht perfekt geworden ist

Evtl. fällt ja einem anderen User noch etwas dazu ein.

2002Andreas

Zitat von genetic

Schade, gibt's ja selten

Was ich dir anbieten kann sind eigene Icons

Hier mal nur als Beispiel:

So müsste der Code dann dafür aussehen:

CSS

:root[lwtheme-image] {
  & .titlebar-restore, & .titlebar-close, & .titlebar-max, & .titlebar-min{
     list-style-image: none !important;
  }
}

#toolbar-menubar .titlebar-min {
    background: url("file:///C:/Users/weiss/IconsFirefox/Computer_File_059.gif")!important;
    background-repeat: no-repeat !important;
    background-position: 14px 8px !important;
}

#toolbar-menubar .titlebar-max {
    background: url("file:///C:/Users/weiss/IconsFirefox/application_error.png")!important;
    background-repeat: no-repeat !important;
    background-position: 14px 8px !important;
}

#toolbar-menubar .titlebar-restore {
    background: url("file:///C:/Users/weiss/IconsFirefox/Computer_File_020.gif")!important;
    background-repeat: no-repeat !important;
    background-position: 14px 8px !important;
}

#toolbar-menubar .titlebar-close {
    background: url("file:///C:/Users/weiss/IconsFirefox/objects_065.gif")!important;
    background-repeat: no-repeat !important;
    background-position: 14px 8px !important;
}

#toolbar-menubar .titlebar-min,
#toolbar-menubar .titlebar-max,
#toolbar-menubar .titlebar-restore,
#toolbar-menubar .titlebar-close {
   transform: scale(1.1, 1.1) !important;
}

#toolbar-menubar .titlebar-min:hover,
#toolbar-menubar .titlebar-max:hover,
#toolbar-menubar .titlebar-restore:hover,
#toolbar-menubar .titlebar-close:hover {
   background-color: grey !important;
}

Alles anzeigen

Die Icons musst du dir selber aussuchen.

Auch die Art der Pfadangabe kannst du dir anpassen.

Wenn sich die Icons im Ordner Icons im Unterordner chrome vom Profilordner vom Fx befinden, könnte es auch so sein:

#toolbar-menubar .titlebar-min {
background: url("..//Icons/Computer_File_059.gif") !important;
background-repeat: no-repeat !important;
background-position: 14px 8px !important;
}

2002Andreas

Icons gibt es z.B. auf dieser Seite:

Kostenlose vektorisierte Icons — Lade 632,900 Icons herunter (SVG, PNG)

Sören Hentzschel

Sobald ein Theme genutzt wird, verwendet Firefox andere Icons:

CSS

:root[lwtheme-image] {
  .titlebar-button {
    -moz-context-properties: unset;
  }
  .titlebar-min {
    list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
  }
  .titlebar-max {
    list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
  }
  .titlebar-restore {
    list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
  }
  .titlebar-close {
    list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
  }
}

Alles anzeigen

Um die gleichen Icons zu verwenden, die sonst ohne Theme verwendet werden, kann man das rückgängig machen:

CSS

:root[lwtheme-image] {
  .titlebar-button {
    -moz-context-properties: stroke;
  }
  .titlebar-min {
    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
  }
  .titlebar-max {
    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
  }
  .titlebar-restore {
    list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
  }
  .titlebar-close {
    list-style-image: url(chrome://browser/skin/window-controls/close.svg);
  }
}

Alles anzeigen

2002Andreas

Zitat von Sören Hentzschel

kann man das rückgängig machen:

Danke für deine Hilfe

Gleich mal notiert.

genetic

2002Andreas und Sören Hentzschel

Danke, ist wirklich sehr nett gemeint, kommt aber für mich nicht in Frage.

2002Andreas

Zitat von genetic

kommt aber für mich nicht in Frage.

Ist doch nur ein einfacher weitere CSS Code.

Du nutzt das doch eh schon

Sören Hentzschel

Zitat von genetic

2002Andreas und Sören Hentzschel
Danke, ist wirklich sehr nett gemeint, kommt aber für mich nicht in Frage.

Dann weiß ich nicht, was du möchtest. Denn es gibt nur drei Optionen:

Du tauschst die Icons gegen die Icons, die Firefox auch ohne Theme nutzt (siehe mein Beitrag).
Du tauschst die Icons gegen beliebige andere Icons (siehe Beitrag von 2002Andreas).
Du lässt die Icons, wie sie sind (womit sich deine Frage erledigt hat).

genetic

Zitat von Sören Hentzschel

Du tauschst die Icons gegen die Icons, die Firefox auch ohne Theme nutzt (siehe mein Beitrag).

Achso, jetzt verstehe ich 😊

Habe den Code gerade in die CSS kopiert, aber es werden trotzdem die Icons vom Theme angezeigt.

2002Andreas

Zitat von genetic

aber es werden trotzdem die Icons vom Theme angezeigt.

Neustart vom Firefox gemacht?

Hier funktioniert das einwandfrei.

Sören Hentzschel

Du musst möglicherweise noch jeweils ein !important ergänzen. Ich nutze keine userChrome.css und teste immer nur direkt in den Entwicklerwerkzeugen. Das macht in der Priorität der Regeln unter Umständen einen Unterschied. Ich hab das jetzt nicht getestet, ob das in dem Fall notwendig ist.

genetic

Zitat von 2002Andreas

Neustart vom Firefox gemacht?

Logisch.

Zitat von 2002Andreas

Hier funktioniert das einwandfrei.

Muss der Code an einer bestimmten Stelle in der CSS eingefügt werden?

2002Andreas

Zitat von genetic

an einer bestimmten Stelle

Setz ihn mal ganz nach oben, und teste.

genetic

Zitat von 2002Andreas

Setz ihn mal ganz nach oben, und teste.

Ganz oben, ganz unten - es geht nicht.

Hat es evtl. was mit dem "important" zu tun, was Sören Hentzschel geschrieben hat?

2002Andreas

Zitat von genetic

was mit dem "important" zu tun

Teste bitte mal diesen kompl. Code:

CSS

/* userChrome.css **********************************************/

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
/***************************************************************/

/* CSS-Anweisungen bitte unter diesen Kommentar eintragen. */


/***************************************************************/
}
/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */

/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
treechildren::-moz-tree-image(container) {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important;
 }
}

/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
treechildren::-moz-tree-image(container) {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important;
 }
}

/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml){
.bookmark-item[container="true"] {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important; 
 }
}

.titlebar-button {
stroke: white !important;
}

/*******Damit wird der Tabtext nicht blasser, wenn kein Fokus auf dem FF ist*******/
.tab-label {
opacity: 1 !important;
}

/*******Menüleiste eingefärbt*******/
#toolbar-menubar {
color:#fff!important;
background: #0062A8 !important;
}

/*******Tableiste eingefärbt*******/
#TabsToolbar {
color:#fff!important;
background: #0078D7 !important;
}

/*******Abgerundete Tabs*******/
.tab-background {
border-radius: 80px !important;
}

/*******Abgerundeter Schließen Button*******/
.tab-close-button {
border-radius: 80px !important;
}

/*******Aktiver Tab Schrift weiß*******/
.tabbrowser-tab[visuallyselected] {
text-shadow: none !important;
color: white !important;
}


/*******Aktiver Tab hover*******/
.tabbrowser-tab:is([visuallyselected="true"]:hover, [multiselected]) > .tab-stack > .tab-background {
background: #CFCFD8 !important;
}

/*******Aktiver Tab Schrift weiß*******/
.tabbrowser-tab[visuallyselected] {
color: white !important;
}

/* weißer Rahmen um aktiven Tab weg*/
.tab-background[selected] {
 outline: none !important;
}

/******Inaktiver Tab hover*******/
.tabbrowser-tab:not([visuallyselected="true"]):hover > .tab-stack > .tab-background {
background: #005A9E !important;
}

/******Inaktiver Tab HG******/
.tabbrowser-tab:not([visuallyselected]) > .tab-stack > .tab-background {
background: #006CBA !important
}

/******Inaktiver Tab Schrift weiß, transparent (.5 steht für die Deckkraft Werte zwischsen 0 (komplett transparent) und 1 (komplett sichtbar) sind möglich.******/
.tabbrowser-tab:not([visuallyselected]) {
color: rgba(255, 255, 255, .5) !important;
text-shadow: none !important;
}

/*****Inaktiver Tab hover Schrift weiß******/
.tabbrowser-tab:not([visuallyselected]):hover {
color: white !important;
}

/*******Tab schließen Button HG bei hover rot und das X weiß******/
.tab-close-button[fadein]:hover {
fill: white !important;
background: #E81123 !important;
}

/********Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird******/
.tabbrowser-tab:hover .tab-close-button {
display: block !important;
}

/*******< und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt*******/
#toolbarbutton, #scrollbutton-down,#scrollbutton-up, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
fill: rgb(255, 255, 255)!important;
}

/*******v-Button für Alle Tabs auflisten (wenn Tableiste sehr voll) weiß eingefärbt*******/
#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

/*******+ Button für neuer Tab weiß eingefärbt*******/
#tabs-newtab-button, #TabsToolbar #new-tab-button {
fill: rgb(255, 255, 255)!important;
}

#tabs-newtab-button, #TabsToolbar #new-tab-button:hover {
fill: white!important;
}

/*******Runder Neuer Tab Button*******/
#TabsToolbar #tabs-newtab-button > image {
border-radius: 80px !important;
}

/*******Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken*******/
#TabsToolbar {
--toolbarbutton-hover-background: #005A9E !important
}

/*******Lautsprechersymbol auf Tab größer und weiß*******/
.tab-icon-overlay {
fill: White !important;
transform: scale(1.5, 1.5) !important;
}

/*******context menu items and icons instead of just huge icons*******/
#context-back .menu-iconic-icon {
fill: #4169e1 !important;
}

#context-forward .menu-iconic-icon {
fill: #4169e1 !important;
}

#context-reload .menu-iconic-icon {
fill: green !important;
}

#context-stop .menu-iconic-icon {
fill: red !important;
}

#context-bookmarkpage .menu-iconic-icon {
fill: #336699 !important;
}

/*********** tab close - always visible *******************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
visibility: visible !important;
display: block !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned])[faviconized="true"] .tab-close-button {
visibility: collapse !important;
display: none !important;
}

/****** Kontextmenü kürzen *********/
#context-openlinkprivate,
#context-bookmarklink,
menuitem[label="Link in Pocket speichern"],
#context-sendlinktodevice{
display:none!important;
}

/****** Button ... ausblenden *********/

#reader-mode-button{
display:none!important;
}

#pageActionButton{
display:none!important;
}

/*********** Menütextfarbe ****************/

/*
.bookmark-item[container="true"] {
fill:#00437A !important;
color:#00437A !important;
}

toolbarbutton[container="true"] {
filter:none !important;
fill:#00437A !important;
color:#00437A !important;
}
*/
toolbarbutton {
filter:none !important;
fill:#00437A !important;
color:#00437A !important;
background:transparent
}
.toolbarbutton-text {
-moz-appearance: none !important;
color:#00437A !important;
}
menubar{
-moz-appearance: none !important;
color:white !important;
}
menupopup > menu,
menupopup > menuitem {
color:#00437A !important;
}

.menu-accel{
color:#00437A!important;
}

#titlebar-min,#titlebar-max,#titlebar-close{
color:white!important;
}

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {

.sidebar-placesTreechildren,
sidebarheader,
#sidebar-search-label{
color:#00437A !important;
}

.sidebar-placesTreechildren::-moz-tree-image(leaf) {
fill:#00437A!important;
}
}

/******Linkvorschau unten links abschalten******/

@-moz-document url-prefix(chrome://browser/content/browser.xhtml){
    
#statuspanel-label
{display:none!important;}


/******Tooltipps entfernen******/

tooltip{
visibility:hidden!important;
}

/********Neustart im Dropdownmenü einrücken*******/
#restartfirefox-appMenu > label {
margin-left: -24px !important;
}

/********Lesezeichen-Symbolleite schmaler*************/
menupopup[needsgutter] menu:not([checked="true"]),
menupopup[needsgutter] menuitem:not([checked="true"]) {
padding-inline-start: 15px !important;
}
}

/********Damit werden die Standard Icons statt denen aus einem Theme wieder genommen*************/

:root[lwtheme-image] {
  .titlebar-button {
    -moz-context-properties: stroke !important;
  }
  .titlebar-min {
    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg) !important;
  }
  .titlebar-max {
    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg) !important;
  }
  .titlebar-restore {
    list-style-image: url(chrome://browser/skin/window-controls/restore.svg) !important;
  }
  .titlebar-close {
    list-style-image: url(chrome://browser/skin/window-controls/close.svg) !important;
  }
}

Alles anzeigen

So sieht das dann aus:

genetic

Zitat von 2002Andreas

Teste bitte mal diesen kompl. Code:

Zitat von 2002Andreas

So sieht das dann aus:

Was soll ich sagen...?

Perfekt, Danke. 👍

Keine Ahnung, was ich vorher anders (falsch) gemacht habe!?

2002Andreas

Zitat von genetic

Perfekt, Danke.

den reiche ich mal an Sören Hentzschel weiter

Themes verändern auch Text in der Tableiste

genetic 21. Mai 2024 um 20:33

Ähnliche Themen

Linie zwischen aktivem Tab und und Symbolleiste entfernen (eckige Tabs)

Firefox 122 unterstützt Erkennung unglaubwürdiger Produktbewertungen auf amazon.de

Neuling braucht Rat bzgl. Layout

Scrollbuttons andere Farbe

Einstellungsänderungen vornehmen

Hamburgermenü Icons einfügen