How To: Show breadcrumbs also at the bottom of a page.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Guest

    How To: Show breadcrumbs also at the bottom of a page.

    I like the idea of having the breadcrumbs on the top of the page, but I would also like to have them at the bottom of the page.

    With vB5 it is very simple to do. I love the way hooks work. If you also would like to have breadcrumbs at the bottom of the page, follow these simple steps:
    1. Go to AdminCP -> Style Manager -> Add New Template
    2. Name the Title breadcrumbs_footer
    3. In the Template use the following code:
      Code:
      <vb:if condition="$page['crumbs']">
      	      {vb:set breadcrumbSchema.itemprop, breadcrumb}
      	      <ul id="breadcrumbs" class="h-clearfix" {vb:schema {vb:raw breadcrumbSchema}}>
      	          <li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vb:phrase home}</a></li>
      	          <vb:each from="page.crumbs" value="crumb">
      	              <vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
      	                  {vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
      	              <vb:else />
      	                  {vb:set crumbTitle, {vb:raw crumb.title}}
      	              </vb:if>
      	              <li class="vb-icon separator"></li>
      	              <li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
      	          </vb:each>
      	      </ul>
      	  <vb:else />
      	  </vb:if>
    4. Click Save
    5. Go to Products & Hooks -> Manage Hooks -> Add New Hook
    6. Select for Hook Location footer_start
    7. Give the hook a Title, for example Breadcrumbs Footer
    8. In the field Template Name fill out breadcrumbs_footer
    9. In Hook Arguments put:
      Code:
      page=page
    10. Click Save
    That's it! You will now have your breadcrumbs directly above your Footer!
    Last edited by Guest; Sun 2 Mar '14, 11:26pm.
  • Guest

    #2
    It seems to have a bug. It works everywhere, except when you show a topic with more than one page. The hook is loaded, but somehow it thinks that it doesn't meet the 'if condition' and thus doesn't show the breadcrumbs above the footer.

    Strange enough it does work when you disable the hook and paste the code in the 'footer' template directly as from line 4.

    So it works after all, but it is nicer to have it working as a hook. I can't figure out what the difference is, as the hook is loaded directly.

    Does anyone have a clue?

    Comment

    • TLMD
      Senior Member
      • Sep 2012
      • 1766
      • 5.6.X

      #3
      Since your have started doing How To's for vB5, just a general suggestion: How about adding a screenshot to every tutorial, so that everyone can see how the results will look like?

      Comment

      • anwar513
        Senior Member
        • Sep 2010
        • 277
        • 5.2.x

        #4
        Not shown in the footer at the crumbs.

        Comment

        • anwar513
          Senior Member
          • Sep 2010
          • 277
          • 5.2.x

          #5
          Forum does not show other places to display
          Attached Files
          Last edited by anwar513; Fri 28 Feb '14, 7:17am.

          Comment

          • Guest

            #6
            Anwar513, I don't understand what you mean? I see the breadcrumbs at the bottom (but I can't read the text haha).

            Originally posted by TLMD
            Since your have started doing How To's for vB5, just a general suggestion: How about adding a screenshot to every tutorial, so that everyone can see how the results will look like?
            Yes I will do that. I will soon add the pics for them.

            Comment

            • Lynne
              Former vBulletin Support
              • Oct 2004
              • 26255

              #7
              Go to your hook and in the Hook Arguments, put:
              Code:
              page=page

              Please don't PM or VM me for support - I only help out in the threads.
              vBulletin Manual & vBulletin 4.0 Code Documentation (API)
              Want help modifying your vbulletin forum? Head on over to vbulletin.org
              If I post CSS and you don't know where it goes, throw it into the additional.css template.

              W3Schools &lt;- awesome site for html/css help

              Comment

              • anwar513
                Senior Member
                • Sep 2010
                • 277
                • 5.2.x

                #8
                Thank you to display, I learned a trick
                you see the breadcrumbs at the bottom on it, the text is not important

                Comment

                • anwar513
                  Senior Member
                  • Sep 2010
                  • 277
                  • 5.2.x

                  #9
                  I'm sorry, today my network instability, repeated Reply
                  Last edited by anwar513; Fri 28 Feb '14, 8:27am.

                  Comment

                  • Guest

                    #10
                    Originally posted by Lynne
                    Go to your hook and in the Hook Arguments, put:
                    Code:
                    page=page
                    This worked, can you explain why this works?

                    Comment

                    • Lynne
                      Former vBulletin Support
                      • Oct 2004
                      • 26255

                      #11
                      The variable wasn't being passed in that instance (perhaps is wasn't registered for use then?). I don't know the vB5 code well enough to be more specific than that, sorry.

                      Please don't PM or VM me for support - I only help out in the threads.
                      vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                      Want help modifying your vbulletin forum? Head on over to vbulletin.org
                      If I post CSS and you don't know where it goes, throw it into the additional.css template.

                      W3Schools &lt;- awesome site for html/css help

                      Comment

                      • kavih
                        New Member
                        • Mar 2014
                        • 22
                        • 5.0.X

                        #12
                        Hi Guys.

                        I am running VB 5.1.0 and I tried the above settings (including the page=page trick), but I do not see the bottom bread crumbs when the page does show the top bread crumbs. Hooks globally are enabled in my settings. I've cleared the system cache and logged out/in and back out again to see if it was a user-level cache issue.

                        Any ideas?

                        Thanks,

                        -Kavih

                        Comment

                        • TwinsForMe
                          Senior Member
                          • Oct 2004
                          • 130
                          • 4.0.0

                          #13
                          How do I centre this or even right-align, please?

                          Comment

                          • TwinsForMe
                            Senior Member
                            • Oct 2004
                            • 130
                            • 4.0.0

                            #14
                            Originally posted by TwinsForMe
                            How do I centre this or even right-align, please?
                            Through trial and error, I figured out how to put it right-aligned (The red text is what I added):

                            Code:
                            <vb:if condition="$page['crumbs']">
                                      {vb:set breadcrumbSchema.itemprop, breadcrumb}
                                      <ul id="breadcrumbs" class="h-clearfix" {vb:schema {vb:raw breadcrumbSchema}}>
                                       [COLOR=#FF0000] <ul class="nav-list h-right">[/COLOR]
                                          <li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vb:phrase home}</a></li>
                                          <vb:each from="page.crumbs" value="crumb">
                                              <vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
                                                  {vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
                                              <vb:else />
                                                  {vb:set crumbTitle, {vb:raw crumb.title}}
                                              </vb:if>
                                              <li class="vb-icon separator"></li>
                                              <li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
                                          </vb:each>
                                       [COLOR=#FF0000] </ul>[/COLOR]
                                      </ul>
                                  <vb:else />
                                  </vb:if>

                            Comment

                            • IggyP
                              Senior Member
                              • Mar 2012
                              • 680

                              #15
                              anyone know of a way to do this for vb4?

                              Comment

                              Related Topics

                              Collapse

                              Working...