The Morning After – Web Badges, anyone?

There are a lot of weblogs using a customised version of The Morning After theme by Arun Kale now. And it is quite nice to see that some customisations are inspired by my tutorials. Thanks! Unfortunately, I saw examples where the blogger had problems to display some icons and/or web badges. Time to change that…

How to add a web badge to the footer.php template?

A web badge is a small image used on websites to promote web standards, products used in the creation of a web page, or to indicate a specific content license that is applied to the content or design of a website. These badges are usually displayed in the footer of a web page.

• Upload the web badge to to the wp-content/themes/tma/images/bg/ folder. Please ensure that the width of your image for the latest post doesn’t exceed 20 pixels.
• Now, go to the WP Dashboad > Design > Theme Editor and open the footer.php.
• Add the link to the push-0 div class and click on Update File.
• EXAMPLE: Download this web badge (right click – save target as) and upload it to wp-content/themes/tma/images/bg/. Then you open the footer.php in your Theme editor and add the following link:

<a href="http://www.nickbohle.de/tag/the-morning-after/" title="Customisations for The Morning After"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg/nick.png" alt="Theme by The Masterplan" /></a>

How to add a web profile icons?

Nowadays, web badges are also used in terms of a web profile icon which shows the blogger’s affiliation to a certain (social) network or community. Until this weekend, I have used old, self-made web badges (80x15px) for the presentation of my different online profiles. Unfortunately, this style was not consistent with the squarish design of my site. But this weekend, I found the solution in quadratic web clips (57x57px) that are made for the iphone and the ipod touch. So, I have downloaded the relevant web clips, removed the rounded corners, resized the icons to 48x48px and uploaded them to my wp-content/themes/tma/images/webclips folder. (NOTE! Feel free to steel them from my starting page.) Then, I created a special area for this web badges in the middle column of my home.php template. A tutorial:

• Upload your web clips to wp-content/themes/tma/images/webclips folder. I suggest the same size (48x48px) and style (square, no rounded corners) for the web profile icons as for the recent post thumbs.
• Open your style.css in your WP Theme Editor and add the following code above /* category list */

/* webclips */

#home_webclips { background: #999999; margin: 0 0 1.1em 0; float: left; width: 100%; }
.webclips_content { padding: 0 0.7em 0.4em 0.7em; color: #FFF; }
.webclips_content img { padding: 0; margin: 0.2em 0.6em 0.5em 0; border: 1px solid #000066; }

• Now, open your home.php in your WP Theme Editor and add the links to your web profiles between php endwhile and php include(‚ad_home.php‘) with the following code:

<div id="home_webclips">
<h3 class="mast">Web Clips</h3>
<div class="webclips_content">
<a href="http://yourprofile1.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip1.png" border="0" alt="Name Profile 1"/></a>
<a href="http://yourprofile2.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip2.png" border="0" alt="Name Profile 2"/></a>
<a href="http://yourprofile3.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip3.png" border="0" alt="Name Profile 3"/></a>
</div></div>

Done.