Colorize Bullets Without Images
CSS July 23rd, 2007Often I'll see a design with the list copy font the same color, typeface, and size as the normal body font. The design will highlight the items of this list by colorizing the bullet of each list-item. Using some creative HTML and CSS, this is possible with only a few lines of CSS.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
HTML:
CSS:
-
li{
-
color: red;
-
}
-
li span{
-
color: black;
-
}
The bullet follows the color of the list item (li), but unfortunately so does the text contained by the li. We get around this by wrapping the text in spans and setting the font color on the span. We get our desired effect without using a list-style-image and with minimal HTML markup additions.
If you find a better way, do share for the betterment of code.
Popularity: 6% [?]
July 23rd, 2007 at 10:21 pm
Very goot. That's what I'd do.
Say, the related articles thing.. Did you find a plugin that does that without modifying the WP DB?
July 23rd, 2007 at 10:31 pm
No, it is altering the tables. It's http://wasabi.pbwiki.com/Related%20Entries. It adds an extra column to the wp_post table. I'm not concerned though since it's adding an additional column and not messing with any of the WP goods.
July 26th, 2007 at 12:09 am
Sweet. I had this plugin previously, but the database from the ViUX installation made the plugin fail and I had to do that manual SQL. Eh, I was too lazy. Good to see it works w/o that hassle. I must install, it's an awesome plugin.