Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.

bulletColor

LibraryAdmin / jQueryAdmin Plugin

Mit diesem jQuery-Plugin ist es möglich einer Liste bunte Listenpunkte zu verpassen.

 

Anleitung

Beispiel einfarbige Listenpunkte
 

  •  Plugin downloaden und in LibraryAdmin oder jQueryAdmin installieren
  •  Preset für die gewünschte Seite oder global erstellen und das Plugin dafür auswählen
  •  Im Editor eine Liste erstellen
  •  Im Editor den Quellcode-Button (oben links) betätigen
  •  Eine ID für ul vergeben ( ul id="by_color" )

 

HTML

<ul id="by_color">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

Preset

$('#by_color').bulletcolor({ color : '#b22222' });

 

Beispiel mehrfarbige Listenpunkte
 

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
  6. Lorem ipsum dolor sit amet
  7. Lorem ipsum dolor sit amet

 

HTML

<ol id="color_array">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ol>

Preset

$('#color_array').bulletcolor({ 
        color_array : ['#0000ff',
                       '#ff0000',
                       '#00ff00']
});


Hier sind nur die Beispiele aufgeführt bei denen man die Farbe im Preset ändert. Es gibt eine weitere Möglichkeit wo die Farbe per CSS hinterlegt ist (siehe Autor-Seite).

Natürlich kann man bunte Listenpunkte auch ohne jQuery lösen und einfach in jedes Listenelement noch ein Span mit class setzen und dazu per CSS etwas definieren.


Autor und mehr Beispiele: http://www.fluidbyte.net/color-ul-and-ol-bullets-separately-from-content-using-jquery


Anzeige durch Droplet MoreLikeThis