Customizing Breadcrumb Add On Text (GP Theme Link Color Attributes)

[Marty]

Hi, I was able to successfully add Breadcrumbs NavXT to GP Premium using an Element.

I’m trying to customize the color of the links that display in it (blue by default). However, nothing I tried works correctly – anything I’ve tried affects sitewide.

I can’t isolate color settings to the breadcrumb link text (ex.: Home >> [category] >>).

Is there a way I can do this, please? Thanks!

[Leo]

Hi there,

For color, try this CSS:

.entry-header .breadcrumbs a {
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Any chance you can open a new topic for the separate question?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Thank you Leo, but unfortunately the CSS you provided above has no effect.

When I tried on my own, things like:

a, a:visited {
    color: #999;
}

..work but affect the whole site.

(*I’ve removed the other question/topic as you requested, thanks).

[Leo]

I’m not seeing my CSS being added. It works when I used browser inspect tool to test:
https://www.screencast.com/t/K99lHO7IqGZ

Are you using any caching plugin? If so did you make sure to clear it first? Can you also disable all of them if you are still having issues?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi there – I’m not using an caching plugins for the test site/post.

I think I found the problem. The CSS you gave me is being affected by this CSS I was given here for sizing the padding on mobile. When it’s removed your CSS works.


@media screen and (max-width: 768px) {
.separate-containers .inside-article, .separate-containers .comments-area,
.separate-containers .page-header, .separate-containers .paging-navigation,
.one-container .site-content, .separate-containers .widget.inner-padding {
padding-left: 15px;
padding-right: 15px;
}


Thanks.

[Leo]

Your CSS above is missing a closing } for @media screen and (max-width: 768px) {.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Thanks so much, the CSS you gave me worked! Sorry about that – apparently a stray bracket got put into another place so I wasn’t aware of the error before.

Thanks for the help!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi there – sorry to bother again about this topic but I’m still struggling with this issue.

The code you gave me above last time isn’t effective when I’m trying it now, and anything I’ve done that works affects not only the breadcrumb links but also changes the menu bar links as well.

URL: (removed)

I hope I’m not wrong in thinking the color of the “Home » Posts Page » Product review” can be changed.

Thank you! 🙂

[Leo]

Looks like the breadcrumbs changed position.

Try this instead:

.inside-article .breadcrumbs a {
    color: #000000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Leo, thank you so much that worked!

My apology for that I guess I am still slightly confused about using the Elements feature/locations and changed the breadcrumb location by mistake since the last time I was working on GP for the site.

Sorry to take up your time and I’ll document my customizations to help ensure I don’t mess it up like that again.

I really appreciate it a lot! 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts