Info [cXF] Social Icons in Header

[BassMan]

Description:
This add-on will add an option for social icons (Facebook, Twitter, Linkedin, Google+), RSS or contact icon to show in header.

* if you will use Font Awesome icons, it is recommended to install this add-on: [cXF] Font Awesome Switch 4.6.1 | customizeXF, unless you already have them installed by a third party style or add-on.

Download it here: [cXF] Social Icons in Header

Features:

• show social network icons in header (Facebook, Twitter, Linkedin, Google+)
• show RSS icon in header
  
• show contact icon in header
• all icons a customizable (color, hover color, size, icon can be changed)
• option to open links in new tab
• option to load Font Awesome locally or by CDN
• option to position icons in header (move up/down, left/right)
• option to set icons size on mobile landscape view (suggest to set them smaller if you have all icons enabled)
  
• option to disable icons on mobile screens completely

Example screens:


Style property group is below Header and Navigation group




Example for editing the Facebook icon




Installation:

1. Download and unzip it
2. From your Admin Control Panel, go to the "Install Add-on" page
3. Upload the xml file and click the Install Add-on button.

Note:

• tested on default style only

 

[BassMan]

* UPDATE *

What's new in version 1.1.0:

• added option to set icons size on mobile landscape view (suggest to set them smaller if you have all icons enabled)
  
• added option to disable icons on mobile screens completely

How to upgrade:

• install the XML file

 

[/GriFFin]

I bought this plugin and its working great.

Except it would be nice if the icons scaled down automatically as my theme is responsive like all styles should be now, but this plugin breaks that feature.

 

[BassMan]

You have settings in stype properties for this.



Or play a bit with your responsive settings.

Check this forum on mobile and you'll see it works fine. Just need to find the right setting for your forum.

 

[Spy]

Thank you.

 

[dannyefc]

Looking good.

I've bought, any ideas how long it takes for me to receive the files? Was hoping to quickly install before heading off the weekend.

[EDIT], Ah, I now realise I needed to activate/register my domain to download. Sorted.

 

[BassMan]

What's new in version 1.2.0:

• customized to work with [cXF] Font Awesome Switch

IMPORTANT: if you're using Font Awesome icons in this add-on, you must first install and enable the [cXF] Font Awesome Switch add-on!


How to upgrade:

• install the XML file

 

[actormike]

How do you think this work work on my Ford Thunderbird Forum ? I noticed on your site, you have a lot of space to the right, so when I flip my Galaxy S6 Edge+ to landscape I can see the icons on the phone, however you will notice on my site, the header takes up the whole space. Of course on Tablets and PC's you can see some space. I only need room for Facebook/Twitter/Google

 

[BassMan]

On PC there won't be a problem, but on mobile it automatically hides icons. Do you want icons to show on mobile too?

 

[actormike]

I can see the icons on my phone in landscape mode on my phone from your site.

 

[BassMan]

Yes, depends on settings. So, you want to show icons on your forum in mobile view?

 

[actormike]

It would be nice to be able to see them on mobile, but I would rather the header take up the whole space because I think it looks good. I'm actually thinking the social media icons would look better inside the Menu Bar where the Dark Purple area is to the right, what do you think? Is that possible?

 

[BassMan]

m actually thinking the social media icons would look better inside the Menu Bar where the Dark Purple area is to the right, what do you think? Is that possible?

Possible, but I would be a problem when user log's in. I don't recommend it.

Maybe some other location?

 

[actormike]

For reference, if I don't disable in on mobile, it puts the icons above the header logo but the login/signup is overlapping when the phone is in landscape mode. Really don' t mind the icons being there like that except they need moved over or centered.

 

[BassMan]

Yes, I can see that. We can increase the width when icons appears.

When icons jumps above logo your breadcrumb don't look right.

I'll think about a solution for mobile devices. Maybe centered icons above logo.

 

[actormike]

One more suggestion, you really need to add the Instagram icon. It's the #1 social media site among Teens/Young adults.

 

[BassMan]

I see you're not using Linkedin icon, so you have one free slot. Just edit this in style properties:



Add Instagram url and for icon name put fa-instagram.

 

[actormike]

I was looking at the add on more today and realized there are settings for positioning as well. After messing around with it, I came up with the layout below. I think it would be good to be able to control the positioning for mobile devices as a separate setting along with the font size which you have already implemented. I really don't need as much margin for the icons on mobile devices.

 

[BassMan]

I'll see what I can do. Currently can't find a way to add icons above logo to show all other elements right.

 

[actormike]

If you could have separate positioning settings for mobile, like you do the font size, that would help a lot.