http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts Support Forum - Topic: Tutorial: Use the same style header social icons for sharing individual posts en-US Wed, 22 May 2013 07:06:20 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-82116 Sat, 03 Nov 2012 18:52:13 +0000 Dude 82116@http://www.kriesi.at/support/ <p>Hi! </p> <p> Thanks alan_82 :) </p> <p> Best regards,<br /> Peter </p> http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-82105 Sat, 03 Nov 2012 17:15:19 +0000 alan_82 82105@http://www.kriesi.at/support/ <p>Hi BelleLurette &amp; Peter</p> <p>Thanks for letting me know the download expired, </p> <p>I've setup a new download link which is hosted on my site, so it wont go down again:<br /> <a href="http://www.designbyalan.co.uk/downloads/Social_Icons.zip" rel="nofollow">http://www.designbyalan.co.uk/downloads/Social_Icons.zip</a></p> <p>The finished result also be seen on one of my portfolio pages:<br /> <a href="http://www.designbyalan.co.uk/" rel="nofollow">http://www.designbyalan.co.uk/</a></p> <p>Regards</p> <p>Alan </p> http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-82102 Sat, 03 Nov 2012 16:47:22 +0000 Dude 82102@http://www.kriesi.at/support/ <p>Hey! </p> <p> I contacted alan_82 and asked him to reupload the files. </p> <p> Regards,<br /> Peter </p> http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-82091 Sat, 03 Nov 2012 13:54:15 +0000 BelleLurette 82091@http://www.kriesi.at/support/ <p>The Filesend download doesn't work anymore... </p> http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-64456 Mon, 09 Jul 2012 06:46:20 +0000 Dude 64456@http://www.kriesi.at/support/ <p>Hi! </p> <p> Great - thanks for sharing your tutorial :) </p> <p> Regards,<br /> Peter </p> http://www.kriesi.at/support/topic/tutorial-use-the-same-style-header-social-icons-for-sharing-individual-posts#post-64360 Sun, 08 Jul 2012 14:08:49 +0000 alan_82 64360@http://www.kriesi.at/support/ <p>Hi everyone,</p> <p>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.</p> <p>Ive posted a screenshot of the end result:<br /> <a href="http://s11.postimage.org/9uqwx0yab/social.png" rel="nofollow">http://s11.postimage.org/9uqwx0yab/social.png</a></p> <p>I thought some of you would like to do the same, so i've drafted a quick guide.</p> <p>Steps</p> <p>1. Download WP Socializer: <a href="http://wordpress.org/extend/plugins/wp-socializer/" rel="nofollow">http://wordpress.org/extend/plugins/wp-socializer/</a></p> <p>2. Install and activate the plugin</p> <p>3. Within plugin's admin screen, go to the manual customisation setting, then select social buttons</p> <p>4. Select the buttons you want to use, choosing the 32px size</p> <p>5. In settings at he bottom of the same window select:<br /> Image hover: none<br /> Use sprites: Yes</p> <p>(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).</p> <p>6. Now we are going to create/upload our icons.<br /> 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:<br /> <a href="http://www.filesend.net/download.php?f=ed4858bf4b7a1d238a105f2f6f3bea45" rel="nofollow">http://www.filesend.net/download.php?f=ed4858bf4b7a1d238a105f2f6f3bea45</a></p> <p>The icons are sprites stacked vertically (32px x 64px)</p> <p>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:<br /> wp-content/plugins/wp-socializer/public/social-icons/32/</p> <p>8. Now to edit a bit of PHP so we can add the sprite the rollover effect</p> <p>Edit this file:<br /> wp-content/plugins/wp-socializer/includes/wpsr-socialbuttons.php</p> <p>Find the note that says:<br /> <code>// Check whether sprites is enabled</code><br /> and replace the first paragraph with this</p> <pre><code>// Check whether sprites is enabled if($sprites == 1){ $socialbts_list .= &#39;&lt;a href=&quot;&#39; . $finalUrl . &#39;&quot; title=&quot;&#39; . $finalTitle . &#39;&quot;&#39; . $finalTarget . $finalNofollow . $params . &#39;&gt;&#39; . &#39;&lt;img src=&quot;&#39; . $spriteMaskImage . &#39;&quot; alt=&quot;&#39; . $finalName . &#39;&quot; style=&quot;width:&#39; . $pixel . &#39;; height:&#39; . $pixel . &#39;; background: transparent url(&#39; . $finalIcon . &#39;) no-repeat; background-position: bottom left; border:0;&quot;/&gt;&#39; . &quot;&lt;/a&gt;&quot; . $finalLabel ; }else{</code></pre> <p>9. Now to update the css<br /> Open, edit then reupload the following file:<br /> wp-content/plugins/wp-socializer/public/css/wp-socializer-buttons-css.css</p> <p>Rename this rule:<br /> <code>.wp-socializer img, .wp-socializer-single img{</code><br /> to<br /> <code>.wp-socializer-single img{</code></p> <p>Then add these new rules to the bottom of the css file<br /> <pre><code>.wp-socializer img { float: none; border: 1px #ECECEC solid !important; margin: 0px 0px 0px 0px !important; padding: 0px !important; max-width: none\9; /* IE max-width fix on v2.1 */ } .wp-socializer img:hover { background-position: top left !important; }</code></pre> <p>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.</p> <p>I can't provide support for this, but i hope it's useful for some of you </p>