+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Breadcrumb CSS customization

Breadcrumb CSS customization

4 posts, 0 answered
  1. Varadha
    Varadha avatar
    3 posts
    Registered:
    11 Mar 2013
    11 Mar 2013
    Link to this post

    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

  2. Arno
    Arno avatar
    249 posts
    Registered:
    08 Sep 2010
    11 Mar 2013 in reply to Varadha
    Link to this post

    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.

  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    11 Mar 2013 in reply to Varadha
    Link to this post
    <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

  4. Sarthak
    Sarthak avatar
    4 posts
    Registered:
    03 Jul 2014
    14 Aug 2014
    Link to this post

    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.

     

4 posts, 0 answered