Welcome to PressWork!

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

In this Discussion

Can the Social icons be moved from the Header?
  • Hi again! Still loving PressWork! :D

    Is there a way to move the Social icons from the Header area and have them appear elsewhere, say, in the Widgetized area, Primary Nav Menu, Sidebar, etc?

    Edit: I should specify, it's the Header Logo that my Social icons show up in. What is the main differences between Header Image and Header Logo? Are they just two areas I can interchange images between?

    Basically I want to display a large image at top of my blog (roughly 460 pixels in height), in either the Header Logo or Header Image area. I seem to only be able to place an image in the Header Logo area, and nothing is showing up for Header Image... Why is this?

    Laters!

    -dg
    Post edited by crazyregcomics at 2011-10-25 05:57:34
  • cestbibicestbibi
    This answer was Accepted.

    What is the main differences between Header Image and Header Logo? Are they just two areas I can interchange images between?



    Basically header image is managed through your Dashboard --> Appearance --> Header and it is not clickable/linkable as it is, whereas Header Logo is managed through Presswork Toolbox and is clickable.

    To be able to see your Header Image you have to activate it in the Toolbox : Layout --> Header --> Add Header Image and then upload your header image through the Wordpress Dashboard as indicated above.

    Is there a way to move the Social icons from the Header area and have them appear elsewhere, say, in the Widgetized area, Primary Nav Menu, Sidebar, etc?



    I did myself did this on my site with a "dirty hack" but it involves using custom-actions and custom css http://presswork.me/2011/custom-css-and-custom-actions/ I don't know if you feel confortable with this, you tell me if you are interested because it involves a few lines of code. I don't know if there's a simpler way of doing it ?



    image PressWork Support Moderator
  • Hey cestbibi, thank for the quick reply!

    I may try using both the Header Logo and the Header Image, but do I have control over how far apart they are? For example, can I have them totally flush with no gap between them?

    Regarding moving the Social icons and being comfortable tweaking the code / CSS, I'm interested! I haven't modified any of the WordPress / PressWork code as yet, but I'm keen to give it a go!
    Post edited by crazyregcomics at 2011-10-25 07:19:50
  • cestbibicestbibi
    This answer was Accepted.
    You can reduce the gap by putting this in your custom css
    #header_logo {margin-top: 0;}


    This is an exemple of code to move the social icons. You need to put it in your custom-actions.php file between php tags.
    remove_action('pw_header_top', 'pw_social_content');
     
    function my_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="aside-social-icons" class="side-widget">';
    echo '<h4>En las redes sociales</h4>';
    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>';
    }
    add_action('pw_sidebar_top', 'my_pw_social_content');


    This will put the social icons on the top part of your sidebar. You can change 'pw_sidebar_top' (at the end of the function) with some other hook that suits you better (for exemple 'pw_index_top')

    Finally for this hack to work you need to add the following to your custom.css file
    /* Social Icons */
    #aside-social-icons {position: relative;}
    #aside-social-icons a {width: 32px;height: 32px;display: block;background: url(images/sprite.png) no-repeat -70px -25px;float: left;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;}


    Hope it helps
    image PressWork Support Moderator
  • Oh awesome, thanks so much!

    Oh wait, I need Brief Case for this right? Or do I need Brief Case JUST for the reduced gap between the Header Image and Header Logo areas?
    Post edited by crazyregcomics at 2011-10-26 04:56:26
  • cestbibicestbibi
    This answer was Accepted.
    It's easier with BriefCase but you can do it without. See how :
    http://presswork.me/2011/custom-css-and-custom-actions/
    image PressWork Support Moderator
  • Hmmm, I can't seem to get it going, so I think I'll spend the $20 for a good cause. :D
  • Sorry to be a pain again, but where is the custom-actions.php file located? I'm at work now and don't have access to FTP, only a feeble web based interface.

    Edit: I've found it, I have to make it myself and it goes in the uploads directory. :)

    Edit: Ok, I got it SORT of working... Where the Social icons ought to appear, which I've set to 'pw_body_top', a line of text is showing instead of the icons: "En las redes sociales"

    A lil weird!

    Also, this text is showing left alligned. To set it right alligned, would I just need to change the line of code in my custom.css that shows:

    #aside-social-icons a {width: 32px;height: 32px;display: block;background: url(images/sprite.png) no-repeat -70px -25px;float: left;margin-right: 3px;opacity: 0.7;}

    To:

    #aside-social-icons a {width: 32px;height: 32px;display: block;background: url(images/sprite.png) no-repeat -70px -25px;float: right;margin-right: 3px;opacity: 0.7;}

    Any ideas?

    Sorry about the code, I don't know how to display it like you've done.
    Post edited by crazyregcomics at 2011-10-26 19:58:05
  • Sorry about that ! I forgot to remove
    echo '<h4>En las redes sociales</h4>';
    on line 12. You can remove it safely or change the text to suit your needs.

    There's something else you have to change in your css, since you are working with the Uploads directory (my example of code is for a Child Theme).

    You need to set this path in your css for the sprite image to appear:
    #aside-social-icons  a {width: 32px;height: 32px;display: block;background: url(../themes/presswork/admin/images/sprite.png) no-repeat -70px -25px;float: right;margin-right: 3px;opacity: 0.7;}

    As you see I've also included the float: right;
    It should work now.

    image PressWork Support Moderator
  • Hey again cestbibi. No worries!

    Hmmm, it's still showing up on the left, and the icons themselves are not showing, only the text, which I've temporarily changed to "Get Social!"

    Odd!
  • For the text to be aligned you have to set
    #aside-social-icons h4 {float: right;}


    Did you set your social accounts in the Toolbox already ?
    image PressWork Support Moderator
  • Hey again. :) I've replaced the new line of code you sent with the one you sent before that, and it doesn't appear to have changed anything. The alignment doesn't bother me too much I guess, cos I think ultimately I will remove the text. The icons are not showing though and that's more important to me.

    Yes, I did have the Twitter and Facebook usernames set in the Toolbox before I did the code. I have tried removing them from the Toolbox and re-entering them, but it hasn't helped. I will try removing them from the Toolbox again, then removing the custom-actions.php file, and deactivating the custom.css file, and then re-enable all that in the opposite order (custom.css, custom-actions.php, then Toolbox).

    If that fails, I will try reseting the Toolbox.

    Edit: Just tried all that (even resetting Toolbox) and it's still not showing the icons. :(
    Post edited by crazyregcomics at 2011-10-27 17:53:49
  • Could you provide a link to the site ?
    image PressWork Support Moderator
  • Sure, do you mind if I PM it to you though, as currently the site hasn't launched yet and I've set a lot of it to private for now.

    Edit: PM sent! :)
    Post edited by crazyregcomics at 2011-10-27 19:03:35
  • cestbibicestbibi
    This answer was Accepted.
    That's why I love helping in the Forum, because - I am - learning everyday more and more about PressWork :)

    SO since you are using BriefCase to alter css the path to the icon has to be:
    #aside-social-icons  a {width: 32px;height: 32px;display: block;background: url(../wp-content/themes/presswork/admin/images/sprite.png) no-repeat -70px -25px;float: right;margin-right: 3px;opacity: 0.7;}


    Mind you there's a typo in your css so the icons are not displaying ok:

    replace float: 3px; with float: right;margin-right: 3px;
    This should be it
    image PressWork Support Moderator
  • WOOHOO! It works! Thanks so much! :D