How to add social icons to navbar

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
vader696
Translator
Posts: 122
Joined: Sat Jan 21, 2017 11:38 am
Location: Krakow, Poland
Contact:

How to add social icons to navbar

Post 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 :)
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to add social icons to navbar

Post 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!
ClassicNancy1
Registered User
Posts: 15
Joined: Tue Jul 04, 2017 12:40 pm

Re: How to add social icons to navbar

Post 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 -->
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: How to add social icons to navbar

Post by fliper4o »

bump
3.2.2 prosilver
How to?
Untitled.jpg
Untitled.jpg (26.13 KiB) Viewed 3425 times
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26502
Joined: Fri Aug 29, 2008 9:49 am

Re: How to add social icons to navbar

Post by Mick »

fliper4o wrote: Sun Feb 18, 2018 12:59 pmHow to?
Have a search of the extensions forums and, if you don’t find what you need, you can make an extension request.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
PB190
Registered User
Posts: 134
Joined: Mon Apr 30, 2018 2:50 pm

Re: How to add social icons to navbar

Post 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.
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26502
Joined: Fri Aug 29, 2008 9:49 am

Re: How to add social icons to navbar

Post by Mick »

PB190 wrote: Fri Jun 08, 2018 2:08 pmI nothing found
Me either;
Mick wrote: Sun Feb 18, 2018 4:37 pmyou can make an extension request.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to add social icons to navbar

Post 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
Post Reply

Return to “[3.2.x] Styles Support & Discussion”