Styling Bullets and Numbers in Lists

  • Hey Guys,

    I know this is more of a CSS question than a WP question – but the only ways to resolve this issue I’ve found on google require direct coding changes – which goes against the idea of using WP as a CMS.

    I’m developing a site for a client and I’m setting up all the styling elements for the client to use in the text-editor. By personally crafting the headings, paragraphs, blockquotes etc when then client goes to write a blog post or update a page it always looks better.

    I was updating the lists styles – both UL and OL and wanted the disc and the numbers to be a different color than the content of the list item.

    For UL’s I understand i can style my css to call an image in place of the bullet – problem solved.

    However for OL’s – numbered lists – I don’t have that opportunity. Does anyone know a way using css strictly (no html that my client would have to put in when writing an article) to change the color of the numbers? I don’t want my client to have to add <span> elements etc to the html editor just to get the lists to look appropriate.

    Any help would be appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)

  • I can’t see a way to do that at all with css. Styling the li element styles the content and the bullet/number….

    styling the bullet and content individually requires some sort of span/div or something…

    Thread Starter Will White

    (@willpcg)

    I’ve seen some css out there that seems to “almost” fix it.

    Like the idea of changing the first character in the LI using the “LI:FIRST-LETTER” deal. Considering the LI styles affect the number you’d think the number would be part of the LI characters. Unfortunately, it just changes the first letter in the content.

    Another suggestion I ran across was to set the list-style-type to none and use a function to make the numbers appear manually – editing the css of the numbers as they are created. Supposedly they take advantage of the “content” and “counter-increment” abilities you can add to css – however I’m not familiar with those and have no idea how to do it.

    https://dev.opera.com/articles/view/automatic-numbering-with-css-counters/

    ah yeah, I see what yer saying. Looked over a few tuts…this writeup made the most sense to me? Maybe a jumping off point…..

    Thread Starter Will White

    (@willpcg)

    Thanks for this – it got me a lot closer to what I’m trying to do. I’ll post the final css here if I can get it up and running.

    that’d be cool, this does have my interest piqued now!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling Bullets and Numbers in Lists’ is closed to new replies.