Info [cXF] Social Icons in Header

Status
Not open for further replies.

BassMan

Staff member
Administrator
Messages
792
Likes
411
Website
www.customizexf.com
#1
sih-icon.png

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:
sih.gif

Style property group is below Header and Navigation group

sih_sp_group.PNG


Example for editing the Facebook icon

sih_sp.PNG


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
 
Last edited:

BassMan

Staff member
Administrator
Messages
792
Likes
411
Website
www.customizexf.com
#2
* 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

New Member
Messages
1
Likes
0
#3
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

Staff member
Administrator
Messages
792
Likes
411
Website
www.customizexf.com
#4
You have settings in stype properties for this.

upload_2015-9-14_16-58-58.png

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.
 

dannyefc

New Member
Messages
3
Likes
2
#6
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.
 
Messages
7
Likes
1
Website
www.websiteworld.com
#8
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
 
Messages
7
Likes
1
Website
www.websiteworld.com
#12
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?
Screenshot_2015-10-28-10-57-03_resized.png
 
Messages
7
Likes
1
Website
www.websiteworld.com
#14
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.
Screenshot_2015-10-28-13-19-14_resized.png
 

BassMan

Staff member
Administrator
Messages
792
Likes
411
Website
www.customizexf.com
#15
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.
 
Messages
7
Likes
1
Website
www.websiteworld.com
#18
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.


Screenshot_2015-10-28-19-12-02_resized.png
 
Status
Not open for further replies.
Top