Change personalised Breadcrumb text color

Support
#1

Hi !

I have added a CSS code to change some of the breadcrumb caracteristics however I can’t change the color text.

Please find the CSS code I use :
.x-breadcrumb-wrap a {
font-size: 1.32rem;
letter-spacing: 1.2px;
word-spacing: 2px;
padding-right: 20px;
color: #C58A37;
display:inline-block;
}

What should I modify so the color is taken into account ?

Thanks very much !

#2

I would also like to center the text :slight_smile:

#3

Hello @JOHN12234,

Thanks for asking. :slight_smile:

The code you have shared should work fine to change color. Please try adding following CSS code under X > Theme Options > CSS:

body .x-breadcrumb-wrap a {
    color: #C58A37 !important;
}
body .x-breadcrumbs {
    text-align: center;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#4

Thanks !
It worked for the color but not for the align center.

Any addtionnal ideas ? :slight_smile:

#5

Hi There @JOHN12234

Could you please try adding the following CSS rule and see if that helps.

.x-breadcrumb-wrap {
    text-align: center;
}

Hope that helps.

#6

That worked, Thanks alot !

Made my day :slight_smile: