Styling bullets with Theme Options Custom CSS

  • Resolved Tracy

    (@tracycoach)


    7 years, 10 months 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)

  • 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)

    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!

    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)

    Oh cool – tracydempsey.co, thanks!

    Thread Starter Tracy

    (@tracycoach)

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

    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)

    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 7 years, 10 months ago by Tracy.
    Thread Starter Tracy

    (@tracycoach)

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

    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)

    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)

    …the single quotation marks render as ' I mean!

    Thread Starter Tracy

    (@tracycoach)

    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)!

    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)

    Thanks very much! ??

    An update has been pushed out for this.

    Ben

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Styling bullets with Theme Options Custom CSS’ is closed to new replies.