The Arcive of Official vBulletin Modifications Site.

Follow us links in line with breadbrumb · **Released**: 08-15-2014

I had been looking to place follow us links on the forum. Tried using advertisements, and sidebar but nothing seemed to much helpful, and also they don't show up on every page, as the follow us links should. Finally, I made this little modification in templates to place the Follow Us links in line with breadcrumb.
Snapshot:

I am going to share with you how I did it. it requires a little code editing in the admin section of your board, so if you're not comfortable doing that please don't try on a live board, or ask someone who can do it for you.

1. Go to the Styles and temples > Style manager > Choose "edit templates" for the style you want to edit

2. Click on CSS templates and a list will open up. Click on Additional.css and go to the end of the template.

3. Paste the following code there.

Code:

/* New Crumb */
#breadcrumbx {
    margin-bottom: 5px;
    width: auto;
}
#breadcrumbR {
    float: right;
}
#breadcrumbR li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#breadcrumbR ul {
    margin: 0;
    padding: 0;
}

#breadcrumbL {
    float: left;
}

/* End New crumb */

4. We have prepared CSS for the modification, now we need to place the actual code in the templates.

5. Go to the "Navigation/breadcrumb templates" and click on it to open templates under it. Click on template named "navbar"

6. Find :

Code:

<div class="body_wrapper">

7. Below that code

Find:

Code:

<div id="breadcrumb" class="breadcrumb">
	<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul>
	<hr />
</div>

8. Replace this code with the following code:

Code:

<div id="breadcrumbX">
<div id="breadcrumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul><hr>
</div>
</div>

<div id="breadcrumbR">
<ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">
</a>
</li>
<li><a href="https://www.facebook.com/BooksWritersCom/">
<img src="/images/follow/facebook.jpg">
</a>
</li>
<li><a href="http://plus.google.com/u/0/104621077342474730540">
<img src="/images/follow/googleplus.jpg">
</a>
</li>
<li><a href="https://www.youtube.com/user/bookswriters">
<img src="/images/follow/youtube.jpg">
</a>
</li>
<li><a href="http://books-writers.blogspot.com/">
<img src="/images/follow/blogger.jpg">
</a>
</li><li><a href="https://delicious.com/bookswriters">
<img src="/images/follow/delicious.jpg">
</a>
</li><li><a href="http://www.stumbleupon.com/stumbler/bookswriters">
<img src="/images/follow/stumbleupon.jpg">
</a>
</li><li><a href="admin@zigverve.com">
<img src="/images/follow/email.jpg">
</a>
</li><li><a href="http://bookswriters.tumblr.com/">
<img src="/images/follow/tumblr.jpg">
</a>
</li><li><a href="http://zigverve.com/forum/external.php?type=RSS2">
<img src="/images/follow/rss.jpg">
</a>
</li>
</ul>
</div>
<br clear="all">

</div>

[Note: Change the links according to your own profiles.]

9. Save.

10. Download the attached zip (followlinks.zip for white background jpg files and followpngtransparent.zip for png transparent background)file and upload them to your forum's files.

11. Open your forum and you should see the Follow Us! links in the right side of your breacrumb.

Flipfloptrader · #12 04-05-2017, 09:39 AM

I like this mod but it's altered the layout of the forum house icon and split it over a couple of lines... Can anyone suggest how to realign it? Many thanks.

Flipfloptrader · #13 04-05-2017, 10:57 AM

It seems to have altered the way the structure is shown? Anyone any ideas please?

http://flipfloptrader.com/forumdispl...?2-Forum-Rules

This is my code from navbar

Code:

<div id="navbar" class="navbar">
	<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
		{vb:raw template_hook.navtab_start}
		{vb:raw navigation}
		{vb:raw template_hook.navtab_end}
	</ul>
	<vb:if condition="$vboptions['enablesearches']">
		<div id="globalsearch" class="globalsearch">
			<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
				<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="process" />
				<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
				<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
			</form>
			<ul class="navbar_advanced_search">
				<li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
				{vb:raw template_hook.navbar_advanced_search}
			</ul>
		</div>
	</vb:if>
</div>
</div><!-- closing div for above_body -->

<div class="body_wrapper">
<div id="breadcrumbX">
<div id="breadcrumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
</div>
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul><hr>
</div>
</div>

<div id="breadcrumbR">
<ul>
</li>
<li><a href="https://www.youtube.com/channel/UCDdkrXiyRU57k7HulZCyA5g">
<img src="/social/youtube.png">
</a>
</li>
<li><a href="http://www.instagram.com/flipfloptrader/">
<img src="/social/instagram.png">
</a>
</li>
</ul>
</div>
<br clear="all">

</div>

{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}

<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
	<form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
		<input type="hidden" name="do" value="dismissnotice" />
		<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
		<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
		<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
		<input type="hidden" name="url" value="{vb:raw return_link}" />
		<ol>
			{vb:raw notices}
		</ol>
	</form>
</vb:if>

Fun-Masti · #14 04-06-2017, 05:48 AM

Hello AutoFx,
It seems you've not correctly placed the code. After going through your code I found and unnecessary </div> here:

Code:

<ul class="floatcontainer">
</div>

Once you remove it, half the job is done. It appears you might have made some other alternation outside of this hack too. I am not able to pin point exactly where. It would be best if you reset the changes to default and do it anew, the right way this time.

