- This topic has 3 replies, 2 voices, and was last updated 10 years, 7 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
Hi all, I created a widget using the Genesis (Nathan Rice) Simple Social Icons as a base.
Differences are that instead of using images for the icons I am using Foundations social icon font (http://www.zurb.com/playground/foundation-icons). Advantages are it will scale and look good no matter the resolution, retina screens and so on.
One of the less good things is that it does NOT work on IE7 and older.
I have adapted it to be uniform with the Genesis 1.9.1 standard theme. Font-sizes and paddings are set in REM with a PX fallback, all calculated with 16px as base.
To take a look at the Widget settings view take a look here: http://tor.raswill.se/files/2013/02/sw-settings.png
As you can see there are options for font-size and padding.
Font-size and padding can be set to: 1rem/16px, 1.5rem/24px, 2rem/32px, 3rem/48px, 4rem/64px
To see it in action go here: http://rgrid.rsldev.se/ (it's the one in the sidebar, you can ignore the one in the header, it's hard-coded).
I have added fields and CSS-classes (as well as colors) for the following social media sites/functions:
rss, facebook, twitter, linkedin, google-plus, pinterest, youtube, vimeo, tumblr, github, path, dribbble, stumble-upon, behance, reddit, flickr, slideshare, picassa, skype, steam, instagram, foursquare, delicious, digg, wordpress
If you would like to try it out, you can download it from here: https://www.dropbox.com/s/mx4uqca96qvknea/font-social-icons.zip
Any questions, suggestions for improvements and etc. are very welcome.
Oh and btw, just as the original widget if you do not add a URL to the social media the icon will not appear in the widget.
Hi, sorry for the late response. Please start by downloading the widget/plugin again. I have updated it with proper IE7 support and a few more settings.
Could you then place it and activate it and point me to where it should show up?
I have tested it both in the header and the footer on my showpage linked in the post and it does work.
I took a quick look again at your page, I can see the css-file in your <head> but can not find anything related to the widget?
© 2023 WPEngine, Inc.