Announcement

Collapse
No announcement yet.

Any way to add a facebook icon in the nav bar?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Any way to add a facebook icon in the nav bar?

    I'd like to put a facebook Icon in the nav bar to link to our facebook page. I found this old thread from VB4 which suggested you could do it by putting this code in the title, of the nav bar item, instead of text - but it doesn't seem to work:

    https://www.vbulletin.com/forum/foru...n-manager-link

    Instead of entering the text in the title box, you can enter

    Code:
    <img src="images/facebook.png">
    Any way to do this in VB 5?



  • #2
    Add the Facebook link to the Navigation Bar or Sub-Navigation Bar.

    Search for "Facebook" in phrases in the Navigation Bar

    Edit the phrase replacement text with the link. i.e. <img src="images/misc/facebook.png">

    Save

    Comment


    • Wayne Luke
      Wayne Luke commented
      Editing a comment
      Note that due to a bug, every time you change the Navigation Bar through Site Builder, the < and > will be replaced with &lt; and &gt; respectively. You'll have to edit and save the phrase (which is untouched by the bug) to restore proper HTML.

      A better solution is added below.

  • #3
    Just as an aside...with vB5, there is no point looking at anything for vB4, as the two products are completely different. Pretty much nothing from vB4 templates will work in vB5 templates.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.4.2 Demo - FEATURING "ROUTE BY NODE"!
    AdminAmmo - My Cloud Demo

    Comment


    • #4
      This could also be an option : https://vbulletin-forum.de/forum/eng...ain-navigation
      Last edited by delicjous; Fri 14th Sep '18, 6:42am.
      vBulletin-forum.de | Das deutschsprachige vBulletin 5 Forum! | Widgets, Mods und Anleitungen auf deutsch.
      Team online, Latest Profile-Visitors, Moderation-Info, Auto-close Threads, Latest Likes, Top-Posters PRO, New&Free: vB5 MemberMap

      Comment


      • #5
        The recommended method of doing this would be to use Template Hooks.
        1. Log into the AdminCP.
        2. Go to Styles -> Style Manager.
        3. Select "Add New Template" from the All Style Options for your style.
        4. Name it "header_tabbar_facebook"
        5. Enter your code.
        6. Save the template.
        7. Go to Products & Hooks -> Manage Template Hooks.
        8. Click Add New Hook at the bottom.
        9. Set the hook location to header_tabbar.
        10. Set Active to "Yes"
        11. Give it a name like "Facebook Button"
        12. Enter the template name you created "header_tabbar_facebook"
        13. Save your new hook.

        Reload the front page and your button should be available in your current style. Add the template to every style you have available to your users.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #6
          Awesome! thank you for that!

          Comment


          • #7
            It works great - just need to use some CSS and a little tweaking to position it correctly. What I used for the template code was (in order to make it a tab like everything else):

            Code:
            <li class=" section-item js-shrink-event-child">
                <a class="h-left navbar_facebook" href="https://www.facebook.com/LINK" target="_blank"><img src="/images/icons/facebook-20px.png"></a>
            </li>
            And then in the CSS:

            Code:
            /* facebook icon */
            .navbar_facebook{
                padding:0px 12px 0px 12px !important;
            }
            YouTube icon coming next!

            Click image for larger version  Name:	example.jpg Views:	1 Size:	97.0 KB ID:	4398485

            Comment

            Working...
            X