Page 1 of 1

How to add social icons to navbar

Posted: Sat Jan 21, 2017 12:29 pm
by vader696
On my forum based on phpBB 3.1.x I added social icons to navbar using this help How to add social icons But after I updated forum to 3.2.0 I couldn't find any tutorial, so I did it on my own.

Was tested on prosilver and prosilver_se style for phpbb 3.2.0

Steps based on tutorial which I linked above:
  • 1.First off, we need to create a new folder containing the images we want to use. Go to

    Code: Select all

    /styles/prosilver/theme/images OR /styles/prosilver_se/theme/images
    and create a new folder in that called social
  • 2. Inside that folder, place the images you want to have in your prosilver header. I added facebook.png, instagram.png, flickr.png ond other. Icons resolutions should be 25x25px.
  • 3. Next up, go to

    Code: Select all

    /styles/prosilver/template
    and open

    Code: Select all

    common.css
    Find

    Code: Select all

    ul.linklist > li.rightside, p.rightside, a.rightside {}
    Add on a new line after

    Code: Select all

    /* social icons */
    ul.linklist > li.social {
    	float: right;
    	margin-right: 0;
    	margin-left: 7px;
    	text-align: right;
    }
  • 4. Next up, go to

    Code: Select all

    /styles/prosilver/theme
    and open up

    Code: Select all

    navbar_header.html
    Find

    Code: Select all

    <!-- EVENT overall_header_breadcrumbs_after -->
    Add on a new line after

    Code: Select all

    <!--  **************** SOCIAL ICONS  **************** -->
    <li class="social">
    	<a href="https://www.flickr.com/" target="_blank"><img style="border-radius:4px 4px 4px 4px;" alt="Your group on flickr.com" width="25px" height="25px" src="{T_THEME_PATH}/images/social/flickr.png"></a>
    	<a href="https://www.instagram.com/" target="_blank"><img style="border-radius:4px 4px 4px 4px;" alt="Your group on instagram.com" width="25px" height="25px" src="{T_THEME_PATH}/images/social/instagram.png"></a>
    	<a href="https://www.facebook.com/" target="_blank"><img style="border-radius:4px 4px 4px 4px;" alt="Your group on facebook.com" width="25px" height="25px" src="{T_THEME_PATH}/images/social/facebook.png"></a>
    </li>
    You can add more or less icons, depends on you
  • 5. After these changes are made, and your style is refreshed in the ACP, the social icons should be visible but behind the search box.
I hid search box, so on my forum looks like this
Image

Regards :)

Re: How to add social icons to navbar

Posted: Sun Feb 05, 2017 5:28 pm
by Hanakin
just so you know this was way easier to accomplish as you now have access to all the social icons of font-awsome

http://fontawesome.io/icons/#brand

just copy one of the links from the footer and paste it in the place you want in the navbar then change the icon class to the one from the linked page!

Re: How to add social icons to navbar

Posted: Mon Aug 21, 2017 7:08 pm
by ClassicNancy1
Hanakin wrote:
Sun Feb 05, 2017 5:28 pm
just so you know this was way easier to accomplish as you now have access to all the social icons of font-awsome

http://fontawesome.io/icons/#brand

just copy one of the links from the footer and paste it in the place you want in the navbar then change the icon class to the one from the linked page!
Hi could you please show an example of how to do this. I've been trying but not successful. Don't know enough about the code. Been playing with variances of this. No idea what I'm doing lol.

Code: Select all

<!-- IF U_TWITTER -->
			<li class="rightside" data-last-responsive="true">
				<a href="{U_TWITTER}" role="menuitem">
					<i class="fa fa-twitter-square" aria-hidden="true"></i></i><span>{L_TWITTER}</span>
				</a>
			</li>
		<!-- ENDIF -->

Re: How to add social icons to navbar

Posted: Sun Feb 18, 2018 12:59 pm
by fliper4o
bump
3.2.2 prosilver
How to?
Untitled.jpg
Untitled.jpg (26.13 KiB) Viewed 1258 times

Re: How to add social icons to navbar

Posted: Sun Feb 18, 2018 4:37 pm
by Mick
fliper4o wrote:
Sun Feb 18, 2018 12:59 pm
How to?
Have a search of the extensions forums and, if you don’t find what you need, you can make an extension request.

Re: How to add social icons to navbar

Posted: Fri Jun 08, 2018 2:08 pm
by PB190
Any actual instructions fot version 3.2.2 ? I need add facebook icon in to header - left side in search field.
or any extension for this ? I nothing found.

Re: How to add social icons to navbar

Posted: Fri Jun 08, 2018 5:52 pm
by Mick
PB190 wrote:
Fri Jun 08, 2018 2:08 pm
I nothing found
Me either;
Mick wrote:
Sun Feb 18, 2018 4:37 pm
you can make an extension request.

Re: How to add social icons to navbar

Posted: Fri Jun 08, 2018 9:35 pm
by Hanakin
its actually really simple if you are just adding links to your own pages.

1. get the links to your social media apps you want
2. Add the following to where you want them.
HTML

Code: Select all

<nav class="social-nav">
	<a class="social-link" href="">
		<i class="icon fa-rss-square fa-fw social-icon" aria-hidden="true"></i>
		<span class="social-text sr-only">RSS</span>
	</a>
	<a class="social-link" href="">
		<i class="icon fa-facebook-square fa-fw social-icon" aria-hidden="true"></i>
		<span class="social-text sr-only">Facebook</span>
	</a>
	<a class="social-link" href="">
		<i class="icon fa-twitter-square fa-fw social-icon" aria-hidden="true"></i>
		<span class="social-text sr-only">Twitter</span>
	</a>
</nav>
CSS

Code: Select all

.social-icon {
	font-size: 24px;
}

.fa-rss-square {
	color: #ff6600;
}

.fa-facebook-square {
	color: #3b5999;
}

.fa-twitter-square {
	color: #55acee;
}
3. duplicate the links as needed for all the apps you want.
4. use https://fontawesome.com/v4.7.0/icons/ to find the name of the icons
5. change the class in the code above from ex: fa-rss-square to the one you want.
6. create a css class for it and give it the color you want.
7. update the href="" for all the links to your social app links.
8. add the name in the span for screen readers

*Note: none of this works on mobile, meaning you will have to workout the responsive nature of the nav yourself.

see a demo: https://codepen.io/hanakin/pen/QxdLvx?editors=1100