Breadcrumb CSS customization - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Breadcrumb CSS customization

  • Breadcrumb CSS customization
  • Hello,

    How to customize the Breadcrumb widget with multiple CSS classes (One css class for parent page and another css class for active page)? 

    The advanced parameter allows to load only one css class.  Our custom HTML is given below, how to achieve this kind of behaviour with sitefinity widget? Kindly advice. 

    <div class="bread-crumb">
    <div class="bread-cont first"><a  href="#"><span>Home </span> </a></div>
    <div class="bread-cont"><a  href="#"><span class="active-bread">About Us</span> </a></div>
    <div class="bread-cont"><a  href="#"><span>Our services</span> </a></div>
    <div class="bread-cont"><a  href="#"><span>system Tools</span> </a></div>
    <div class="bread-cont"><a  href="#"><span>Consulting</span></a></div>
    </div>

    Thanks,
    Raja

  • Hi Raja,

    The breadcrumb widget renders way too much HTML and CSS. You need a custom control if you want to get rid of it. This thread may help you.

  • <style type="text/css">
     
    .bread-cont.first a
    color:red !important;
    .bread-cont a
    color:green !important;
    </style>

    I guess this should do the trick for the first Item

    Markus

  • Hi All,

     I want to make current page's name style different from rest of the names in bread crumbs.

    Please help me,how do i achieve this.