Welcome to PressWork!

Want to ask a question or join the discussion? Great! Join now.

In this Discussion

Social Media Icon Sizes
  • The social media icons in InstaPress appear very small is there any way to make them bigger?

    Can I recommend this for a future release.

    Thanks in advance for any support offered.
  • The smaller icons are the new default, though the larger ones are still there. You need to remove the "small" with a Custom Action:
    function custom_pw_social_content() {
    $twitter = pw_theme_option('twitter');
    $facebook = pw_theme_option('facebook');
    $flickr = pw_theme_option('flickr');
    $linkedin = pw_theme_option('linkedin');
    $googleplus = pw_theme_option('googleplus');
    $stumbleupon = pw_theme_option('stumbleupon');
     
    echo '<div id="social-icons">';
    if(!empty($twitter))
    echo '<a href="http://twitter.com/'.$twitter.'" class="twitter-icon"></a>';
    if(!empty($facebook))
    echo '<a href="http://facebook.com/'.$facebook.'" class="facebook-icon"></a>';
    if(!empty($flickr))
    echo '<a href="http://www.flickr.com/photos/'.$flickr.'" class="flickr-icon"></a>';
    if(!empty($googleplus))
    echo '<a href="https://plus.google.com/'.$googleplus.'" class="googleplus-icon"></a>';
    if(!empty($linkedin))
    echo '<a href="http://www.linkedin.com/in/'.$linkedin.'" class="linkedin-icon"></a>';
    if(!empty($stumbleupon))
    echo '<a href="http://www.stumbleupon.com/stumbler/'.$stumbleupon.'" class="stumbleupon-icon"></a>';
    echo '</div>';
    }
    remove_action('pw_header_middle', 'pw_social_content');
    add_action('pw_header_middle', 'custom_pw_social_content');
    Post edited by cbavota at 2012-03-27 15:22:10
    image Senior Developer & Co-Founder of PressWork
  • Has this worked for anyone else? I cannot seem to get it working. I have other code in my BriefCase related to my Social Icons, so I wonder if they could be clashing... The other code I have moves the old (PW 1.0.3) Social Icons to the top of the Side Bar. Here it is:

    /* Social Icons move to Sidebar */
    #aside-social-icons {position: relative;}
    #aside-social-icons h4 {float: right;}
    #aside-social-icons a {width: 32px;height: 32px;display: block;background: url(http://crazyregcomics.com/wp-content/themes/presswork/admin/images/sprite.png) no-repeat -70px -25px;float: right;margin-right: 3px;opacity: 0.7;}
    #aside-social-icons a:hover {opacity: 1;}
    #aside-social-icons a.facebook-icon {background-position: -104px -25px;}
    #aside-social-icons a.flickr-icon {background-position: -138px -25px;}
    #aside-social-icons a.linkedin-icon {background-position: -172px -25px;}
    #aside-social-icons a.googleplus-icon {background-position: -104px -59px;}
    #aside-social-icons a.stumbleupon-icon {background-position: -70px -59px;}


    If my above code isn't conflicting with the code to remove the small Social Icons, is it possible the code is incorrect? I noticed the second last line in cbavota's post above...

    remove_action('pw_header_middle', 'pw_social_content');


    ...uses 'pw_header_middle', but when I turn Functions on in my PW toolbar, it looks like the small Social Icons are in 'pw_header_content'

    Is this correct?

    I've had to put my site back to WP 3.2 and PW 1.0.3 due to another problem (will post separately about it), but I'm still hoping someone can give me some input on this. :)

    Thanks in advance!
    Post edited by crazyregcomics at 2012-04-02 07:36:26
  • There is a jQuery function in 1.0.3 that locks the social icons to a different section of the header so you will probably have to change the code from above to header_content. Try that and let me know.
    image Senior Developer & Co-Founder of PressWork
  • I think I tried using 'pw_header_content' last night, but it didn't seem to help... Is that right though?

    Please confirm and I will try again tonight, then post my findings. :)
  • I cannot seem to get it to work, but it's not a big deal, as I've discovered on mobile devices the old Social Icons I was using (in the Side Bar) were showing up way down on the page, and the new smaller ones stay right up the top, so I think I like that better. So I'm gonna remove my old ones and keep the new small ones. :)

    HOWEVER, there is one small hitch... Is it just me or do the smaller Social Icons seem a little hard to click on? The entire image doesn't seem clickable...

    See here: http://crazyregcomics.com/
  • That's because your menu overlaps them. You need to increase the z-index for the social icons so they appear on top.
    image Senior Developer & Co-Founder of PressWork
  • Ahhh, so I've done this by moving my menu to the very top "layer" using this code you gave me...

    nav { z-index: 1000; }


    (from this thread: http://support.presswork.me/discussion/571/why-is-primary-nav-layered-under-header-logo)

    Correct me if I'm wrong, but you are saying I need to make the Social Icons have a higher "layer" value than 1000, which the menu has, right?

    I tried this, but didn't work...

    pw_body_top { z-index: 1001; }


    I think I am way out of my league! :P

    Where can I find the "label" for the Social Icons that I can use in that line of code? "pw_body_top" didn't work (I'm not really surprised!). :P Or does it not work this way?
  • cbavotacbavota
    This answer was Accepted.
    You need to select either a class or ID to use CSS. The ID is #social-icons.
    #social-icons { z-index: 1001; }
    image Senior Developer & Co-Founder of PressWork
  • Thank you so much! :)