Icon plus Text in Menüleiste einfügen

  • 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;
    }
  • 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...)

  • Ich finde die Vorschläge jetzt schon ziemlich gut :klasse: Darauf lässt sich aufbauen. Danke an die Helfer :D

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)

  • 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

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)


  • 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 :)

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)

  • Würde an sich auch so funktionieren:

    [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:

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)