Anpassung Unterforensymbole auf Startseite des Forums

Hallo,

Zitat von milupo

Bei drei Symbolen klappt die Anpassung nicht, und zwar für Fiefox Allgemein, Firefox-Produkte für Android und Firefox-Produkte für iOS.

Das liegt daran, dass die Symbole von Marken (Firefox, Android, Apple) nicht länger Bestandteil des regulären Icon-Schriftsatzes sind und daher auf andere Weise von mir eingebunden worden sind.

Zitat von milupo

Die drei Symbole sollten spezifische Symbolnamen erhalten, damit die Symbole anpassbar sind.

Die Farben sind auch für diese Icons anpassbar, aber auf andere Weise:

.wbbBoardNode {
  &[data-board-id='15'], &[data-board-id='20'], &[data-board-id='24'] {
    &.wbbBoardNode--unread {
      .wbbBoardNode__icon {
        background-color: orange;
      }
    }
    
    .wbbBoardNode__icon {
      background-color: rebeccapurple;
    }
  }
}

Zitat von milupo

Auch mit der Selektorketten-Variante funktioniert es nicht, obwohl die sich unterscheiden:

Das habe ich so gelöst.

/* Firefox Allgemein */
#wbbBoardNodeList2 > div:nth-child(1) > div:nth-child(1){
    color: darkorange !important;
}

/* Firefox-Produkte für Android */
#wbbBoardNodeList3 > div:nth-child(1) > div:nth-child(1){
    color: #5EBD3E !important;
}

/* Apple-Icon */
#wbbBoardNodeList3 > div:nth-child(2) > div:nth-child(1){
    color: #1dacd6 !important;
}

Dein Code unterscheidet nicht zwischen Foren mit gelesenen und ungelesenen Beiträgen. Und ich rate ausdrücklich von :nth-child()-Konstrukten ab, wenn es nicht zwingend erforderlich ist. Das ist total fragil und funktioniert bei der kleinsten Änderung der Elementfolge nicht mehr, und lesbar ist solcher Code auch nicht. Vergleiche das mit dem Code über deinem Beitrag: Da weiß man sofort, was der Code verändert.

PS: Falls sich nach Betrachten beider Vorschläge jemand wundert, wieso sowohl background-color als auch color funktioniert: Die Verwendung von color funktioniert für diese drei Icons nur, weil ich im Design background-color: currentColor gesetzt habe. Damit wird die Textfarbe implizit als Hintergrundfarbe verwendet. De facto muss hier die Hintergrundfarbe verändert werden, weil eine SVG-Maske verwendet wird. Was davon man nun im CSS überschreibt, ist egal, weil's auf das Gleiche hinausläuft.

Zitat von Sören Hentzschel

Und ich rate ausdrücklich von :nth-child()-Konstrukten ab, wenn es nicht zwingend erforderlich ist.

Das hattest Du schon erwähnt, und im "Normalfall" halte ich mich auch daran. Hier war es für mich die einzige Möglichkeit, um die Symbole anzusprechen.

Trotzdem ein Dankeschön für die erneute Aufklärung, und den Code.

Sören Hentzschel

Nun habe ich versucht bei den übrigen Icons auch so zu verfahren, aber da habe ich keine andere Möglichkeit gefunden. So musste ich wieder diese Schreibweise nutzen.

/* Vorab-Versionen */
#wbbBoardNodeList2 > div:nth-child(2) > div:nth-child(1) {
    color: #ffbf00 !important;
} 

Oder lässt sich das auch noch anders aufstellen?

Edit:

