Styling bullets with Theme Options Custom CSS

  • Resolved Tracy

    (@tracycoach)


    9 years, 1 month ago

    Hi there,

    I’m trying to style bullets to be a coloured tick and have tried the following in the Custom CSS area of my Theme Options, to no avail.

    1. 

    ul {
  list-style: none !important; /* remove list bullets */
}

ul li:before {
  content: '✓ !important';
  color: #215f6e !important; 
}

    When I use: 

    <ul>
<li>test</li>
</ul>

    …the list bullet has been removed but there is no coloured tick preceding the text.

    2. 

    mark.darkteal { 
    color:#215f6e !important; 
    background: none !important; 
/* }

    <mark class="darkteal">✓</mark> Have already tried things which haven't worked

    This applies the default values for the ‘mark’ element – a yellow background and black text, ignoring the overwriting I was trying to do in the ‘mark.darkteal’ portion (dark teal text colour, no background colour).

    Am I missing something important in the CSS?

    Many thanks!
    Tracy

Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • Kevin

    (@jx-3p)

    9 years, 1 month ago

    Hey Tracy,

    Try this CSS:

    ul {
  list-style: none !important; /* remove list bullets */
}

ul li:before {
  content: '✓' !important;
  color: #215f6e !important; 
}

    I just moved one of the ‘ around the “content” property.

    2. In this piece of CSS, you have commented out the closing bracket. try changing it to this:

    mark.darkteal { 
    color:#215f6e !important; 
    background: none !important; 
}

    Does this help?

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Flip I’m a muppet, thanks for catching the errors, and sorry I missed them! Coding’s frying my head… The second now works perfectly – the ul CSS doesn’t but I’m happy to just use the ‘mark’ approach anywhere I need bullets. Thank-you so much, you’re a star!

    Kevin

    (@jx-3p)

    9 years, 1 month ago

    The list style was working on my site. if you’d like to post a link I’ll be happy to try and make it work on yours too.

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Oh cool – tracydempsey.co, thanks!

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Oh cool – http://tracydempsey.co, thanks!

    Kevin

    (@jx-3p)

    9 years, 1 month ago

    I think I’m seeing the CSS take effect on your site. What exactly isn’t working on your end?

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Sorry, our internet kept dropping – I had to re-add the ul coding for you to test. It’s there now – it shows the bullets indented but without a bullet symbol (code to remove bullet worked, code to add replacement image didn’t). Thanks!

    • This reply was modified 9 years, 1 month ago by Tracy.
    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    (The mark code worked and is what you were seeing; it’s still there)

    Kevin

    (@jx-3p)

    9 years, 1 month ago

    I found your issue. It appears that you copied the CSS from your email. You need to be sure to only copy code from this forum, as it gets sanitized in emails and is not correct.

    Try replacing the old code with the one here on the forum and you should see what I mean.

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Hi Kevin, I’m not using email – I copied the code directly from this thread (which I’m viewing in Safari) into the CSS editor. When I removed it from my CSS, I saved it via copy/paste to a plain TextEdit file, and copied it back in from there to let you view it.

    To double-check, I’ve just re-copied and re-pasted your code from this thread and refreshed the page – I’m still not seeing the ticks. The original bullets have been stripped out but the replacement ticks aren’t showing.

    When I view the page source and look at the added code there, it shows with 3 warnings – the single quotation marks around the tick render as ' – is that the error you’re seeing? I don’t know how to get rid of that if so – I also loaded this thread in Firefox and copied your code from there directly into the theme’s CSS, just in case Safari was handling it/rendering it differently. No change. :/ If the ' is wrong, and I’m copying directly from this thread in my browser, how can I change those?

    Thanks!

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    …the single quotation marks render as ' I mean!

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Argh! I used the code tag above but it changed it back to the single apostrophe – I’m trying to show that the source code on my website displays the single quotations in the pasted code as “& # 0 3 9 ;” (without the spaces)!

    Kevin

    (@jx-3p)

    9 years, 1 month ago

    After further testing, the same thing is happening to me. I’ll send this onto the theme developer and he’ll be able to explain why this is happening.

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    9 years, 1 month ago

    Thanks very much! 🙂

    Ben Ritner – Kadence WP

    (@britner)

    9 years, 1 month ago

    An update has been pushed out for this.

    Ben

Viewing 15 replies - 1 through 15 (of 20 total)
1 2

The topic ‘Styling bullets with Theme Options Custom CSS’ is closed to new replies.