Active Breadcrumb Color

[nickzee]

Active Breadcrumb color is not changing with this suggest method. Can you please provide an alternative.

https://archived.seventhqueen.com/forums/topic/breadcrumb-current-page-text-color

My exact code is:

COPY CODE

 /*  Active Breadcrumb Color */
.breadcrumb>li+li:before {
  color: #0971B2 !important; 
}
 .breadcrumb li span {
  color: #54CC14 !important;
}

After adding the css above to the custom css box, I see this code and the undesirable pink color.

COPY CODE

.alternate-color .muted, .alternate-color .hr-title, .alternate-color .breadcrumb, .alternate-color .breadcrumb .active, .alternate-color .panel-kleo .icon-closed, .alternate-color .panel-kleo .icon-opened, .alternate-color .pagination > li > a, .alternate-color .pagination > li > span, .alternate-color .post-meta, .alternate-color .post-meta a, .alternate-color .post-footer a, .alternate-color .dropdown-submenu > a::after, .alternate-color .pricing-table .list-group-item.unavailable, .single-attachment .alternate-color .link-list, .single-attachment .alternate-color .link-list a, .alternate-color .form-control, .alternate-color #kleo-ajax-search-loading, .alternate-color .kleo_ajax_entry .search_excerpt, .alternate-color .ajax_search_image, .alternate-color #buddypress div#item-nav .tabdrop .dropdown-menu li a:hover::before, .alternate-color #buddypress .activity-header .time-since, .alternate-color .activity-timeline, .alternate-color #buddypress div#item-nav ul li a::before, .alternate-color #buddypress div#item-nav .tabdrop .dropdown-menu li a::before, .alternate-color #buddypress a.button.fav, .alternate-color #buddypress .comment-reply-link, .alternate-color #rtMedia-queue-list tr td:first-child::before, .alternate-color .sidebar .widget.buddypress div.item-meta, .alternate-color .sidebar .widget.buddypress div.item-content, .alternate-color #buddypress div#item-header div#item-meta, .alternate-color table.notifications td.notify-actions, .alternate-color .read-notifications table.notifications tr td, .alternate-color .unread-notifications table.notifications tr td, .alternate-color #buddypress .activity-list li.load-more a, .alternate-color #buddypress div#subnav.item-list-tabs ul li a, .alternate-color .bbp-pagination-links a, .alternate-color .bbp-pagination-links span, .alternate-color .rtmedia-container .rtmedia_next_prev a, .alternate-color .rtmedia-activity-container .rtmedia_next_prev a, .alternate-color #buddypress div.rtmedia-activity-container .rtmedia_next_prev a, .alternate-color .rtmedia-container .rtmedia-editor-main dl.tabs dd > a, .alternate-color .rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .alternate-color #buddypress div.rtmedia-activity-container .rtmedia-editor-main dl.tabs dd > a, .woocommerce .alternate-color ul.products li.product .price del, .woocommerce-page .alternate-color ul.products li.product .price del, .alternate-color .kleo-toggle-menu a.remove, .alternate-color .article-content .author-options .edit:hover::before, .alternate-color .article-content .author-options .delete:hover::before {
    color: #fb4949;

Please add a Theme Option for Active Breadcrumb color. Thank you.

Attachments:

You must be logged in to view attached files.

[sharmstr]

try this

COPY CODE

.alternate-color .breadcrumb span {
  color: red;
}

That will also change the separator color, so you’ll have to add css to set that back or to a different color

COPY CODE

.breadcrumb span.sep {
  color: green !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nickzee]

Thank you @Sharmster

[nickzee]

@sharmstr,

Whenever any of the color settings are change in the Alternative option, the `.alternate-color .breadcrumb span {
color: red;
}` is over ridden. Even with !important added to it.

Can’t the devs (@Abe) just add an option to control the breadcrumb color? Seams so trivial and minor.

Attachments:

You must be logged in to view attached files.

[sharmstr]

you need to add .active to it

.alternate-color .breadcrumb .active

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[szmek9]

it doesn’t work now.

[sharmstr]

It does

COPY CODE

.alternate-color .breadcrumb .active {
    color: red !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[szmek9]

Ok, sorry you’re right

[Author]

Posts