Einen Spaltenkopf der Emailübersicht ändern - neue Grafik zuordnen - Text ausblenden

[gelöst, siehe Post #8]

Um Rückfragen vorzubeugen, bitten wir um folgende Angaben:

• Thunderbird-Version: 68.*
• Betriebssystem + Version: Linux Mint

Ich versuche mit userChrome.css einen Spaltenkopf der Emailliste zu ändern: Priorität

Da soll nur eine kleine Grafik angezeigt werden, kein Text.

Ich bekomme das nur "unschön" gelöst, indem ich zuerst alle Stile lösche und dann alles neu aufbaue.

Da aber alle vertikalen Linien und Füllungen mit einem besonderen Verlauf versehen sind, ist das schwierig.

Links und rechts fehlt auch noch ein Rahmen von 1px - mit Verlauf natürlich.

Kann man da nicht direkt einfach eine Grafik zuordnen, ohne den gesamten Stil zu löschen?

Nur der Label "Priorität" muß ausgeblendet werden.

Folgender Versuch ergibt das folgende Bild:

treecol[id="priorityCol"] {
    -moz-appearance: none !important;
    border-top: 1px solid #ffffff !important;
    border-bottom: 1px solid #969696 !important;
    box-shadow: inset 0 -1px 0 #dfdfdf !important;
    background: center no-repeat url("./icons/KW.png"), linear-gradient(to top, #d8d8d8, #e7e7e7, #f1f1f1, #f7f7f7) !important;
}

treecol[id="priorityCol"] > label {
    display:none !important;
}

Vorher:

Nachher:

KW ist besagter Spaltenkopf (KW ist nur eine Testgrafik).

Alle Verläufe und Ränder sind neu aufgebaut, aber eben nicht wie im Original.

Irgeneine Idee?

Besten Dank!

Habe den Text noch mal überarbeitet.

Die Grafiken sind im Original so groß wie bereits angezeigt.

Das ist im Prinzip genau das gleiche, was ich mache.

Da bei mir das Design aber doch etwas aufwendiger gestaltet ist, geht mit -moz-appearance: none !important; eine Menge verloren.

So sieht das mit Deinem Code ohne "Neuaufbau" von Hintergrund und Rand aus:

Die Sache ist gelöst, der Spaltenkopf hat eine neue Grafik ohne das Design zu zerstören:

Erstmal soviel: komplett in JS möglich, css wird nicht benötigt.

Teste das noch und gebe das dann hier wieder.

Hier das Script, um den Spaltenkopf mit einer neuen Grafik zu versehen.

Es funktioniert bisher ohne Fehler.

CSS wird nicht benötigt.

// Urgent!.uc.js - Anzeige einer Grafik (!) anstelle von Text (Priorität)

"use strict";
(function(){

    if (location != 'chrome://messenger/content/messenger.xul') return;

    var priorityColMinWidth = '20px';
    var priorityColMaxWidth = '20px';
    var priorityColpaddingRight = '2px';

    // Anlegen einer neuen Grafik
    var elPriorityColIcon = document.createElement('image');
    var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
    var imageicon = "high.png";
    var props = {

        id : 'new-priority-treecol-icon',
        className: 'priority-treecol-icon',
        src: 'file:' + currentProfileDirectory + '/chrome/icons/' + imageicon,
        style: 'padding-right:' + priorityColpaddingRight

    };

    for (var p in props) elPriorityColIcon.setAttribute(p, props[p]);

    // Ziel-Element in Variable schreiben (ID "priorityCol")
    var elPriorityCol = document.getElementById('priorityCol');

    // Eigenschaften des Ziel-Elements anpassen (Spaltenbreite fixieren)
    elPriorityCol.style.minWidth = priorityColMinWidth;
    elPriorityCol.style.maxWidth = priorityColMaxWidth;

    // nicht benötigte Unterelemente ausblenden (Text und Sortierpfeil)
    elPriorityCol.getElementsByClassName('treecol-text')[0].style.display = 'none';
    elPriorityCol.getElementsByClassName('treecol-sortdirection')[0].style.display = 'none';

    // oben neu definierte Grafik dem Ziel-Element zuordnen
    elPriorityCol.appendChild(elPriorityColIcon);

})();

Das Ganze funktioniert grundsätzlich so nur, wenn man die vorhandenen Elemente über Bezeichner ansprechen kann. Die gilt es (wie üblich) heraus zu finden.

Das neue Icon "high.png" (hier ist es >) wird im Verzeichnis "/chrome/icons/" erwartet (das kann aber wie üblich angepaßt werden).

Die Anzeige der Priorität zu den einzelnen Emails in den jeweiligen Zeilen wird über das AddOn Enhanced Priority Display erzielt.

Hier noch ein Bild, wie der Bereich jetzt aussieht.

Viel Spaß beim Ausprobieren!