Archived topic

Make a Background and Border to Breadcrumb

4 replies · Started by Ritesh on June 3, 2021

Viewing posts 1–5 of 5

June 3, 2021 at 8:32 am #1808956

Hello,

Can we achieve these 2 for breadcrumb?

1] Make a Light color border with proper padding (See this image: https://prnt.sc/13vfi4c)
2] And Give a light background to the breadcrumb. Background color and Text should be variable (I can change later)

Please help me for CSS

Ritesh

June 3, 2021 at 9:39 am #1809040

Website URL : https://the-mencare-co-6aed26.ingress-earth.easywp.com/

June 3, 2021 at 10:11 am #1809078

Hi there,

Try something like this:

.woocommerce .woocommerce-breadcrumb {
    border: 1px solid #000;
    padding: 5px;
    background-color: #333;
}

June 3, 2021 at 8:16 pm #1809515

Hi
Thanks for this CSS.
Can you please help me to change the color of the Text

June 3, 2021 at 8:27 pm #1809521

Hi Ritesh,

You can use Leo's CSS selectors to do that. Add color property.

Example:

.woocommerce .woocommerce-breadcrumb {
    border: 1px solid #000;
    padding: 5px;
    background-color: #333;
    color: white;
}

Or this one to style the links within the breadcrumbs:

.woocommerce .woocommerce-breadcrumb a {
    color: white;
}

This archived topic is closed to new replies.

Start building better websites today.