Charamel, Bookmarks Menu Button, Stylish

Speravir

Damit in "Charamel" die von der Erweiterung Bookmark Menu Button erzeugten Chronik- und Lesezeichen-Menüs mit den richtigen Icons angezeigt werden, in die userchrome.css oder in die Erweiterung Stylish folgenden Code eintragen:

CSS

/* Einstellungen für Extension "Bookmarks Menu Button" und Theme "Charamel" */
#bookmarks-menu-button {
  list-style-image: url("chrome://browser/skin/toolbar.png") !important;
  -moz-box-orient: vertical !important;
  -moz-image-region: rect(0px 256px 32px 224px) !important;
  /*padding: 0px !important;*/
}
/*#bookmarks-menu-button:hover,*/
#bookmarks-menu-button[checked="true"],
#bookmarks-menu-button:active {
  -moz-image-region: rect(32px 256px 64px 224px) !important;
}
#bookmarks-menu-button[disabled="true"] {
  -moz-image-region: rect(64px 256px 96px 224px) !important;
}


#history-menu-button {
  list-style-image: url("chrome://browser/skin/toolbar.png") !important;
  -moz-box-orient: vertical !important;
  -moz-image-region: rect(0px 224px 32px 192px) !important;
}
/*#history-menu-button:hover,*/
#history-menu-button:active {
    -moz-image-region: rect(32px 224px 64px 192px) !important;
}
#history-menu-button[disabled="true"] {
  -moz-image-region: rect(64px 224px 96px 192px) !important;
}
toolbar[iconsize="small"] #bookmarks-menu-button {
  list-style-image: url("chrome://browser/skin/toolbar-small.png") !important;
  -moz-image-region: rect(0px 192px 24px 168px) !important;
}
/*toolbar[iconsize="small"] #bookmarks-menu-button:hover,*/
toolbar[iconsize="small"] #bookmarks-menu-button[checked="true"],
toolbar[iconsize="small"] #bookmarks-menu-button:hover:active {
  -moz-image-region: rect(24px 192px 48px 168px) !important;
}
toolbar[iconsize="small"] #bookmarks-menu-button[disabled="true"] {
  -moz-image-region: rect(48px 192px 72px 168px) !important;
}
toolbar[iconsize="small"] #history-menu-button {
  list-style-image: url("chrome://browser/skin/toolbar-small.png") !important;
  -moz-image-region: rect(0px 168px 24px 144px) !important;
}
/*toolbar[iconsize="small"] #history-menu-button:hover,*/
toolbar[iconsize="small"] #history-menu-button:active {
  -moz-image-region: rect(24px 168px 48px 144px) !important;
}
toolbar[iconsize="small"] #history-menu-button[disabled="true"] {
  -moz-image-region: rect(48px 168px 72px 144px) !important;
}

Alles anzeigen

Nachtrag:
Die :hover-Effekte sind jeweils deaktiviert/auskommentiert, weil das bei den anderen Buttons in Charamel auch keine Anwendung findet (nur der Hintergrund, aber das funktioniert unabhängig von dieser Einstellung hier). Die Grundlage des CSS-Codes oben ist aber von Bazons SaFire entnommen (hatte ich auch noch vergessen zu erwähnen), wo das aktiv verwendet wird.
Nachtrag Ende

In Stylish selbst funktioniert die Anzeige des Aktivierungsstatus nicht. Durch folgenden Code, idealerweise in Stylish eingetragen (*grins*), lässt sich das ändern:

CSS

/* Einstellung, um in Stylish die Checkboxen anzeigen zu können */
treechildren::-moz-tree-checkbox {
    /* css for unchecked cells */
    list-style-image: url("chrome://global/skin/checkbox/checkbox.png") !important;
    -moz-image-region:rect(0px 18px 18px 0px) !important;
}
treechildren::-moz-tree-checkbox(checked) {
    /* css for checked cells */
    list-style-image: url("chrome://global/skin/checkbox/checkbox.png") !important;
    -moz-image-region:rect(0px 36px 18px 18px) !important;
}

Alles anzeigen

Wie man allerdings die erweiterte Anzeigefunktionalität in Charamel (mit :focus und :active) auch in Stylish verfügbar machen soll, weiß ich nicht.

HTH,
Steffen

Bazon Bloch

Hallo und willkommen im Forum, Steffen!

Das ist ja ein bemerkenswerter erster Beitrag. :wink: :klasse:
Sehr praktisch....

Wie man das mit dem active und dem focused state macht, weiß ich auch nicht, aber im tree werden mehrere Argumente häufig in dieser Weise verwendet (z.B.):

Code

treechildren::-moz-tree-twisty(open, selected, focus) {...}

Vielleicht ist das ja nützlich?

Gruß,
Bazon

Speravir

(Zunächst mal: Ich hab sehr wenig Zeit, deshalb diese lange Verzögerung.)

Zitat von Bazon Bloch
Hallo und willkommen im Forum, Steffen!
Wie man das mit dem active und dem focused state macht, weiß ich auch nicht, aber im tree werden mehrere Argumente häufig in dieser Weise verwendet (z.B.):
Code
treechildren::-moz-tree-twisty(open, selected, focus) {...}
Vielleicht ist das ja nützlich?

Mit dieser deiner Hilfe habe ich den CSS-Code mal erweitert:

CSS

/* css for unchecked cells */
treechildren::-moz-tree-checkbox {
    list-style-image: url("chrome://global/skin/checkbox/checkbox.png") !important;
    -moz-image-region:rect(0px 18px 18px 0px) !important;
}
/*
treechildren::-moz-tree-checkbox(focus) {
    -moz-image-region:rect(18px 18px 36px 0px) !important;
}
*/
treechildren::-moz-tree-checkbox(selected) {
    -moz-image-region:rect(36px 18px 54px 0px) !important;
}


/* css for checked cells */
treechildren::-moz-tree-checkbox(checked) {
    list-style-image: url("chrome://global/skin/checkbox/checkbox.png") !important;
    -moz-image-region:rect(0px 36px 18px 18px) !important;
}
/*
treechildren::-moz-tree-checkbox(checked,focus) {
    -moz-image-region:rect(18px 36px 36px 18px) !important;
}
*/
treechildren::-moz-tree-checkbox(checked,selected) {
    -moz-image-region:rect(36px 36px 54px 18px) !important;
}

Alles anzeigen

Die :focus-Varianten sind auskommentiert, weil das Ergebnis etwas eigenwillig ist (einmal erhaltener Focus geht nicht wieder weg, solange das Stylish-Einstellungsfenster offen ist).

BTW: Wo kann ich eine vollständige Auflistung finden, welche CSS-Befehle für Extensions und Themes Verwendung finden können, am besten in einer Offline-Version?

Ciao,
Steffen