UPDATED: Social Icon Content Block (500px, Email, LinkedIn)

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
edited November 10, 2016 in SmugMug Product News
All, we've released an update to the Social Icons block with the following changes:
- Remove LinkedIn
- Add 500px.com
- Add “Email” icon

Email allows you to have a way, besides using the “Menu” Content Block, to let visitors safely email you. We'll never expose your email address - it'll be hidden behind our contact form. Clicking “Email” will open the contact form. You'll have to have your “Contact Email” set in your Profile for this to work. If theyyoudo not have a verified Contact Email, we’ll display a warning message when you try to turn the “Email” icon ON.

Also of note, we’ve redone the “behind the scenes” to this content block so some your CSS tweaks may need updating (for the most part, the Social Icons CB's I've looked at, still work as they had). We’ve made it a lot smarter (using “Flexbox”) so re-arranging icons is now much easier. Please feel free to ask questions here if you need any help with CSS.
dGrin Afficionado
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations

Comments

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 5, 2016
    So your usage of flex boxes is the reason why my social icons suddenly fit in one line :D
    Flex boxes are fun :D
    Love it :) - especially that I do no longer need to use my "adapted...cannot remember probably youtube" icon for 500x, that's cool news :D

    Just one minor thing: it does not quite work in Chrome version 50.0.2661.102 (64-bit) or Firefox version 46.0.1 (cutting off the first of 7 icons and moving the last from the menu block into the content block). It might not be working in IE either because the surrounding div lacks a specific width parameter (% would do the trick).
    If you could add a flex-wrap: wrap; to the .sm-flex-row class it would do the trick :) - I can only check IE with some tricks right now, but will confirm tomorrow (June 6th somewhen around 1700 CET +2) :)

    For those who want to do a manual fix adding the line feed add this to your Entire Page CSS - that should fix FF and Chrome:
    .sm-flex-row{
      flex-wrap: wrap !important;
    }
    

    Thanks a lot.

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 6, 2016
    Just one minor thing: it does not quite work in Chrome version 50.0.2661.102 (64-bit) or Firefox version 46.0.1 (cutting off the first of 7 icons and moving the last from the menu block into the content block). It might not be working in IE either because the surrounding div lacks a specific width parameter (% would do the trick).
    If you could add a flex-wrap: wrap; to the .sm-flex-row class it would do the trick :)

    Sorry Lille, I'm not sure if I followed. What isn't working properly? If there's a small bug, I'd love to get it fixed - just wasn't sure what wasn't working.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 6, 2016
    Sorry, I'll try to explain it better :)

    For Chrome and Firefox (not sure what IE does prior to this fix) on a Mac El Capitan:
    If you do not add the flex-wrap:wrap to the .sm-flex-row CSS all social icons will be put into one single line. If - as for my site - you use a rather slim menu on the left side and you have a few social icons (I have 7) this means that the first icon is moved out of the screen to the left and the last one is moved out of the "menubox" into the body part of the site.
    Adding the flex-wrap:wrap to .sm-flex-row ensure that if the "line" is not wide enough to take on all social icons there will be a line feed and the social icons will be splitt into two or more lines. (Like they are right now on my site, as I added the CSS manually :D)

    In Safari this works even without the flex-wrap, as Safari manages to squeeze the icons a little closer together so that they still fit into one line...of course if you used all possible social icons this still might mess up, but for my 7 it worked well.

    Hope this helps to understand what I am talking about. I can provide screen shots tonight, for prior-my-fix and post-my-fix.

    Best regards

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 6, 2016
    The promised screenshots.
    This is how it is supposed to look like (when flex-wrap:wrap is used):
    i-4Vq96gB-XL.png

    This is how it looks if the flex-wrap:wrap is missing from .sm-flex-row
    i-hQBGbfQ-XL.png
    You can see the fb-icon is missing and the email icon is moved into the page-body rather than the menu-bar.

    Hope this helps to understand why flex-wrap:wrap is necessary here :)

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 8, 2016
    should be fixed from our end now!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 8, 2016
    Thanks, leftquark. I shall test it tomorrow (Thursday June 9th) and will let you know about the results then.
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 9, 2016
    Works perfectly now - thank you!

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • dberthiadberthia Registered Users Posts: 117 Major grins
    edited June 12, 2016
    Will Email be available as one of the social icons in the "Profile" section? Seems inconsistent for it to be available in one place, but not in another.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 12, 2016
    dberthia wrote: »
    Will Email be available as one of the social icons in the "Profile" section? Seems inconsistent for it to be available in one place, but not in another.

    Would you like it to be there? Certainly could add it! And I agree, I prefer to keep the site consistent.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 13, 2016
    Cannot answer for dberthia, but yea that would make a lot of sense having the email link in the cover of the about-page :) (and what makes sense is nice to have :D)
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • dberthiadberthia Registered Users Posts: 117 Major grins
    edited June 13, 2016
    leftquark wrote: »
    Would you like it to be there? Certainly could add it! And I agree, I prefer to keep the site consistent.

    I absolutely would like it there. I would think that all of the available social options should be available in the profile.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 13, 2016
    Sounds good. It'll be a separate switch in the Content Block settings to enable it, since setting the contact email address is in a separate place from setting your social icons and you can set the contact email separate from whether or not you want it displayed.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • dberthiadberthia Registered Users Posts: 117 Major grins
    edited June 14, 2016
    Super- thanks!
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 14, 2016
    That solution sounds great @leftquark :)

    By the way is there a way to add a background-color to these icons that has the same size as the icon itself? If I just add background-color: white; in CSS to the icon-CSS it will be a bit too large, but I would like a white background, to enhance the contrast between the round shape and the icons sign (say the "f" within the Facebook circle should get white, but not the circle or an area outside the circle as well). This would at least for my website increase readability of these icons - mine are partly hard to decipher, in my opinion.

    Thank you

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 14, 2016
    is there a way to add a background-color to these icons that has the same size as the icon itself? If I just add background-color: white; in CSS to the icon-CSS it will be a bit too large, but I would like a white background, to enhance the contrast between the round shape and the icons sign (say the "f" within the Facebook circle should get white, but not the circle or an area outside the circle as well). This would at least for my website increase readability of these icons - mine are partly hard to decipher, in my opinion.

    As of now, unfortunately not, due to the way that we've created those icons. In the future, as we move towards using a new format for the icons, it may be (though again, I'm not sure it will be) since the icons have some amount of border built into them and would also change color.

    You may be able to create a keyframe on the background that would leave the border portion transparent while adding color to the portion that's the icon. This might even work for the current implementation. Unfortunately I'm not yet a master on keyframes to offer you specific code.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 15, 2016
    Thank you leftquark - at least I have a keyword on what to look for, so we'll see if I can figure out the rest myself :D
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • max:Pmax:P Registered Users Posts: 35 Big grins
    edited November 10, 2016
    Linkedin?
    Just out of curiosity, Why did you guys remove LinkedIn?

    Many thanks
    Max
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 10, 2016
    max:P wrote: »
    Just out of curiosity, Why did you guys remove LinkedIn?
    We wanted to avoid a massive list of Social Networks that people had to scroll forever through and looked at the usage of each of the Social Networks (especially since we were going to add 500px and the Email icon option). Linked In usage was extremely low and made the tough call to drop a network that our customers were telling us they didn't need as an option. Worst case, they can add Linked In back in by using the "Custom URL" option.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.