This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

How to add social icons

Description: This article will show you how to add social icons to your prosilver themed phpBB forum.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/how-to-add-social-icons/]Knowledge Base - How to add social icons[/url]

First off, we need to create a new folder containing the images we want to use.

Go to /styles/prosilver/theme/images and create a new folder in that called social

Inside that folder, place the images you want to have in your prosilver header.
These images should be named social_name.png
For example the Facebook image should be named social_facebook.png

For this article I will be using the images located below:

Next up, go to /styles/prosilver/theme and open up colours.css and add at the bottom of the file:

Code: Select all

#social_bar {
   margin: 0 auto;
   position: relative;
   right: 10px;
   top: 30px;
}
#social_buttons {
   float: right;
}

Go to /styles/prosilver/template and open overall_header.html

Find:

Code: Select all

<div class="inner"><span class="corners-top"><span></span></span>


Add on a new line after:

Code: Select all

            <div id="social_bar">
               <div id="social_buttons">
                  <a href="Link to your feeds"><img alt="RSS" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
                  <a href="https://www.facebook.com/"><img style="border-radius:4px 4px 4px 4px;" alt="Facebook" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
                  <a href="https://www.twitter.com/"><img style="border-radius:4px 4px 4px 4px;" alt="Twitter" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_twitter.png"></a>
               </div>
            </div>


After these changes are made, and your style is refreshed in the ACP, the social icons should be visible but behind the search box.

To fix this you could either remove the search box entirely by following
[kb=remove-search-box+add-search-icon-in-navbar]Remove search box & add search icon in navbar[/kb]
Or follow the directions below.

Go to /styles/prosilver/theme and open common.css

Find:

Code: Select all

#search-box {
   color: #FFFFFF;
   position: relative;
   margin-top: 30px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

Find margin-right: 5px; in the above code and change it into margin-right: 20px;
This will move the search box to the left of the social icons.

This should result in the following:
Image

Don't forget to refresh your style in the ACP.