Docs

[markwest]

Hi,

I’ve been trying to follow this previous thread to achieve this myself –
https://community.theme.co/forums/topic/change-icon-and-bullet-color/

But, I’m not having much luck.

My current CSS looks like this –

.orange-bullets {
  ul {
    list-style: none;
  }
  li:before {
    content: "• ";
    color: eb6044;
  }
}

and my list is a standard –

<ul>
  <li>aaaaaa</li>
  <li>bbbbbb</li>
</ul>

I’ve tried placing the class with the

, the
• and within the text element class box without any luck.

  Would be grateful if you could help me get this working.

  Thanks very much

  Mark

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[markwest]

This reply has been marked as private.

[Rue Nel]

Hey Mark,

Thanks for providing the information. Do you want something like this?

Please add the following css code in the customizer, Appearance > Customize > Custom > CSS,

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

Hope this helps.

[markwest]

Hi Rue,

That is almost perfect – except for the fact that it targets all

including the main nav menu 🙁

That’s why I was trying to create a class – .orange-bullets to apply to a single list. Is that possible to do with this code? Or is there another way to either apply this to a single list, or stop it affecting the main nav menu please?

Thanks so much for your help.

Kind Regards

Mark

[markwest]

So, I’ve made this work. Not sure it’s the most elegant way – but changed the CSS to this –

.orange-bullets ul {
list-style: none;
padding:0;
margin:0;
}

.orange-bullets li {
padding-left: 1em;
text-indent: -.7em;
}

.orange-bullets li:before {
content: “• “;
color: red; /* or whatever color you prefer */
}

Then wrapped the ul in a <div class=”orange-bullets”>

That seems to have done the trick.

If there is a better way to combine the CSS, or apply the class would be most grateful for your further input.

Thanks again for the awesome support.

Mark

[Rue Nel]

Hello Mark,

Thanks for the updates! You have done a great job in modifying the code. Enclosing the list with a div tag works out perfectly. As an alternative, you can also do this way:

<ul class="orange-lists">
  <li>aaaaaa</li>
  <li>bbbbbb</li>
</ul>

<ul class="blue-lists">
  <li>aaaaaa</li>
  <li>bbbbbb</li>
</ul>

And have the custom css like this:

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* the default color of the bullet or whatever color you prefer */
}

.orange-lists li:before {
   color: orange;
}

.blue-lists li:before {
   color: blue;
} 

We would loved to know if this has work for you. Thank you.

[markwest]

Hi Rue,

Thanks for your further reply. I like the idea of the changes, but the problem remains that without ‘wrapping’ the ul, li and li:before css in a class it also affects the main top nav bar menu – causing list bullets to appear above the current menu text.

What I was trying to do was something like this, but it doesn’t seem to work. Maybe you can tell me if there is a way to package up CSS like this into a block to form a class?

.orange-lists {
ul {
list-style: none;
padding:0;
margin:0;
}

li {
padding-left: 1em;
text-indent: -.7em;
}

li:before {
content: “• “;
color: red; /* the default color of the bullet or whatever color you prefer */
}
}

Thanks very much

Mark

[Rad]

Hi there,

You mean something like this?

.orange-lists ul {
list-style: none;
padding:0;
margin:0;
}

.orange-lists ul li {
padding-left: 1em;
text-indent: -.7em;
}

.orange-lists ul li:before {
content: "• ";
color: red; /* the default color of the bullet or whatever color you prefer */
}

You can’t wrap other classes with another class, you should do it this way.

Thanks!

[markwest]

Hi Rad,

Thanks for your reply. Yes, that is what I am doing, was just hoping I could make it easier to use/apply one class.

Thanks for all your help.

Mark

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts