Announcement

Collapse
No announcement yet.

How to add borders to the breadcrumbs

Collapse
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:	16
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:	0
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.

          #7
          Really like this addition! Thanks

          Comment


            #8
            Thank you so much. It took less than 20 seconds to make it work. Looks nice

            Comment


              #9
              Awesome, quick question. After adding this, the little arrows between the bordered breadcrumbs are no longer centered. What would I need to change to re-center them, see my attachment for example of the issue.

              Attached Files

              Comment


                #10
                Originally posted by stimpy
                Quick answer:
                - go to AdminCP > Style > CSS Editor
                - scroll down the bottom and add lines:
                Code:
                /* vertically center arrow icons in the breadcrumb */
                li.vb-icon { height: 17px !important; }
                --Stimpy
                The CSS selector in the above suggested code is too generic that it might also apply to other non-breadcrumb sections. The safer solution and better is to simply adjust the value of top margin in the last block of code in the original code in post #1 below:
                Code:
                #breadcrumbs .separator {
                    margin-top: 9px; /* adjust value as needed */
                }

                Comment

                Working...
                X