Welcome to customizeXF forum

We are running default XenForo style customized by cXF
Registration is free!

Dismiss Notice
customizeXF uses cookies. By continuing to use this site, you are agreeing to our use of cookies.
Read more.

Info [cXF] Social Icons in Header

BassMan Sep 9, 2015

Thread Status:
Not open for further replies.
  1. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    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: Apr 27, 2016
    MR.MB and Spy like this.
  2. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    * 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
     
  3. /GriFFin

    /GriFFin New Member cXF Customer Validated XF User

    Joined:
    Sep 14, 2015
    Messages:
    1
    Likes Received:
    0
    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.
     
  4. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    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.
     
  5. Spy

    Spy New Member

    Joined:
    Sep 11, 2015
    Messages:
    1
    Likes Received:
    1
    Thank you.
     
    BassMan likes this.
  6. dannyefc

    dannyefc New Member cXF Customer Validated XF User

    Joined:
    Sep 18, 2015
    Messages:
    3
    Likes Received:
    2
    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 likes this.
  7. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    What's new in version 1.2.0:

    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
     
  8. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    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
     
  9. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    On PC there won't be a problem, but on mobile it automatically hides icons. Do you want icons to show on mobile too?
     
  10. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    I can see the icons on my phone in landscape mode on my phone from your site.
    Screenshot_2015-10-28-10-39-44.png
     
  11. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    Yes, depends on settings. So, you want to show icons on your forum in mobile view?
     
  12. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    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
     
  13. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    Possible, but I would be a problem when user log's in. I don't recommend it.

    Maybe some other location?
     
  14. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    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
     
  15. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    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 likes this.
  16. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    One more suggestion, you really need to add the Instagram icon. It's the #1 social media site among Teens/Young adults.
    social-media-study.jpg
     
    BassMan likes this.
  17. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    I see you're not using Linkedin icon, so you have one free slot. Just edit this in style properties:

    upload_2015-10-28_18-33-58.png

    Add Instagram url and for icon name put fa-instagram.
     
    actormike likes this.
  18. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    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
     
  19. BassMan

    BassMan Administrator Staff Member cXF Customer Validated XF User

    Joined:
    May 18, 2015
    Messages:
    504
    Likes Received:
    227
    Location:
    Slovenia, Europe
    I'll see what I can do. Currently can't find a way to add icons above logo to show all other elements right.
     
  20. actormike

    actormike Member cXF Customer Validated XF User

    Joined:
    Oct 28, 2015
    Messages:
    9
    Likes Received:
    1
    If you could have separate positioning settings for mobile, like you do the font size, that would help a lot.
     
Thread Status:
Not open for further replies.