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

leftquark

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.

Lille Ulven

So your usage of flex boxes is the reason why my social icons suddenly fit in one line
Flex boxes are fun
Love it - especially that I do no longer need to use my "adapted...cannot remember probably youtube" icon for 500x, that's cool news

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

leftquark

Lille Ulven wrote: »

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.

Lille Ulven

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 )

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

Lille Ulven

The promised screenshots.
This is how it is supposed to look like (when flex-wrap:wrap is used):


This is how it looks if the flex-wrap:wrap is missing from .sm-flex-row

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

leftquark

should be fixed from our end now!

Lille Ulven

Thanks, leftquark. I shall test it tomorrow (Thursday June 9th) and will let you know about the results then.

Lille Ulven

Works perfectly now - thank you!

Lille Ulven

dberthia

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.

leftquark

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.

Lille Ulven

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 )

dberthia

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.

leftquark

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.

dberthia

Super- thanks!

Lille Ulven

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

leftquark

Lille Ulven wrote: »

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.

Lille Ulven

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

max:P

Linkedin?
Just out of curiosity, Why did you guys remove LinkedIn?

Many thanks
Max

leftquark

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.