Fold Page List: verschiedene Farben für die Hierarchieebenen

  • Hallo!
    Weiss eine/r, wie man Fold Page List so umstrickt, dass alle Links (also hier pages) in der zweiten Hierarchie ne andere Farbe bekommen, und die Sub-Sub-Seiten (3. Hierarchie) eine dritte Farbe ?!

    Danke und liebe Grüße aus Bremen, Sebastian

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Dazu brauchst Du am Plugin nichts ändern, es sollte eine Anpassung im Stylesheet reichen. Finde erst mal raus, wo denn die Linkfarbe im Moment definiert ist in Deinem Stylesheet. Tools wie die Web Developer Toolbar oder Firebug helfen da sehr. Danach musst Du das eigentlich nur noch für die jeweils darunterliegenden Ebenen definieren.

    Allgemeines Beispiel: Wenn das Menü im Moment mit #nav li a definiert ist, kannst Du mit #nav li > ul > li a die zweite Ebene und mit #nav li > ul > li > ul > li a die dritte Ebene ansprechen.

  • Hi Du!
    Vielen Dank für die Hilfe!
    Also Firebug meldet mir, dass die Links der Class "page-item" angehören, die sich natürlich nicht din der style.css wiederfinden.

    Das einzige, wo wenn ich dran rumfuddel sich bei den Links was tut sind jene Zeilen:

    ul#navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 20%;
    }

    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }

    Da weiß ich aber nicht, wie ich die gemäß Deiner Anleitung umstricken soll !? Kannst Du mir nochmal helfen bitte ?! Das wäre nett!
    Grüße, Sebastian

  • Probier mal wie folgt. Wenn es das noch nicht war, bräuchte ich einen Link zur Seite, dann klärt sich das ohne Raten viel schneller. ;-)

    Im Moment rate ich mal, dass die äußere Liste die Widgets enthält und dass .page-item an den Links direkt dran hängt. Der Code muss am besten ans Ende des Stylesheets. Farbnamen natürlich ersetzen durch den gewünschten Farbcode, aber so sollte man es erst mal sehen.

  • Hallo.
    Ich konnte dem Threat leider nicht ganz folgen, aber ich vermute es hat etwas mit meinem Problem zu tun.

    Ich suche die page_item class (ist doch eine css class oder???)
    Ich will nämlich eine zusätzliche dazutun

  • die .page_item class kommt wahrscheinlich aus der wordpress function wp_list_pages();
    http://codex.wordpress.org/Function_Reference/wp_list_pages
    da ist normalerweise auch noch eine .page-item-123 class dabei mit der pageID.
    http://codex.wordpress.org/Function_Refer…g_of_page_items


    mehr css classes kannst du evtl mit einer filterfunction erzielen.
    http://codex.wordpress.org/Plugin_API/Filter_Reference

    ist das fuer die sidebar oder headermenue?

    wenn du genauer beschreiben koenntest, wozu und welche extra css classes benoetigt werden, kann vielleicht jemand hier mehr dazu sagen.

  • Hallo

    Oh je das hab ich leider auch kaum verstanden.

    Also ich habe schon rausgefunden, dass wenn ich wp_list_pages eingebe oder wp_nav_menu, dann werden alle seiten aufgelistet.

    Es handelt sich bei mir nun um ein Menu welches ich horizontal unter dem Header auflisten möchte. Nun sieht aber das Menu welches erscheint wenn ich wp_list_pages eintrage, genauso aus wie das Menu in der Sidebar, das heißt senkrecht untereinander aufgelistet.

    Nun verstehe ich leider nicht ganz was es heißt, wenn page_item ein "teil" vom wp_list_pages befehl ist. Heißt das, wenn ich wp_list_pages eintrage, greift wp auch auf diese page_item zurück und ist da vielleicht der listenstyle festgelegt?

    Naja jedenfalls was ich benötige ist eine möglichkeit, den style der sidebars zu erhalten UND gleichzeitig einen neuen Style von wp_list_pages zu erhalten.

  • was wp_list_pages() ausgibt, ist eine ungeordnete html liste.

    beispiel code:

    HTML
    <ul>
    <li class="current_page_item"><a href="http://localhost/wordpress/" title="Home">Home</a></li>
    <li class="page_item page-item-2"><a href="http://localhost/wordpress/about" title="About">About</a></li>
    </ul>



    die wird normal ohne extra css styles (in der style.css) untereinander angezeigt.

    um das horizontal hinzukriegen, muessen einige styles in die style.css eingefuegt werden; extra css classes werden dazu nicht benoetigt.

    wordpress hat da eine anleitung dazu (nicht ideal, aber ein anfang)
    http://codex.wordpress.org/Creating_Horizontal_Menus

    auch gibt es einige online tutorials zur erstellung der css fuer ein horizontales menue - einfach mal suchen.

    ein anderer weg, eine idee fuer die css von horizontalen menues zu bekommen, ist, ein freies theme mit dieser art des menues zu zerlegen, und die struktur der css-datei (style.css) zu studieren.

    um mit themenanpassungen weiter zu kommen, wirst du nicht darum herum kommen, dich in css und html einzuarbeiten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!