Add social network navbar

Hello fellas,

If you are interested how to add social networks navbar to the left on your forum, you are on the right place and time :P

Go to CP > Display > Pictures & Colors > Colors & CSS > CSS Stylesheet and paste this:

.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
.icon-bar a:hover {
  background-color: #000;  
}

.facebook {
  background: #3B5998;
  color: white;
}
.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

Now, go to CP > Display > Templates > General > overall_header and inside "<head>" tag add this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now, depending on the forum version, do this

AwesomeBB: Find "<body id="top">" and under it paste this code:

phpBB2: Find "<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"

vlink="{T_BODY_VLINK}">" and under it paste this code:

phpBB3: Find "<body id="phpbb">" and under it paste this code:

PunBB, Invision: Find "<body>" and under it paste this code:

ModernBB: Find "<body id="modernbb">" and under it paste this code:

  <!-- SOCIAL -->
<div  >
  <a href="#"  title="Facebook"><i  ></i></a> 
  <a href="#"  title="Twitter"><i  ></i></a> 
  <a href="#"  title="Google"><i  ></i></a> 
  <a href="#"  title="Linkedin"><i  ></i></a>
  <a href="#"  title="Youtube"><i  ></i></a> 
</div>

Instead of # inside href="" put URL that suits you. If you don't need some of social networks, just remove them.

Final results:

References:

Code taken from: https://www.w3schools.com/howto/howto_css_sticky_social_bar.asp

Online publications

Go back to the forum

Add social network navbar

About the author