Announcement

Collapse
No announcement yet.

How to add borders to the breadcrumbs

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to add borders to the breadcrumbs

    To achieve this style for the breadcrumb:

    Click image for larger version

Name:	image.png
Views:	1
Size:	15.5 KB
ID:	13856

    add this custom css in css_additional template in AdminCP or in CSS Editor in Sitebuilder.

    Code:
    #breadcrumbs .ellipsis {
        line-height: 25px !important;
    }
    
    #breadcrumbs .crumb-link:hover {
        color: #019DCE;
    }
    
    #breadcrumbs .crumb-link {
        border: 1px solid #ccc;
        padding: 4px 6px;
        border-radius: 3PX;
        margin: 2px 0;
        display: inline-block;
        line-height: 1em;
        white-space: nowrap
    }
    
    #breadcrumbs .separator {
        margin-top: 9px;
    }

    #2
    Mine seems to be cut off. This is cool though. Im assuming its because of the width of my forum.

    Click image for larger version  Name:	Screen Shot 2018-10-24 at 11.48.44 PM.png Views:	1 Size:	13.7 KB ID:	13873

    Comment


      #3
      Fixed it. Thanks. This is cool Glenn.
      Attached Files

      Comment


        #4
        Hi Glenn. Was applying this nice mod and seem to be cutting off my home button

        Click image for larger version

Name:	image.png
Views:	1
Size:	3.4 KB
ID:	14066
        Could you point me in the direction of fixing this? Thanks

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Need to see the site in order to suggest a solution.

        #5
        bluebarracudas, the height in this CSS is the culprit.

        Code:
        #breadcrumbs .crumb:first-child {
            position: relative;
            text-indent: 0!important;
            background: transparent none;
            background-position: 0 0;
            width: auto!important;
        height: 15px!important;
            margin-top: 0px!important;
            padding-left: 20px;
        }
        The above code is in your css_additional template. If you remove the height, the issue will go away.

        Comment


          #6
          Worked like a charm. Enjoy the late night snack on me!

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Thanks! Added your donor badge.
        Working...
        X