Jump to content

Welcome to DevFuse Forums

Sign In  Log in with Facebook

Create Account
Welcome to DevFuse Forums, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of DevFuse Forums by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
Guest Message by DevFuse

Tutorial info Visit support topic

  • Added on: Aug 18 2012 09:53 PM
  • Date Updated: Mar 27 2013 02:07 AM
  • Views: 9073
  • IPB Version: IPB 3.3.x

Add twitter, facebook icons in header

Tutorial on how to add social media icons in the IPB header.

Posted by Michael on Aug 18 2012 09:53 PM
This tutorial will show you how to add various social media icons (twitter, youtube, facebook) icons in the IPB header. In this case next to the quick search box.

Posted Image

Step 1. Open your Admin CP > Look & Feel Tab > select skin > Global Templates > globalTemplate.

<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
                        {parse template="quickSearch" group="global" params=""}

<ul class='ipsList_inline right' style='margin-top: 20px; margin-right: 30px;'>
<li style='margin:0px;'><a href='http://twitter.com/{twitter username}' title='Latest news and updates at twitter'><img src='{link to twitter icon}' alt='twitter' /></a></li>
<li style='margin:0px;'><a href='http://www.youtube.com/user/{youtube username}' title='View my Youtube videos'><img src='{link to youtube icon}' alt='youtube' /></a></li>
<li style='margin:0px;'><a href='https://plus.google.com/{google plus id}' title='View our Google Plus page'><img src='{link to your google plus icon}' alt='googleplus' /></a></li>

Save Template.

Now you'll need to replace where I've stated {twitter username} or {link to youtube icon} with your own social media usernames and social media icons. In different skins you may need to adapt the padding or margin to fit better with your skin.

Powered by Tutorials 1.5.1 © 2016, by Michael McCune