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
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.
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.
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
HTML Code:
<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>
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.
HTML Code:
#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; }
Comment