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 5 replies - 16 through 20 (of 20 total)
  • Thread Starter Tracy

    (@tracycoach)

    Thanks Ben! I just updated and refreshed and it has indeed fixed the issue – but now there are ticks showing above all my menu items on the main menu!

    Tracy

    You’re probably going to want to give the lists that you’d like to effect their own class, like this:

    <ul class="test-class">
<li>test</li>
</ul>

    Then you can use CSS like this to only effect lists with that clasS:

    .test-class {
  list-style: none !important; /* remove list bullets */
}

.test-class li:before {
  content: '?' !important;
  color: #215f6e !important; 
}

    Does that work for you?

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    Ah okay – I thought the menu lists would be in their own class, separate from standard lists! I’ve added code now for a ‘tick-list-class’, thanks as ever for your help!

    Tracy

    They do have their own classes, but if you’re using a very general selector such as just ul or li, it’s going to effect all of the lists and all of the list items on your site.

    The classes allow you to select specifically, but they don’t prevent general CSS from effecting elements.

    Does that make sense?
    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    Perfectly, thanks for the info! Have a great evening,
    Tracy

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