Einträge im Tab Kontextmenü mit Icon versehen

Zitronella

Ich habe mich zwar schon durchs Forum gewühlt aber bin nicht wirklich fündig geworden.

Möchte wissen ob und wenn ja wie es möglich ist das Tab Kontextmenü (Rechtsklick auf Tab) mit einem Icon (möglichst an die freie Stelle vor dem Text) zu versehen

Also zb für "Tab neu laden" ein Icon (evtl. Base64 Code) davor zu machen.

Das würde mir schon reichen, dann versuche ich danach den Code für die anderen Einträge selbst heraus zu finden.

Danke schon mal im Voraus.

grisu2099

Ja, das geht.

CSS

#context_reloadTab {
    appearance: none !important;
    background: url("../Icons/refresh.png") no-repeat 5px 3px !important;
    }
#context_reloadTab:hover {
    appearance: none !important;
    background: green url("../Icons/refresh.png") no-repeat 5px 3px !important;
    }

Das Icon habe ich im Unterordner "Icons" im Chrome-Ordner liegen.

milupo

Hier findest du alle möglichen Kontextmenüeinträge in einem Code, auch die für die Tabs, ohne und mit Hover:

https://github.com/Endor8/CSS/blo…Rechtsklick.css

Endor pflegt den Code.

Im allgemeinen geht das so wie oben grisu2099 angegeben hat, er hat jedoch eigene Pfade statt Base64-Grafiken verwendet.

Der generelle Thread dazu ist:

Hintergrundfarbe der Menüs/Lesezeichen/Kontextmenü - mit Hover-Effekt

Zitronella

Danke, also beim hovern wird es zwar grün (was ich allerdings nicht brauche aber erstmal so gelassen habe), aber das Icon wird nicht geladen

Habe es auch im Ordner "icon" im Ordner chrome und den Pfad entsprechend angepasst in

url("../icon/reload.png")

und dieses Icon verwendet

Was mache ich falsch?

milupo

Zitat von Zitronella

aber das Icon wird nicht geladen

Bei der Verwendung von Pfaden ist es oft besser, den vollständigen Pfad anzugeben, mit vorgesetztem file:///. Mit relativen Pfaden klappt es öfter nicht.

FuchsFan

Zitat von Zitronella

Was mache ich falsch?

Nur eine Nachfrage, heißt der Ordner bei dir wirklich icon, üblich ist eigentlich icons.

2002Andreas

Zitat von FuchsFan

üblich ist eigentlich icons.

Das hat sich hier so eingebürgert wie man so sagt.

Letztlich ist der Name egal, es muss nur im Pfad angepasst sein.

Zitronella

Ja, er heißt "icon"

Aber mit vollständiger Pfadangabe klappt es. Allerdings gefällt mir das noch nicht so gut, da das Icon auch etwas abgeschnitten ist. Mal gucken was ich da noch basteln muss.

FuchsFan

Zitat von 2002Andreas

Letztlich ist der Name egal, es muss nur im Pfad angepasst sein.

Ist doch klar Andreas, nur weil ja grisu2099 im Pfad auch icons stehen hat (habe ich gesehen, großes I).

2002Andreas

Zitat von Zitronella

Mal gucken was ich da noch basteln muss.

Teste bitte mal:

CSS

#context_reloadTab {
    appearance: none !important;
    background: url("chrome://browser/skin/reload.svg") no-repeat 5px 3px !important;
    }
#context_reloadTab:hover {
    appearance: none !important;
    background: lightgrey url("chrome://browser/skin/reload.svg") no-repeat 5px 3px !important;
    }

Die Farbe für hover musst du dir dann anpassen.

Zitronella

Danke, gefällt mir schon besser. Ist bei mir aber auch abgeschnitten.

mit 1px geht es aber gerade so.

Schade dass der Original Hover Effekt wohl flöten geht und man ihn extra setzen muss. Denn er ist grundsätzlich dünner als im Original. Die Farbe habe ich mit #91c9f7 angespasst.

milupo

Zitat von Zitronella

Ist bei mir aber auch abgeschnitten.

Die Angaben 5px und 3px betzeichen die Postion des Symbols (background-position). Du kannst damit etwas experimentieren. Der erste Wert bezeichnet die horizontale Position, der zweite Wert die vertikale Position. Du kannst auch mirt Schlüsselwörtern arbeiten:

horizontal: left, center, right

vertikal: top, center, bottom

