Hallo,
kann man mit Hilfe von css in die Menüleiste ein frei wählbares Icon bzw. einen ergänzenden Text einfügen ?
Eine wählbare Positionierung wäre natürlich auch super.
Beispiel siehe Anhang.
Icon plus Text in Menüleiste einfügen
-
Pentomino -
25. September 2018 um 10:29 -
Erledigt
-
-
Ja, kann man:
Code#menubar-items::after { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k=") "\00A0Text"; margin-left: 100px; }
-
Schon mal danke ! Teste ich, sobald ich dazu komme, bin gespannt :klasse:
-
Sieht schon mal super aus :klasse: Kann man das Icon auch noch in der Höhe verändern ? Also mehr mittig ausrichten ? Das gleiche gilt für den Text.
-
Gelingt mir nicht. margin-top und margin-bottom bewirken nichts. Vielleicht weiß jemand anderes etwas.
So kann man Icon und Text getrennt ansprechen, das ist vielleicht besser:Code#menubar-items > :last-child::after { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k="); margin-left: 100px; } #menubar-items::after { content: "Text"; margin-left: 5px; font-size: 20px; }
-
Mal mit position:relative probieren. Die Pixel-Angaben natürlich an die Höhe der Menuleiste anpassen:
[attachment=0]Screen3.png[/attachment]
(Die Windows 10 Fensterdekorationen sind bei mir aus anderen Gründen immer etwas nach oben verschoben...)
Code
Alles anzeigen#menubar-items > :last-child::after { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k="); margin-left: 100px; position: relative; top: 3px; } #menubar-items::after { content: "Text"; margin-left: 5px; font-size: 16px; position: relative; top: -3px; }
-
Ich finde die Vorschläge jetzt schon ziemlich gut :klasse: Darauf lässt sich aufbauen. Danke an die Helfer
-
Ich hätte doch noch eine zusätzliche Frage:
Wie muss ich vorgehen, wennn ich noch einen dritten "Baustein" (Icon oder Text) hinzufügen möchte?
Wenn ich ein weiteres mal die Bezeichnung "#menubar-items::after" wähle, wird der zweite "Baustein" (hier Text) nicht angezeigt, sondern nur der gewünschte Dritte.
Nochmal zur Klarstellung: Ich hätte gerne die Reihenfolge: Icon,Text,Icon -
Icon,Text,Icon
Meinst du das so?
[attachment=0]Zwischenablage01.png[/attachment]Ich bin mir nicht sicher ob man das letztlich besser machen kann. :-??
Aber wenn dann teste bitte mal mit diesem Zusatzcode:CSS#titlebar-buttonbox::before { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k="); margin-right: 734px!important; position: relative; top: 4px; }
Die Werte musst du dir dann noch anpassen.
-
Danke schon mal. Hat bei mir jetzt leider nicht den gewünschten Erfolg. Hängt wahrscheinlich mit meinen sonstigen "Anpassungen" zusammen. Vielleicht hat noch jemand alternative Vorschläge...
P.S: Werde aber nochmal mit den "Werten" "rumspielen". Vielleicht ergibt sich ja doch noch eine interessante Lösung -
Würde an sich auch so funktionieren:
CSS
Alles anzeigen#menubar-items > :last-child::after { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k="); margin-left: 100px; position: relative; top: 3px; } .titlebar-placeholder::before { content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAXABIDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAUGBwj/xAApEAABAwMDBAIBBQAAAAAAAAABAgMEAAURBhIhBxMxQRQiIzJSYXGR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgQDBv/EAB8RAAEDBAMBAAAAAAAAAAAAAAEAAgMREhMhBFFSYf/aAAwDAQACEQMRAD8AiepPUvUV+lMRNNuTo1vSkJBtyg33V8neXcZAxj6ceDmqVZNY6m0XqmLMjXOZcGnFJVJjypJcbdGBuCwfGORv9ef4q99S4KNP6quKG2UQory++lpeEp7ZCNym/GSVFRweM/5VGvMCLeVNR7UqbNceebA7v3LhJwADgAE5AwOKkEpDtrpDwYZIi5hNTv4F05b9eaXuECNN+chn5LSXu0SMo3AHaePWcUrNbd0SuibfFS/LgIdDSQtPYCtpwMjPv+6Urz0p8cfpad1P0qzf7Oi7W9bDF9t7BMd51lLiVJ27ighQIxjnx5qA6LaNfaYY1Jq8Icuz+HI6CvuBAUB+Q443K28ftSAPZpSnaKqLI5rCwHS0x2Q13V8n9R9UpSjVbBgX/9k="); position: relative !important; top: 3px; left: 5px; } #menubar-items::after { content: "Text"; margin-left: 5px; font-size: 16px; font-weight: bold; position: relative; top: -3px; }
[attachment=0]firefox_2018-10-01_06-07-16.png[/attachment]
Aber ansonsten hat bei mir der Code von Andreas in #9 ebenfalls funktioniert. Wenn es bei dir weiterhin nicht funktionieren sollte, dann bitte deine komplette userChrome.css hier reinposten, so dass man dies gegenfalls in einem Testprofil austesten kann.
-
macko:
Einwandfrei! Deine Version funktioniert bei mir genau wie gewünscht :klasse: Musste auch von den "Werten" für mich fast nichts neu anpassen. Immer wieder erstaunlich, wie je nach individueller Gestaltung scheinbare "Kleinigkeiten" einen großen Effekt auslösen! Gut, dass es hier solche Experten gibt, die für (fast) alles eine Lösung anbieten :klasse: