Breadcrumbs In Footer (Solved for Cloud)

[pgreenway]

Ok so I was playing around with static modules and found a way to put breadcrumbs in the footer for the cloud hosted version of vbulletin. This works on version 5.4.1 but I'm sure it will work on others b/c it uses javascript that has been around for a bit since breadcrumbs are not much of a new feature these days.

So I went to sitebuilder > edit page > add static html module and I put it below my channel display module

Inside the HTML code I put the following javascript

<script language="JavaScript">
<!--
   String.prototype.capitalizeFirstLetter = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
   }

//Bread crumb script - Kevin Lynn Brown
//Duplicate directory names bug fix by JavaScriptKit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script

var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=3;i<(s.length-1);i++) {
path+="<A HREF=""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/">"+s[i]+"</A> > ";
}
i=s.length-1;
path+="<A HREF=""+href.substring(0,href.indexOf(s[i])+s[i].length)+"/">"+s[i]+"</A>";
var url = "<a href='{{.Site.BaseURL}}'>Home</a>" + " > " + path;
document.writeln(url);
//-->
</script>

I wanted to give credit to Kevin Lynn Brown for the code as I used his script and modified it to fit my needs. I didn't write most of it so it is not all my code but this fits for what the breadcrumbs look like at the top of the screen.

Here is the CSS I used to make everything look like the top. The only difference on my site between the top and bottom breadcrumbs is the arrow. It's not the standard keyboard arrow but it uses a sprite that vbulletin has. This can be changed to be standard but would require some additional coding or possible CSS changes. You will have to get the ID of the widget and modify it to fit the number of the widget that you will have added.

#widget_195 .b-icon__toggle-collapse {
  display: none;
}

#widget_195 .module-title {
  display: none;
}

#widget_195 .widget-header-divider {
  display: none;
}

#widget_195 ul.breadcrumb {
  margin: 0;
  padding: 0px 0px;
  background-color: #FFFFFF;
}

#widget_195 h2 {
  display: none;
}

#widget_195 .widget-header {
  display: none;
}

#widget_195 {
    background-color: #FFFFFF;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    text-transform: capitalize;
    font: small-caps bold 12px Arial,sans-serif;
}

#widget_195 .widget-content, .post-content {
  color: #D2D2D2;
}

Let me know what you guys think but I put this together over the last day or so and it looks good on my end.

[pgreenway]

How it looks on the top of the page:



How it looks on the bottom of the page:

[pgreenway]

There's a small difference in the top and the bottom VIP words but I do not know how to solve that one yet.

[glennrocksvb]

Thanks for sharing pgreenway!

[nincompoop]

It didn't work on my board.

The members are clamouring for some form of jump box or nav menu at the bottom of the page.

[pgreenway]

It didn't work on my board.

The members are clamouring for some form of jump box or nav menu at the bottom of the page.

https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-cloud-modifications/10686-dropdown-forum-navigator-selector-solved-for-cloud

how about this?

[pgreenway]

It didn't work on my board.

The members are clamouring for some form of jump box or nav menu at the bottom of the page.

With the code updates to vb5.5.4 it could be that the code I posted needs updating as well. I haven’t looked at it in a while but it’s working on my board still

[nincompoop]

Thanks, I will try adding it again.

Doe it matter which page it gets added to?

we have a lot of content on the forums page, and the masses want something at the bottom.

I did look at the top drop down navigation, and will have a go at adding that, and hopefully get something at the bottom as well..