Sören Hentzschel

Zitat von Zitronella

Schade dass der Original Hover Effekt wohl flöten geht und man ihn extra setzen muss.

Logisch, denn mit appearance: none sagst du ja explizit, dass die native Darstellung keine Anwendung finden soll. Ohne es getestet zu haben, ich habe jetzt nur deinen Code, wie er ist, genommen und so verändert, dass er dieses Problem nicht hat. Finetuning (d.h. vor allem die Positionierung) müsstest du selbst vornehmen, da ich gleich weg bin:

CSS

#context_reloadTab::before {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  background-image: url('chrome://browser/skin/reload.svg') !important;
  background-size: 10px 10px !important;
}

PS: Es ist recht sinnlos, in :hover nochmal neu zu definieren, was im regulären Zustand bereits definiert ist. Das erschwert nur die Lesbarkeit des Codes. Ich bin auch weg vom Shorthand für background, weil das alle anderen background-Angaben überschreibt. Ich bevorzuge, explizit nur das zu überschreiben, was man auch überschreiben will.

milupo

So sind die Regeln bei Endor:

CSS

menuitem[label="Tab neu laden"]{
    appearance: none !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrklEQVQ4ja2SS0sCYRSGv58wIjgLXZgbRZDJxSyEATUqJRC8oaAuCgSxRYiJoSVaCOMmiUiCXOVCxMqi6MKQ2A0KgihoI0IUhJvAv/C2CpnUkuiFZ/OdC+c75yXkP+QSXA234MYvXDvPnBH7vp3qaeA4dYDv8D+y8LKA4H0QjhOHYD+2j4oa2I5syH5khyL8GIbt0CaY9k3dSSw1S8Nas2IQUwdTmL6dRrqdRrqdhv/SD8ueJTL0jsxls3GsMlb1XfiQfEti9mkW5or5ZmABt81lvr8ZSgYjV+IQa8UQa8XAlTj0LWaLLNgi2xNkt1gjW2Qx35zH3PNc3xzCFBjwHR5MgREFdes6I1Ngqp5zD6LNKLx1L5gNRvwFTV4DvsNj5m4GmrxGhHZNC9+FD6n3FEIPIXAlDupVdXeJqpwKfIdH4CqAwFWgrw8SrwkE74MwlU0YyY0Iyoyye0bFigLWmhXeuncgk7uT0G/qIV+WC/KMXGwkQgihUzQmdibgFtygU3QPsiXZNb1IR6gI1WvlL0kTUoxXxyFNSPufaBhJ4hJI4pK/NyCEECpOZYbN/QTWKzRTgVfLSAAAAABJRU5ErkJggg==") no-repeat !important;
    min-height: 24px!important;
    padding-left:4px!important;
    background-position:6px 5px!important;}

    menuitem[label="Tab neu laden"]:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrklEQVQ4ja2SS0sCYRSGv58wIjgLXZgbRZDJxSyEATUqJRC8oaAuCgSxRYiJoSVaCOMmiUiCXOVCxMqi6MKQ2A0KgihoI0IUhJvAv/C2CpnUkuiFZ/OdC+c75yXkP+QSXA234MYvXDvPnBH7vp3qaeA4dYDv8D+y8LKA4H0QjhOHYD+2j4oa2I5syH5khyL8GIbt0CaY9k3dSSw1S8Nas2IQUwdTmL6dRrqdRrqdhv/SD8ueJTL0jsxls3GsMlb1XfiQfEti9mkW5or5ZmABt81lvr8ZSgYjV+IQa8UQa8XAlTj0LWaLLNgi2xNkt1gjW2Qx35zH3PNc3xzCFBjwHR5MgREFdes6I1Ngqp5zD6LNKLx1L5gNRvwFTV4DvsNj5m4GmrxGhHZNC9+FD6n3FEIPIXAlDupVdXeJqpwKfIdH4CqAwFWgrw8SrwkE74MwlU0YyY0Iyoyye0bFigLWmhXeuncgk7uT0G/qIV+WC/KMXGwkQgihUzQmdibgFtygU3QPsiXZNb1IR6gI1WvlL0kTUoxXxyFNSPufaBhJ4hJI4pK/NyCEECpOZYbN/QTWKzRTgVfLSAAAAABJRU5ErkJggg==") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-left:3px!important;
    background-position:5px 4px!important;}

Alles anzeigen

Zitronella

Danke ihr Alle.

