Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14069

    Hi everyone,

    I spent today sorting out the social links on my posts today, and managed to replicate the same look and rollover effects that are used on the header social links.

    Ive posted a screenshot of the end result:

    http://s11.postimage.org/9uqwx0yab/social.png

    I thought some of you would like to do the same, so i’ve drafted a quick guide.

    Steps

    1. Download WP Socializer: http://wordpress.org/extend/plugins/wp-socializer/

    2. Install and activate the plugin

    3. Within plugin’s admin screen, go to the manual customisation setting, then select social buttons

    4. Select the buttons you want to use, choosing the 32px size

    5. In settings at he bottom of the same window select:

    Image hover: none

    Use sprites: Yes

    (At this point you may want to setup other bits, like choosing pages they appear on etc, until you are happy, and you just want to change the appearance).

    6. Now we are going to create/upload our icons.

    I’ve uploaded the icons for facebook, twitter, pinterest, google plus and email, including a fireworks template so others can be made. The file can be downloaded here:

    http://www.filesend.net/download.php?f=ed4858bf4b7a1d238a105f2f6f3bea45

    The icons are sprites stacked vertically (32px x 64px)

    7. Now we have our icons, we need to overwrite the default ones, so using an FTP client overwrite the default icons saved in here:

    wp-content/plugins/wp-socializer/public/social-icons/32/

    8. Now to edit a bit of PHP so we can add the sprite the rollover effect

    Edit this file:

    wp-content/plugins/wp-socializer/includes/wpsr-socialbuttons.php

    Find the note that says:

    // Check whether sprites is enabled

    and replace the first paragraph with this

    // Check whether sprites is enabled
    if($sprites == 1){
    $socialbts_list .=
    '<a href="' . $finalUrl . '" title="' . $finalTitle . '"' . $finalTarget . $finalNofollow . $params . '>' .
    '<img src="' . $spriteMaskImage . '" alt="' . $finalName . '" style="width:' . $pixel . '; height:' . $pixel . '; background: transparent url(' . $finalIcon . ') no-repeat; background-position: bottom left; border:0;"/>' .
    "</a>" . $finalLabel ;
    }else{

    9. Now to update the css

    Open, edit then reupload the following file:

    wp-content/plugins/wp-socializer/public/css/wp-socializer-buttons-css.css

    Rename this rule:

    .wp-socializer img, .wp-socializer-single img{

    to

    .wp-socializer-single img{

    Then add these new rules to the bottom of the css file

    .wp-socializer img {
    float: none;
    border: 1px #ECECEC solid !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px !important;

    max-width: none9; /* IE max-width fix on v2.1 */
    }

    .wp-socializer img:hover {
    background-position: top left !important;
    }

    10. The hard work is done, so test the appearance, and tweak as needed, i recommend using the firefox firebug plugin to iron out any css issues.

    I can’t provide support for this, but i hope it’s useful for some of you

    #81976

    Hi!

    Great – thanks for sharing your tutorial :)

    Regards,

    Peter

    #81977

    The Filesend download doesn’t work anymore…

    #81978

    Hey!

    I contacted alan_82 and asked him to reupload the files.

    Regards,

    Peter

    #81979

    Hi BelleLurette & Peter

    Thanks for letting me know the download expired,

    I’ve setup a new download link which is hosted on my site, so it wont go down again:

    http://www.designbyalan.co.uk/downloads/Social_Icons.zip

    The finished result also be seen on one of my portfolio pages:

    http://www.designbyalan.co.uk/

    Regards

    Alan

    #81980

    Hi!

    Thanks alan_82 :)

    Best regards,

    Peter

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Tutorial: Use the same style header social icons for sharing individual posts’ is closed to new replies.