Follow us links in line with breadbrumb

[Fun-Masti]

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:
https://vborg.vbsupport.ru/external/2014/08/10.jpg


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.


/* 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 :


<div class="body_wrapper">

7. Below that code


Find:
<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:

<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.

[kylek]

Glad I found this, looks good.

Anyone know how you could add "Follow us on" in front of the images?

[Fun-Masti]

In the step 8 <ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">

Instead use:

Follow Us On: <ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">

Alternately, to give it a little style, use CSS, for example, if you want to be strong, uppercase and colored in gray you can use following codes

In Additional.CSS add


.flwtext {
font-family:arial, verdana,tahoma;
font-size:13px;
text-transform:uppercase;
color: #ccc;
font-weight: bold;
padding: 2px;
}

[Note: Since, change padding, size, color etc according to your needs]

Then in the step 8 Replace the above mentioned code with
<span class="flwtext">Follow Us On: </span><ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">


Alternately, if you need to add an image saying "Follow Us On"
You can simply use this code

<ul>
<li>
<img src="/images/follow/nameofyourimage.jpg"></li>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">

[kylek]

Thanks very much!

[Skyrider]

Neat system, though would be nice if the images were provided in transparency.

[Fun-Masti]

Neat system, though would be nice if the images were provided in transparency.
Added PNG format icons with transparents background. Download followpngtransparent.zip file. Enjoy!!!

[juasan53]

I have problem with this code and i insert this :

<center>

<a href="https://twitter.com/..........."><img src="images/Twitter.Png" alt="Follow Me On Twitter" /></a>

<a href="https://www.facebook.com/.........."><img src="images/Facebook.Png" alt="Add Me To Facebook" /></a>

</center>

[Fun-Masti]

I have problem with this code and i insert this :

<center>

<a href="https://twitter.com/..........."><img src="images/Twitter.Png" alt="Follow Me On Twitter" /></a>



<a href="https://www.facebook.com/.........."><img src="images/Facebook.Png" alt="Add Me To Facebook" /></a>





</center>
What problem are you having?

[z3r0]

Be careful folks, malwarebytes pro is blocking the demo site and flagging stuff in this thread.

[Fun-Masti]

Don't worry z3r0, that demo link isn't a malware. Moreover, I've removed it now. That website is currently not working.

[Flipfloptrader]

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]

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

http://flipfloptrader.com/forumdisplay.php?2-Forum-Rules

This is my code from navbar


<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]

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

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

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]

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

[Flipfloptrader]

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:

<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]

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]

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]

Alright, try this. In the additional.css add the following 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

<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:



<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.

[Flipfloptrader]

Thank you, very much!

May I ask what has changed?

I'm very much a beginner with code but would like to try and understand how things work.

[Fun-Masti]

When you were putting the html code yourself, I don't know how you ended up there, but the locations of closing div tags are wrong at two places. Also, I made slight change to the css of the breadcrumb. Since it was already using float status elsewhere in the default theme, I removed float:left from breadcrumbL.

[gsk8]

Great mod! I noticed that when I hover, there is an underline under the images?

I don't want to post my URL, so please ck PM. Thanks!