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

    Free Mod How to add borders to the breadcrumbs

    To achieve this style for the breadcrumb:

    Click image for larger version

Name:	image.png
Views:	5488
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;
    }
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #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:	269
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;
        [COLOR=#FF0000]height: 15px!important;[/COLOR]
            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.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        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; [COLOR=#FF0000]/* adjust value as needed */[/COLOR]
                }
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                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:	227
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;
                    }
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #13
                      ( Edited )

                      Its working great

                      Thank you so much for help

                      Comment


                        #14
                        Glad to help Damas
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        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

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"