Theme The Morning After

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="" 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=""><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip1.png" border="0" alt="Name Profile 1"/></a>
<a href=""><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip2.png" border="0" alt="Name Profile 2"/></a>
<a href=""><img src="<?php bloginfo('stylesheet_directory'); ?>/images/webclips/webclip3.png" border="0" alt="Name Profile 3"/></a>


The Morning After – mit Inhalten… Leider sehr klein…
  1. Your site just keeps getting better and better, nice work Nick.

  2. Very nice guide. I’ll definitely have this a try!

  3. @Andrew: Thanks! It’s a trial and error process..
    @Arthur: Glad, I could help.

  4. Whew… just now getting around to doing this! Thanks for the tutorials! I can’t wait to see what you do next!

  5. Hi, nice tutorial. I have tried it and I have problem about my web badges in the footer. It seems that there is invisible copy of badge appeared below each of them. I noticed that because spaces between web badges and bottom of footer is quite large. The title of the invisible badges also appeared when the cursor is rolled-over them. But that doesn’t happen in your web. Do you have any solution? Thanks in advance.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.