How to change breadcrumbs color

sry
Giga Guru

‎03-07-2023 12:47 PM

sry_0-1678221506563.png

in the above breadcrumbs until support page i.e HOME-->All catalogs-->Customer service-->Support is showing color code #165c53  where as 'create case' is in #484949.  suppose if i go to Support page then 'Support' shows in color code #484949 but remaining breadcrumbs shows in #165c53

 

sry_1-1678221828413.png

 

I have cloned breadcrumbs widget and added my own color code like the below but its only working if i am on a specific page but not for entire breadcrumbs. how to set a universal color code for the entire breadcrumbs irrespective of what page we are in?

 

.a-disabled {
cursor: default;
color: #484949;
font-weight: normal;
}

 

I am guessing there is something wrong the way i have added above CSS to the cloned widget (breadcrumbs). please give me a simple solution to set the entire breadcrumbs color.

 

Thanks,

Sry

0 Helpfuls
  • 893 Views
7 REPLIES 7

jcmings
Mega Sage
In response to sry

‎03-08-2023 08:01 AM - edited ‎03-08-2023 08:02 AM

Try looking in System Properties > Basic Configuration UI16. Also, I am noticing in your CSS -- do you have a class called a-disabled? If not, you would want to change that to a:disabled. 

0 Helpfuls

sry
Giga Guru
In response to jcmings

‎03-08-2023 08:32 AM

Hi jc21, the class name is a-disabled. i have verified Basic configuration UI16 and couldn't find anything that sets the breadcrumbs color. Below is the HTML template.

 

 

<div aria-label="${Page breadcrumbs}" role="navigation" class="breadcrumbs">
<ul class="nav nav-pills nav-sm">
  <li>
    <span><a ng-href="?id={{portal.homepage_dv}}">${Home}</a>
      <i aria-hidden="true" class="fa fa-chevron-right"></i></span>
  </li>
  <li ng-if="!c.expanded &amp;&amp; c.breadcrumbs &amp;&amp; c.breadcrumbs.length > 2">
    <span><a ng-click="c.expand()"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
      <i aria-hidden="true" class="fa fa-chevron-right"></i></span>
  </li>
  <li ng-if="!c.breadcrumbs"><span style="display: inline;" class="a-disabled" aria-current="page">{{page.title}}</span></li>
  <li ng-if="c.expanded || ((c.breadcrumbs.length > 2  &amp;&amp; $index > c.breadcrumbs.length-3) || (c.breadcrumbs.length <= 2))" ng-repeat="item in c.breadcrumbs track by $index" >
    <span><a ng-if="!$last" ng-href="{{item.url}}">{{item.label}}</a>
      <span class="a-disabled" ng-if="$last" aria-current="page">{{item.label}}</span>
      <i aria-hidden="true" ng-if="!$last" class="fa fa-chevron-right"></i></span>
  </li>
</ul>
</div>

 

0 Helpfuls

sry
Giga Guru
In response to sry

‎03-09-2023 03:03 AM

Hi, I guess i found a temporary solution for this. when i did F12 and i found the below css in the console.

.breadcrumbs-container .breadcrumbs a:not(.text-muted):not(.btn), .table-striped td a:not(.text-muted):not(.btn), .panel-footer a:not(.text-muted):not(.btn) {
    color: #165C53;
}

I have updated this on CSS of custom 'breadcrumbs' widget but it did not work. So i used it on CSS of 'Page' and it worked. with this method i had to update Page specific CSS of every Page that we are using in the portal. I am sure this is not a perfect solution, will have to wait for a simple and short solution.

 

the color code i needed is #484949 so the final output is 

.breadcrumbs-container .breadcrumbs a:not(.text-muted):not(.btn), .table-striped td a:not(.text-muted):not(.btn), .panel-footer a:not(.text-muted):not(.btn) {
    color: #484949;
}

 

Thanks,

Sry

0 Helpfuls