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:	335
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:	32
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


                  #11

                  Thank you,

                  installed but have problem when the forum name too long in google chrome only
                  Click image for larger version

Name:	2019-06-07_17-43-49.jpg
Views:	40
Size:	15.5 KB
ID:	19152

                  Comment


                    #12
                    That's an issue introduced in one of the recent releases. It added a max-width of 300px for each breadrumb link. vB said they are fixing it in 5.5.3.

                    In the meantime, try adding this custom CSS to remove the max-width restriction: (Untested)

                    Code:
                    #breadcrumbs .crumb.ellipsis {
                        max-width: none;
                    }

                    Comment


                      #13
                      ( Edited )

                      Its working great

                      Thank you so much for help

                      Comment


                        #14
                        Glad to help Damas

                        Comment


                          #15
                          New way, Can we convert this css code to use it in vb 5 ?

                          I use it on my old vb3.

                          It will look like this

                          Click image for larger version  Name:	NavBar.jpg Views:	0 Size:	17.6 KB ID:	19192


                          The original on vb3
                          Code:
                          /*NavBar*/
                          .SHA-Navbar, .Nav-Link{background:#FFFFFF;border:1px solid #D7D7D7;margin:5px 0;color:#646C74;text-shadow:1px 1px 1px #FFFFFF;clear:both;overflow:hidden;margin:0 0 50px 0;}
                          .SHA-Navbar{padding:5px;font-size:13px;font-weight:700;}.Nav-Link{width:100%;}
                          .Nav-Link{padding:0;list-style:none;}
                          .Nav-Link a{padding:.5em 1.9em .5em .8em;float:right;text-decoration:none;color:#646C74;position:relative;background-image:linear-gradient(to left, #FFFFFF, #F2F2F2);}
                          .Nav-Link li:first-child a{padding-right:5px;}
                          .Nav-Link a:after, .Nav-Link a:before{content:"";position:absolute;top:50%;margin-top:-1.5em;border-top:1.5em solid transparent;border-bottom:1.5em solid transparent;border-right:1em solid;left:-0.9em;}
                          .Nav-Link a:after{border-right-color:#F2F2F2;z-index:2;}
                          .Nav-Link a:before{border-right-color:#FFFFFF;left:-13px;z-index:1;}
                          .Nav-Link .current, .Nav-Link .current:hover{background:none;vertical-align:-7px;margin:0 25px 0 0;}
                          .Nav-Link .current:after, .Nav-Link .current:before{content:normal;}

                          Comment

                          Working...
                          X