Nun habe ich das damit versucht, das funktioniert. .wbbBoardNode[data-board-id="7"] .wbbBoardNode__icon {  Ist das so i.O.

Ja, das passt so. Außer, dass du halt wieder keinen Unterschied zwischen Foren mit gelesenen und ungelesenen Beiträgen hast.

Zitat von FuchsFan

Ist das so i.O.

Wenn du gelesen und ungelesen trennen willst:

.wbbBoardNode[data-board-id="4"] .wbbBoardNode__unreadIcon { 
  color: blue !important;
}

.wbbBoardNode[data-board-id="4"] .wbbBoardNode__icon { 
  color: green !important;
}

.wbbBoardNode[data-board-id="16"] .wbbBoardNode__unreadIcon { 
  color: blue !important;
}

.wbbBoardNode[data-board-id="16"] .wbbBoardNode__icon { 
  color: red !important;
}

In diesem Fall gibt es einen ungelesenen Beitrag unter Anpassungen.

Der hat ein blaues Icon.

Wenn du den Beitrag gelesen hast, dann ist es rot.

Unter Erweiterungen ist der Button bei gelesen grün, bei ungelesen auch blau.

Die Farben kannst du dir aber beliebig anpassen für jedes Unterforum.

Zitat von Sören Hentzschel

Ja, das passt so. Außer, dass du halt wieder keinen Unterschied zwischen Foren mit gelesenen und ungelesenen Beiträgen hast.

Wenn ich da nur den Unterschied erkannt , bzw. davon gewusst hätte, dann wäre meine Reaktion wohl anders ausgefallen. So habe ich das aber hin genommen, und mich gefragt, wovon spricht der da.

Aber 2002Andreas hat ja ein Beispiel vorgegeben, jetzt ist der Groschen gefallen. Danke, Andreas!

Zitat von FuchsFan

jetzt ist der Groschen gefallen. Danke, Andreas!

Freut mich, war wie immer gern geschehen

Foren mit neuen Beiträgen haben ein Badge mit 'ner Nummer drin. Das muss für mich nicht weiter erleuchtet sein, daher ganz simpel wie vorher auch:

/*color for categories*/
.wbbBoardNode[data-board-id="2"] .wbbBoardNode__icon
{
    color: #0004ff !important;
}
.wbbBoardNode[data-board-id="15"] .wbbBoardNode__icon
{
    color: darkorange !important;
}
.wbbBoardNode[data-board-id="7"] .wbbBoardNode__icon
{
    color: #00aeff !important;
}
.wbbBoardNode[data-board-id="8"]  .wbbBoardNode__icon
{
    color: #081 !important;
}
.wbbBoardNode[data-board-id="4"]  .wbbBoardNode__icon
{
    color: #800 !important;
}
.wbbBoardNode[data-board-id="16"]  .wbbBoardNode__icon
{
    color: #508 !important;
}
.wbbBoardNode[data-board-id="20"]  .wbbBoardNode__icon
{
    color: #3ddb86 !important;
}
.wbbBoardNode[data-board-id="24"]  .wbbBoardNode__icon
{
    background: linear-gradient(to bottom, #5ebd3e, #ffb900, #f78200, #e23838, #973999, #009cdf) !important;
}
.wbbBoardNode[data-board-id="3"]  .wbbBoardNode__icon
{
    color: #600 !important;
}
.wbbBoardNode[data-board-id="11"]  .wbbBoardNode__icon
{
    color: #444 !important;
}
.wbbBoardNode[data-board-id="9"]  .wbbBoardNode__icon
{
    color: #d00 !important;
}

Gerade, wenn sich so viel wiederholt, wie in deinem Beispiel (.wbbBoardNode__icon) würde ich in jedem Fall auf Verschachtelung setzen. Damit sparst du dir den immer gleichen Selektor:

.wbbBoardNode__icon {
  [data-board-id="2"] & {
    color: #0004ff !important;
  }
  
  [data-board-id="15"] & {
    color: darkorange !important;
  }
  
  [data-board-id="7"] & {
    color: #00aeff !important;
  }
  
  [data-board-id="8"] & {
    color: #081 !important;
  }
  
  [data-board-id="4"] & {
    color: #800 !important;
  }
  
  [data-board-id="16"] & {
    color: #508 !important;
  }
  
  [data-board-id="20"] & {
    color: #3ddb86 !important;
  }
  
  [data-board-id="24"] & {
    background: linear-gradient(to bottom, #5ebd3e, #ffb900, #f78200, #e23838, #973999, #009cdf) !important;
  }
  
  [data-board-id="3"] & {
    color: #600 !important;
  }
  
  [data-board-id="11"] & {
    color: #444 !important;
  }
  
  [data-board-id="9"] & {
    color: #d00 !important;
  }
}

Ich mein, ich hatte mal erwähnt, dass es abwärtskompatibel sein muss
Und Edge muss es auch können. Und ich brauch Zeit, die ich dafür nicht wirklich habe. Dennoch danke für den Hinweis.

Zitat von Sören Hentzschel

in jedem Fall auf Verschachtelung setzen.

Hallo Sören, ich habe deinen Code mal übernommen, gefällt mir gut

Frage:

Warum wird das Icon unter: Allgemein nicht rot, obwohl ein neuer Beitrag vorhanden ist?

In den beiden anderen Unterforen funktioniert das einwandfrei.

Danke für jegliche Hilfe wie immer

Zitat von 2002Andreas

Warum wird das Icon unter: Allgemein nicht rot, obwohl ein neuer Beitrag vorhanden ist?

Der Code macht keinen Unterschied für gelesen und ungelesen. Ich hatte nur den Code direkt über meinem Beitrag umgeschrieben. Wenn das Icon bei ungelesenen Beiträgen immer im Standard-Rot sein soll, könntest du Folgendes noch drumherum packen:

.wbbBoardNode:not(.wbbBoardNode--unread) {
  /* Der Code aus Beitrag #12 */
}

Zitat von Sören Hentzschel

immer im Standard-Rot sein soll, könntest du

Hallo Sören.

Herzlichen Dank mal wieder dafür

Zitat von 2002Andreas

Wenn du gelesen und ungelesen trennen willst:

Das funktioniert auch, bis auf zwei Rubriken, und das sind Firefox Allgemein und Firefox-Produkte für Android, diese werden nicht farblich verändert.

Dazu musste ich den Code abändern, als Beispiel hier Firefox Allgemein:

.wbbBoardNode[data-board-id="15"].wbbBoardNode--unread .wbbBoardNode__icon {
    color: red !important;
}

Kann das mal bitte überprüft werden.

Zitat von FuchsFan

Dazu musste ich den Code abändern

Zitat von Sören Hentzschel

Wenn das Icon bei ungelesenen Beiträgen immer im Standard-Rot sein soll

Damit funktioniert es hier einwandfrei.

Zitat von 2002Andreas

Damit funktioniert es hier einwandfrei.

Danke, Andreas, dann lasse ich es jetzt so. Da muss sich aber was geändert haben, anfangs funktionierte es ja auch mit dem anderen Code.

Da hat sich seit Themeneröffnung nichts geändert. Dein angepasster Selektor hat eine höhere Spezifität als der aus dem Beitrag von Andreas. Eine mögliche Erklärung wäre daher, dass du an anderer Stelle noch Code hast, der auf genau die gleiche Stelle wirkt, und die Spezifität nicht ausreichend war, um diesen Code zu überschreiben.