Flipfloptrader · #15 04-06-2017, 06:01 AM

Quote:

Originally Posted by Fun-Masti

Hello AutoFx,
It seems you've not correctly placed the code. After going through your code I found and unnecessary </div> here:

Code:

<ul class="floatcontainer">
</div>

Once you remove it, half the job is done. It appears you might have made some other alternation outside of this hack too. I am not able to pin point exactly where. It would be best if you reset the changes to default and do it anew, the right way this time.

Thanks, I tried redoing it and it still left the structure as is unfortunately?

Fun-Masti · #16 04-06-2017, 06:11 AM

Quote:

Originally Posted by AutoFx

Thanks, I tried redoing it and it still left the structure as is unfortunately?

Because the code you used is still the same old wrong one. Please use the exact code that I've provided only replacing the social profile links.

Flipfloptrader · #17 04-06-2017, 06:12 AM

If I remove this mod it goes back to normal so would that suggest something within the code?

Flipfloptrader · #18 04-06-2017, 06:16 AM

Quote:

Originally Posted by Fun-Masti

Because the code you used is still the same old wrong one. Please use the exact code that I've provided only replacing the social profile links.

I copied your exact code and got this; I'm aware the icons are blank, I'm just doing this for exercise purposes:

Code:

<div id="navbar" class="navbar">
	<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
		{vb:raw template_hook.navtab_start}
		{vb:raw navigation}
		{vb:raw template_hook.navtab_end}
	</ul>
	<vb:if condition="$vboptions['enablesearches']">
		<div id="globalsearch" class="globalsearch">
			<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
				<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="process" />
				<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
				<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
			</form>
			<ul class="navbar_advanced_search">
				<li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
				{vb:raw template_hook.navbar_advanced_search}
			</ul>
		</div>
	</vb:if>
</div>
</div><!-- closing div for above_body -->

<div class="body_wrapper">
<div id="breadcrumbX">
<div id="breadcrumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul><hr>
</div>
</div>

<div id="breadcrumbR">
<ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">
</a>
</li>
<li><a href="https://www.facebook.com/BooksWritersCom/">
<img src="/images/follow/facebook.jpg">
</a>
</li>
<li><a href="http://plus.google.com/u/0/104621077342474730540">
<img src="/images/follow/googleplus.jpg">
</a>
</li>
<li><a href="https://www.youtube.com/user/bookswriters">
<img src="/images/follow/youtube.jpg">
</a>
</li>
<li><a href="http://books-writers.blogspot.com/">
<img src="/images/follow/blogger.jpg">
</a>
</li><li><a href="https://delicious.com/bookswriters">
<img src="/images/follow/delicious.jpg">
</a>
</li><li><a href="http://www.stumbleupon.com/stumbler/bookswriters">
<img src="/images/follow/stumbleupon.jpg">
</a>
</li><li><a href="admin@zigverve.com">
<img src="/images/follow/email.jpg">
</a>
</li><li><a href="http://bookswriters.tumblr.com/">
<img src="/images/follow/tumblr.jpg">
</a>
</li><li><a href="http://zigverve.com/forum/external.php?type=RSS2">
<img src="/images/follow/rss.jpg">
</a>
</li>
</ul>
</div>
<br clear="all">

</div>
{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}

<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
	<form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
		<input type="hidden" name="do" value="dismissnotice" />
		<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
		<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
		<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
		<input type="hidden" name="url" value="{vb:raw return_link}" />
		<ol>
			{vb:raw notices}
		</ol>
	</form>
</vb:if>

Fun-Masti · #19 04-06-2017, 06:39 AM

Please remove the code of this mod entirely, from html and css both. Let me see if I am able to replicate the problem at my end. Inform me as soon as you've done that.

Flipfloptrader · #20 04-06-2017, 06:47 AM

Quote:

Originally Posted by Fun-Masti

Please remove the code of this mod entirely, from html and css both. Let me see if I am able to replicate the problem at my end. Inform me as soon as you've done that.

Done, thanks.

Fun-Masti · #21 04-06-2017, 07:03 AM

Alright, try this. In the additional.css add the following code:

Code:

/* New Crumb */
#breadcrumbx {
    margin-bottom: 5px;
    width: auto;
}
#breadcrumbR {
    float: right;
}
#breadcrumbR li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#breadcrumbR ul {
    margin: 0;
    padding: 0;
}

/* End New crumb */

While in the breadcrumb template replace the following code

Code:

<div id="breadcrumb" class="breadcrumb">
	<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul>
	<hr />
</div>

With:

Code:

<div id="breadcrumbX">
<div id="breadcrumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul><hr>
</div>
</div>

<div id="breadcrumbR">
<ul>
<li><a href="https://www.youtube.com/channel/UCDdkrXiyRU57k7HulZCyA5g">
<img src="/social/youtube.png">
</a>
</li>
<li><a href="http://www.instagram.com/flipfloptrader/">
<img src="/social/instagram.png">
</a>
</li>
</ul>
</div>
<br clear="all">

</div>

Follow the exact steps and you should be fine.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04812 seconds Memory Usage 2,369KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (11)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (11)post_thanks_box (1)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (5)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

Благодарность от:
puertoblack2003

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!