Clean Square Web 2.0 IM Icons + More

I made these 20x20 icons for the postbit on my forums because I wanted a cleaner look. I figured I'd share for those interested.

The IM ones that go with vbulletin (ICQ, AIM, MSN, Skype, Yahoo) are already standardized to the vbulletin naming system (im_name.gif), so you can just replace them without changing any code. They are in the images/misc folder.

I went ahead and included the PSD and other ones I've created for my forums if you want to manually add them in your postbit.

In addition to the IM ones, I've included:

• Pinterest
• Tumblr
• Twitter
• Youtube
• Facebook
• Instagram
• Redditt
• Twitch
• User Website (www)

Screenshot of some of them:




I'm going to go ahead and include the code I used to add the extras into my postbit. This will add links to each image based on their fields in their user profile and open them in a different tab. (Make sure to set up the fields in your User Profile Field Options.)

Edit Templates - Postbit or Postbit_Legacy (depending on which you use).

Find where you have your IM links and add the additional fields after. (You need to set them up in the User Fields section and make adjustments accordingly. Your field numbers will be different based on your panel. I won't be able to keep up with any questions - this is just a starting point for those that can work through it themselves based on what I've provided.

If the code isn't working -- verify that the image paths aren't different on your theme and that you're using the correct field number based on what you have set up in your User Profile Field Manager.

				<div class="imlinks">
					{vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon}

<vb:if condition="$post['field14']"><a href="http://www.twitter.com/{vb:raw post.field14}" title="Twitter" target="_blank"> 
<img src="images/misc/twitterlittle.png" border="0"></a></vb:if>

<vb:if condition="$post['field12']"><a href="http://www.youtube.com/{vb:raw post.field12}" title="Youtube" target="_blank">
<img src="images/misc/youtubelittle.png" border="0"></a> </vb:if>
 
<vb:if condition="$post['field13']"><a href="http://www.twitch.tv/{vb:raw post.field13}" title="Twitch TV" target="_blank">
<img src="images/misc/twitchlittle.png" border="0"></a></vb:if>

<vb:if condition="$post['homepage']"><a href="{vb:raw post.homepage}" title="Website" target="_blank">
<img src="images/misc/wwwlittle.png" border="0"></a></vb:if>

<vb:if condition="$post['field29']"><a href="http://www.instagram.com/{vb:raw post.field29}" title="Instagram" target="_blank">
<img src="images/misc/instagramlittle.png" border="0"></a></vb:if>

<vb:if condition="$post['field18']"><a href="http://www.tumblr.com/{vb:raw post.field18}" title="Tumblr" target="_blank">
<img src="images/misc/tumblrlittle.png" border="0"></a></vb:if>


<vb:if condition="$post['field30']"><a href="http://www.pinterest.com/{vb:raw post.field30}" title="Pinterest" target="_blank">
<img src="images/misc/pinterestlittle.png" border="0"></a></vb:if>

<vb:if condition="$post['field31']"><a href="http://www.reddit.com/user/{vb:raw post.field31}" title="Redditt" target="_blank">
<img src="images/misc/reddittlittle.png" border="0"></a></vb:if>

				</div>

[fnrtop]

now that I bought the Metro style its time to use these !! thank you so much !

[vladig]

Could you please tell me what font you used in ".com"

[tr1t0n]

I believe it is the Bebas Neue from dafont.com.

http://www.dafont.com/bebas-neue.font

[CouponWCents]

No Facebook?

[tr1t0n]

There is a Facebook icon in the pack (it's in the bulleted list of included). I just don't have it in our profiles on our site.

[SpikeyWelsh]

thank you for your hard work they look amazing