Styling-Listen mit CSS - Wordpress Codex

Zurück ◈ Weiter
Wenn Listen der Dinge präsentiert, verwendet Wordpress Standard XHTML-Elemente:
    • für eine geordnete Liste (wobei die Reihenfolge der Elemente ist wichtig, so Titel sind nummeriert)
      1. für eine ungeordnete Liste (in der Regel als Einzelteile mit Kugeln dargestellt)
      • für jedes Element in einer Liste, geordnet oder ungeordnet.

      Standardmäßig sind die meisten Listen (und einige Listenelemente) in Wordpress werden von id oder Klassenattribute identifiziert, Styling-Listen einfach. Mit relativ einfachen Änderungen an der Datei style.css, können Sie die Liste anzuzeigen horizontal statt vertikal, verfügen über dynamisches Menü Hervorhebung. ändern, um die Kugel oder Nummerierungsformat, entfernen die Kugeln zusammen, oder eine beliebige Kombination von diesen.







      Verschachtelte Listen-Layout

      Verschiedene Themen-Format Listen auf unterschiedliche Weise. Die am häufigsten verwendeten Listen Anwender wollen oft ändern in Wordpress die Sidebar-Menü Listen sind. Da viele Sidebars verschachtelte Listen verfügen, lassen Sie sich in mehr Tiefe bei denen suchen.

      Wenn Sie mit verschachtelten Listen arbeiten und Sie wollen einen individuellen Stil für jede Liste, haben Sie das „Nest“ im Stylesheet (style.css) neu zu erstellen.

      Styling Spezielle Listenelemente

    2. Kategorien

      .

      Styling einzelne Elemente

      Wenn Sie möchten, Techniken Bild Ersatz benutzen, um Ihre Liste stylen, die jeweils

    3. Tag wird eine eigene Klasse oder ID benötigen. Versuchen Sie, die Classy wp_list_pages Plugin.

      Styling Ihre Listen

      Statt Eingabe list-style-type. sehen Sie eine Kurzform von list-style. und stattdessen die Standardscheibe zu verwenden. Die folgende Liste bietet jetzt eine kleine Quadrate.

      Aber nicht alle Listen müssen Kugeln. Durch ihr gesamtes Layout, wissen Sie nur eine Liste ist eine Liste. Um die Kugel zu beseitigen, das Stylesheet dies ändern:

      Nun, alles getaggt mit

    4. , innerhalb des DIV der ID von #sidebar. hätte keine Kugel haben. Experimentieren Sie mit verschiedenen Werten, die Ergebnisse zu sehen, Sie erreichen können.

      HINWEIS: In Bezug auf die Zugänglichkeit, eine geordnete Liste ist einfacher zu navigieren als eine ungeordnete Liste.

      Verwenden eines benutzerdefinierten Bild Statt einer Kugel







      Müde von Kugeln langweilig? Lassen Sie uns mit ein paar CSS-Techniken der Bohrung loszuwerden. anstelle den alten langweiligen Standard-Bullets In diesem Fall list-style-Bild verwenden, um den Browser zu anweisen, Ihre Kugel Bild zu verwenden.

      Hier finden Sie einige interessante Aufzählungs Grafiken und fügen Sie den folgenden Code in Ihr Stylesheet einige jazzige Kugeln auf Ihre Listen hinzuzufügen:

      Hinzufügen eines Rahmens zu Ihrer Liste

      Um einen Rahmen hinzuzufügen, wie Unterstreichungen, nach dem Titel, können Sie einfach eine Grenze Stil an die Spitze der hinzufügen

        unter dem Titel, anstatt auf dem Titel selbst.

        Gehen Sie einen Schritt weiter und fügen Sie eine ganze Box um Ihre Liste mit dem Titel oben auf ihm sitzt:

        Fügen Sie einen farbigen Hintergrund zu Ihrer Liste zusammen mit seiner neuen Grenze:

        Und Ihr Endergebnis würde wie folgt aussehen:


        Sie können mit Ihrer Liste Kugeln und Listenlayout eine Menge Spaß haben. Wenn Sie Probleme mit Ihren Kugeln und Listen haben, versuchen Sie die Ressourcen aus nachstehend aufgeführt und dann die Wordpress-Support-Foren besuchen, um mehr Hilfe zu bekommen.

        Fehlerbehebung Verschachtelte Listen

        Wenn Sie Probleme mit Ihrer verschachtelten Listen haben, könnte die eindeutige Lösung bieten. Überprüfen Sie auch CSS Fehlerbehebung für mehr Styling-Hilfe Fragen.

        Eine falsche Tag-Struktur

        Die häufigste Ursache für Fehler oder Nicht-Validierung innerhalb einer verschachtelten Liste ist der Mangel an geeigneter Listenstruktur. Hier ist ein sehr vereinfachte und korrekt verschachteltes Listenlayout. Beachten Sie, dass, wenn a (neu) verschachtelte Liste beginnt, die

      • Tag der aktuellen Listenposition ist noch nicht geschlossen. Es bleibt offen, bis die verschachtelte Liste abgeschlossen ist, und dann geschlossen.

        Template Tag Lists

        Verschiedene Template Tags, die verwendet für Listen Anzeigen haben unterschiedliche Möglichkeiten der Verwendung und im Vertrauen auf HTML-Liste-Tags. Einige Template-Tags enthalten automatisch die

          und
        • Tags alles, was Sie tun müssen, ist den Tag in der Liste selbst enthalten, und es wird die ganze Arbeit machen. Andere Tags benötigen die
            anstelle von dem Template-Tag gefolgt zu sein, und es erzeugt seine eigenen
          • Tags. Andere Template-Tags erfordern Bezeichnen, welche Art von Listen-Tags erforderlich sind oder keine Verwendung überhaupt, wenn nicht in dem Tag-Parametern aufgelistet.

            Wenn Sie Probleme mit Ihren verschachtelten Listen, wenn Template-Tags wie wp_list_cats oder wp_list_pages verwenden. überprüfen Sie ihre Parameter, um zu sehen, wie sie die Listen-Tags und vergleichen Sie sie mit Ihrer Nutzung verwenden.

            Eltern / Kind-Beziehungen

            Diskutiert in der CSS-Eltern-Kind-Beziehung. Listen sind eine der großen Schuldigen. Styles in den Kinderlistenelemente werden von ihren „Eltern“ beeinflusst. Wenn die Liste Stil der Eltern die Farbe „rot“ kennzeichnet und möchten Sie die Kinder in „blau“ sein, dann müssen Sie die Farbe spezifizieren, in der Liste Stile Kinder „blau“ zu sein, so dass sie den Stil der Eltern außer Kraft setzen

            Verschachtelte Listen innerhalb der Wordpress Sidebar enthalten in der Regel Links. Daher, während Sie die Liste Stil kann so viel wie Sie wollen, wird der Stil für Links überschreiben Sie die Liste Stil. Sie können die Art und Weise über die Links in der Liste der Arbeit kontrollieren, indem sie einen bestimmten Stil eigene Klasse zu geben, einschließlich ihrer Hover-Attribute:







            In Verbindung stehende Artikel

Zurück ◈ Weiter