Modifying Pinboard WordPress Theme’s Fancy Social Media Buttons

I really enjoy Pinboard as a WordPress theme because it has a cool way of featuring new posts, it has a lot of column options, and has some cool rollover-action social media buttons in the top right.  The only downside is that it comes setup with specific ones.  I wanted to add links to my Soundcloud, GitHub, and Bitbucket sites, but there isn’t a quick way to add custom ones.  Well, this post will receive some edits in the future, but a quick hack was to take some unused icons (in my case, pintrest and dribble) and modify them to have custom artwork.  I’m by no means an artist, so hopefully you have more talent to smooth them out.

So they start out like:

And I modified them to look like:

This was done by:

  1. Grab the file you want to override from wp-content/themes/pinboard/images (In my case I used dribble.png and dribble_2x.png)
  2. Opening the original x2 file in Paint.Net as a reference
  3. Open new icon in same Paint.Net program, but as a different project
  4. Try to use an area of interest of a square resolution, grabbing a circle will help with this, but the end resolution will be 64×64.
  5. Use the circle selection tool to grab the portion of the image you want and copy it to a new layer
  6. Delete original layer so it’s now a circle with transparent around it
  7. Use the magic wand tool to select the area you want to make transparent (in my example look at the cloud, or coffee cup, or ocat).  You may have to select everything else and use inverse selection.
  8. While selected, erase that section to make it transparent
  9. Now size to 64×64
  10. Change canvas size to 64×128 by adding an additional 64×64 above the original image
  11. Copy the original 64×64 square and paste into a new layer
  12. Move it to the top, making sure it’s aligned horizontally
  13. Use the magic wand to select the colored part of the icon in the top half
  14. Go to the original image and use the color selector to grab the near-transparent grey.
  15. Switch back to new icon, and while it’s still selected, use the eraser tool over the selected area.  Your top half will now be completely erased, but you’ll still have the colored portion highlighted.
  16. Use the paintfill tool to fill in with the gray transparent color
  17. Deselect and then smooth out the edges with the eraser
  18. Save over dribble_2x.png (or whatever)
  19. Resize to 32×64
  20. Save over dribble.png (or whatever)
  21. Overwrite file at wp-content/themes/pinboard/images
  22. Go to theme options and add your site under dribble
  23. You’re done!