Breadcrumbs & Bullets

[stacyd]

I customized my bullets to be orange, using this global css:

ul {
list-style: none; /* Remove default bullets */
}

.content li::before {
content: “•”;
color: #f49300;
font-weight: bold; /* If you want it to be bold */
display: inline-block;
width: 1em;
margin-left: -1em
}

But my breadcrumbs are now showing up with bullets on them.
And the same with some onpage (inline) navigation that I setup for a complex page.

Case Studies : ilumivu

Help, please!!! Thank you in advance!

[tristup]

Hi @stacyd,

Thanks for reaching out.
It seems that you are trying to make the bullets of your content into orange color. Please use the cs-content class instead of class .content in your custom CSS code to apply into the content section only. The changed CSS will look like the following.

.cs-content li::before 
{
    content: “•”;
    color: #f49300;
    font-weight: bold; /* If you want it to be bold */
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

Hope this helps.
Thanks

[stacyd]

@tristup

.cs-content li::before 
{
    content: “•”;
    color: #f49300;
    font-weight: bold; /* If you want it to be bold */
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

That’s it exactly!!! THANK YOU!

[stacyd]

Actually, it fixed the problem with the breadcrumbs, but removed the orange from the bullets.

[tristup]

Hi @stacyd,

To make the bullet or arrow orange, you need to add the following code at Theme Options > CSS.

.x-crumbs-delimiter 
{    
    color: #f49300;       
}

Hope that helps too.
Thanks