Wie kann ich den Badges-Link in der Seitenleiste ausblenden?

Ich stelle mir vor, dass die Anpassung der Seitenleiste zu gegebener Zeit hinzugefügt wird, aber vorerst möchte ich den Link „Badges“ entfernen oder ihn zumindest unter „Mehr…“ ausblenden.

Sollte ich ihn vorerst einfach mit CSS ausblenden?

Ich kann das CSS nicht ganz nachvollziehen. Die Divs, die die Links enthalten, haben die Klasse sidebar-section-link-wrapper ohne ID. Wenn ich versuche, das a-Tag mit a.sidebar-section-link-badges { display: none; } auszublenden, wird nichts ausgeblendet.

2 „Gefällt mir“

Hallo, im Hamburger-Menü habe ich „nth-child“ verwendet, um diese Art von Dingen zu tun

https://www.w3schools.com/cssref/sel_nth-child.asp

1 „Gefällt mir“

nth-child ist für viele Dinge sehr nützlich, aber in diesem Fall ist es wahrscheinlich gefährlich. Da es ausschließlich auf Zahlen basiert, wäre hierfür die Garantie erforderlich, dass Badges an der gleichen Position bleiben.

Wenn etwas anderes davor hinzugefügt/entfernt/verschoben wird, ändert sich die Position von Badges, was dazu führen könnte, dass Badges angezeigt werden, etwas anderes ausgeblendet wird und dies unbemerkt bleibt.

:has() ist hierfür ideal, aber leider ist die Unterstützung noch begrenzt, insbesondere ist es in Firefox standardmäßig deaktiviert und in vielen mobilen Browsern fehlt es.

Wenn das Ausblenden nicht unbedingt erforderlich ist, d. h. es ist akzeptabel, es dort auszublenden, wo es für die beste Erfahrung möglich ist, während es in Browsern sichtbar ist, die :has() noch nicht unterstützen, können Sie den folgenden Selektor verwenden:

sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }
1 „Gefällt mir“

Danke für die Ideen. Ich werde das wahrscheinlich vorerst tun. Aber ich hoffe, dass ids hinzugefügt werden können.

1 „Gefällt mir“

Hallo,

Sie können es damit ausblenden. :slightly_smiling_face:

.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}
6 „Gefällt mir“

Ich habe dies gerade in meine alte Theme-Komponente kopiert und eingefügt (die dasselbe mit dem alten Hamburger-Menü tat) und es hat einfach funktioniert! Vielen Dank und nochmals vielen Dank an alle anderen.

3 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Leider scheint dieses CSS mit 2.9.0beta12 nicht zu funktionieren… Irgendwelche Ideen? :slight_smile:

This funktioniert bei mir auf der neuesten Version immer noch.


Können Sie Ihren Code teilen?

1 „Gefällt mir“

Ich entschuldige mich. Es funktioniert. Ich hatte es wegen des Fehlers mit dem „Mehr“-Link auskommentiert.

Dieser Fehler besteht darin, dass der Link angezeigt wird, auch wenn keine „Mehr“-Menüoptionen vorhanden sind. Bei der Anzahl der Optionen in meinem Forum, wobei die Option „Abzeichen“ vorhanden ist, auch wenn ich sie nicht dort haben möchte, hat „Mehr“ zumindest etwas zu tun! (Das Problem bleibt bestehen… wenn man sich auf der Abzeichenseite selbst befindet, ist der nutzlose „Mehr“-Link vorhanden.) "More..." shows in sidebar when there is nothing more

Aus irgendeinem Grund funktionierte die Funktion „URL über Text einfügen, um einen Hyperlink zu erstellen“ beim Bearbeiten dieses Beitrags nicht.

Ich verstehe. Eigentlich glaube ich nicht, dass das ein Fehler ist, da die Optionen im Mehr-Menü vorhanden, aber versteckt sind, sodass es nicht leer ist. Aber wenn ich Sie richtig verstehe, verstecken Sie alles im Mehr-Menü? Wenn das der Fall ist, wäre es meiner Meinung nach besser, den gesamten Mehr-Bereich zu verstecken?

Um das Dropdown-Menü Mehr von allen Seiten aus zu verstecken:

// Mehr-Menü von allen Seiten ausblenden
.sidebar-more-section-links-details {
  display: none;
}

Wenn Sie es auf einer bestimmten Seite ausblenden möchten, können Sie die Body-Klasse verwenden, um darauf zu zielen.

Sie finden es hier.

Zum Beispiel auf der Abzeichen-Seite würde es so aussehen:

// Mehr-Menü von einer bestimmten Seite ausblenden (Abzeichen)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

Dies blendet das Mehr-Dropdown aus, zeigt aber Abzeichen in der Seitenleiste an.


Wenn Sie jedoch den vorherigen Code zum Ausblenden von Abzeichen verwenden, werden diese auch nicht angezeigt.

// Mehr-Menü-Element für Abzeichen ausblenden
.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}

// Mehr-Menü von einer bestimmten Seite ausblenden (Abzeichen)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

1 „Gefällt mir“

Ich sehe das als Fehler, da ich nicht glaube, dass eine “Mehr”-Option angezeigt werden sollte, es sei denn, es gibt mehr Elemente und daher hat das Klicken auf “Mehr” eine Auswirkung. Der Fehlerbericht ist hier: "More..." shows in sidebar when there is nothing more

Dieses Thema wurde nach 617 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.