Mir gefällt bisher am besten der Code von Sören wegen der Aussage

Zitat von Sören Hentzschel

Ich bevorzuge, explizit nur das zu überschreiben, was man auch überschreiben will

Allerdings scheitere ich gerade am Feintuning

PS: Sören Hentzschel hast du deinen Code verändert? wenn ich mich nicht täusche war vorhin noch eine Zeile mehr drin

background-repeat: no-repeat !important;

Aber ich denke ich mache morgen weiter. Ich hab noch keine Idee wie man den Button zentriert an die freie Stelle bekommt (wahrscheinlich ist sie nur sichtbar frei, aber nicht vom Code her) ohne dass der Text nach rechts verschoben wird.

milupo

Zitat von Zitronella

wie man den Button zentriert an die freie Stelle bekommt

center center statt wie oben bei Andreas 5px 3px - das zentriert sowohl horizontal als auch vertikal. Background ist eine Sammeleigenschaft von mehreren Teileigenschaften. Zu diesen Teileigenschaften gehört background-position.

Zitat von Zitronella

background-repeat: no-repeat !important;

Die Eigenschaft background ist - im Unterschied zu list-style-image - für den Hintergrund. Das könnte dazu führen, dass das Symbolfläche gekachelt wird, daher der Wert no-repeat (nicht wiederholen, nicht kacheln). Das entspricht der Teileigenschaft background-repeat.

Hier etwas zum Lesen:

https://wiki.selfhtml.org/wiki/CSS/Tutor…ground-position

Zitronella

ich hab jetzt doch bissel rumgespielt mit, ändert aber gar nix (außer die Größe ist so okay)

Der Text "Tab neu laden" ist leider nach rechts gerückt und ich bekomme es absolut nicht hin dass das nicht passiert.

rum probiert mit dem Code (ausgehend von Sörens Code)

CSS

#context_reloadTab::before {
  content: '' !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url('chrome://browser/skin/reload.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}

2002Andreas

Zitat von Zitronella

ist leider nach rechts gerückt

Du könntest es so anpassen:

CSS

#context_reloadTab::before {
  margin-right: -22px !important; 
  margin-left: 5px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url('chrome://browser/skin/reload.svg') !important;
  background-repeat: no-repeat !important;
  background-position: 4px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

Oder nur den Text verschieben:

CSS

#context_reloadTab > .menu-text{
  margin-left: -12px !important;
}

Die Werte musst du für dich evtl. noch etwas anpassen.

Sören Hentzschel

Zitat von Zitronella

hast du deinen Code verändert? wenn ich mich nicht täusche war vorhin noch eine Zeile mehr drin
background-repeat: no-repeat !important;

Ja, ich hatte die Zeile zunächst auch mit drin stehen, weil sie im vorherigen Code auch vorhanden war und ich das nur umgeschrieben hatte. Da width / height und background-size in meinem Beispiel aber exakt übereinstimmten, gab es so oder so nichts, was sich hätte wiederholen können. Die Zeile war in meinem Code also in jedem Fall überflüssig, darum hatte ich sie wieder entfernt.

Zitronella

Wow cool

Hab die Werte noch etwas angepasst und noch einen Eintrag gemacht wenn mehrere Tabs ausgewählt sind

CSS

#context_reloadTab::before {
  margin-right: -22px !important; 
  margin-left: 3px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url('chrome://browser/skin/reload.svg') !important;
  background-repeat: no-repeat !important;
  background-position: 4px 0px !important;
  background-size: 15px 15px !important;
}
#context_reloadSelectedTabs::before {
  margin-right: -22px !important; 
  margin-left: 3px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 8px !important;
  background-image: url('chrome://browser/skin/reload.svg') !important;
  background-repeat: space !important;
  background-position: 4px 0px !important;
  background-size: 8px 8px !important;
}

Alles anzeigen

Jetzt sieht es meiner Meinung nach perfekt aus.

Die anderen Anpassungen bekomme ich hoffentlich von alleine hin.

Vielen lieben Dank

Trotzdem gerne weitere Anmekungen, wenn es was zu verbessern gibt. Insbesondere, da ich spacemir ausgesucht habe bei mehreren Tabs. Es zeigt zwar das gewünschte Ergebnis, aber ich weiß nicht ob das so trotzdem korrekt und sinnvoll ist.

Ähnliche Themen

Hintergrundfarbe der Menüs/Lesezeichen/Kontextmenü - mit Hover-Effekt