StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

A social media widget based on foundation font

Welcome!

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.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › A social media widget based on foundation font

This topic is: not resolved

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 7, 2013 at 3:46 am #18606
    kosmiq
    Member

    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.

    February 8, 2013 at 5:27 pm #19113
    jay.gardner
    Member
    This reply has been marked as private.
    February 11, 2013 at 3:42 am #19558
    kosmiq
    Member

    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?

    Edit:

    I have tested it both in the header and the footer on my showpage linked in the post and it does work.

    February 11, 2013 at 3:50 am #19559
    kosmiq
    Member

    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?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.