Lokale Datei als benutzerdefinierte Grafik für angepinnte Seiten

  • Die vorstehende Base64-Version funktioniert bei mir.

    2002Andreas Ich bin mir immer etwas unsicher bei der Pfadangabe zum Icons-Ordner. Wenn ich das richtig verstanden habe, ist bei Ernie2210 der CSS-Code in der Datei userContent.css. Der Ordner Icons und die userContent.css sind also im gleichen Ordner, im Ordner chrome. Der Pfad muss also anders sein, als der, wenn ich aus dem Unterordner CSSWeb in den Ordner chrome hoch gehe und dann wieder herunter in den Ordner Icons.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Der Pfad muss also anders sein

    Ich habe das hier nur Zwecks Test.

    Im Ordner Chrome ist der Unterordner Icons.

    Nehme ich aus dem Unterordner CSS einen Code lautet der Pfad hier:

    CSS
    menuitem[label="Lesezeichen für Seite hinzufügen"]{
    -moz-appearance:none!important;
    background: url("..//Icons/Computer_File_061.gif")no-repeat !important;
    background-position:5px 2px!important;}

    Nehme ich die userContent.css aus dem Ordner chome lautet der Pfad:

    CSS
    li.top-site-outer:nth-child(15) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
        background: url("..//Icons/Nightly neu.ico")no-repeat !important;

    Somit ist der Pfad identisch hier.

    Ich bin mir immer etwas unsicher bei der Pfadangabe zum Icons-Ordner

    Geht mir auch nicht anders, darum habe ich mir extra ein Muster hier erstellt;)

  • Bei mir funktioniert es mit nur einem Punkt, habe jetzt allerdings das Nightly-Symbol für Facebook. :) Mit zwei Punkten hatte ich wie Ernie2210 den Anfangsbuchstaben, in diesem Fall das F von Facebook, als Symbol.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Man kann aber auch sein Bild auf einen Hoster hochladen, und dann den Url dafür eingeben.

    Ich habe mal aus Spaß das Bild hier aus dem Forum genommen:

    #2.781

    Und davon dann den Url hier eingefügt:

    Das sieht dann so aus:

    Bei mir funktioniert es mit nur einem Punkt,

    Zumindest der Code mit dem base64 Code müsste aber bei ihm funktionieren.

  • Zumindest der Code mit dem base64 Code müsste aber bei ihm funktionieren.

    Denke ich auch, da müssen wir aber noch seine Antwort abwarten.


    Beides bedeutet etwas anderes: ein Punkt = Verzeichnis, in dem du dich befindest, zwei Punkte = Verzeichnis eine Ebene darüber. ;)

    Eben, userContent.css und der Ordner icons sind im gleichen Verzeichnis, da braucht man nicht erst ein Verzeichnis höher. Andreas und ich sind es gewohnt, mit den Unterordnern CSS und CSSWeb zu arbeiten, da müssen wir immer erst eine Etage höher, um in den Ordner chrome zu gelangen.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    2 Mal editiert, zuletzt von milupo (27. Juli 2020 um 16:55) aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • Gern geschehen.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Nehme ich aus dem Unterordner CSS einen Code lautet der Pfad hier:

    So habe ich das in der Regel auch, mit einer Ausnahme. Im Ordner css habe ich einen Ordner icons nur für die Bild-Dateien für die Ordner der Lesezeichen. Um diese anzusprechen gibt es im Ordner css eine css-Datei, und darin wird die Bild-Datei so aufgerufen:

    list-style-image: url('icons/yellow.png') !important;

    Es sind hier also überhaupt keine Punkte erforderlich.

    Grüße vom FuchsFan

  • So jetzt habe ich es nochmal mit meinem Logo getestet und festgestellt, dass man das Bild an das Fenster anpassen muss. Das gesamte Fenster hat eine Größe von 100 x 100 px. Somit passt eine 80 x 80 px - wie von Andreas beschrieben - mit der Einstellung "background-position:10px 10px" mittig rein.

    Allerdings habe ich auch einen Nachteil gefunden. Bei manchen Seiten erfolgt dann trotzdem noch die Vorschau bzw. der Anfangsbuchstabe in dem Fenster - was natürlich nur bei einem transparenten Bild zu sehen ist - und ein kleines Vorschaufenster und rechts.

    Ist es möglich diese Vorschau komplett zu deaktivieren?

  • Super, vielen Dank.

    Habe auch gerade gesehen, es ist noch einfacher mit "background-position:center"


    Und mit "background-size:contain" wird das Bild automatisch an das Fenster angepasst!!!

    CSS
    li.top-site-outer:nth-child(2) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
        background: url(".//Icons/Express.png")no-repeat !important;
        background-position:center!important;
        background-size:contain!important;    
      }

    Einmal editiert, zuletzt von Ernie2210 (28. Juli 2020 um 12:59) aus folgendem Grund: Ein Beitrag von Ernie2210 mit diesem Beitrag zusammengefügt.

  • Hallo Zusammen,

    nach dem aktuellen Update auf Version 89 habe ich das Problem, dass die Bilder verkleinert sind und sich der Anfangsbuchstabe des Namens quer über dem Bild befindet:

    Komischerweise ist nicht jedes betroffen, aber ich kann keinen Unterschied feststellen.

    Hat jemand ein Idee, wie ich das abstellen kann.

    Besten Dank,

    Ernie

  • Der schräge Anfangsbuchstabe scheint mir dann doch entweder eher Teil der Grafik zu sein oder durch eine deiner Anpassungen verursacht zu sein. Kannst du es bitte komplett ohne Anpassungen testen?

    Den Abstand kannst du so entfernen:

    CSS
    .top-site-outer .tile .icon-wrapper {
      border-radius: 8px !important;
      width: 100% !important;
      height: 100% !important;
    }

    (Getestet ohne sonstige Anpassung)

  • Ich habe die Anpassung mal rausgenommen und auch in der about:config deaktivert und es ist immer noch da:

    Dann habe ich Tagesschau mal umbenannt in Versuch und jetzt ist da ein V: