vb.org Archive
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Display Enhancements - Follow us links in line with breadbrumb (https://vborg.vbsupport.ru/showthread.php?t=313729)

Fun-Masti 08-15-2014 10:00 PM
Follow us links in line with breadbrumb
 
1 Attachment(s)
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.


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.

kylek 09-04-2014 09:07 PM
Glad I found this, looks good.

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

Fun-Masti 09-05-2014 12:40 AM
In the step 8
Code:
<ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">
Instead use:

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

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

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 09-05-2014 10:46 PM
Thanks very much!

Skyrider 09-15-2014 07:57 AM
Neat system, though would be nice if the images were provided in transparency.

Fun-Masti 09-16-2014 04:13 AM
Quote:
Originally Posted by Skyrider (Post 2515224)
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 09-04-2015 01:17 PM
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 09-04-2015 01:25 PM
Quote:
Originally Posted by juasan53 (Post 2554256)
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 09-04-2015 03:53 PM
Be careful folks, malwarebytes pro is blocking the demo site and flagging stuff in this thread.

Fun-Masti 09-04-2015 04:03 PM
Don't worry z3r0, that demo link isn't a malware. Moreover, I've removed it now. That website is currently not working.


All times are GMT. The time now is 11:47 PM.
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01156 seconds
  • Memory Usage 1,750KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (9)bbcode_code_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete