In this post I will give you all the technical details to create a corner banner for the wordpress K2 theme. This solution is uninstrusive as it can be bundled with a K2 style without modifying the K2 core theme.

We will use the new hooks from the brand new K2 1.0RC6. So first, we have to create a functions.php file in our style directory (example: /wp-content/themes/k2/styles/my-style). Then add the following PHP code in it:

<?php

// Add HTML code required by our corner banner
function add_corner_banner() {
  ?>
  <a id="cornerbanner" href="http://coolcavemen.com/news/new-website-beta-released/" title="New website released as beta version !"></a>
  <?php
}

// Call add_corner_banner() method on each template_body_top hook
add_action(‘template_body_top’, ‘add_corner_banner’);

?>

This code tell K2 to replace the template_body_top hook define in all K2 pages, by the result of the add_corner_banner() PHP function. This function is coded to return the HTML code we need for the corner banner.

Then we need to add the following CSS code to our style (/wp-content/themes/k2/styles/my-style/my-style.css):

#cornerbanner {
  background: url("/wp-content/themes/k2/styles/my-style/corner-banner.png") no-repeat;
  display: block;
  height: 205px;
  width: 205px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  text-decoration: none;
}

This CSS code refer to the corner-banner.png which is a 205×205 px PNG image with an alpha channel to simulate shadows and fine transparency. Here is the Gimp xcf source file I used to generate it.

This CSS code is designed for a top right banner. If you need a top left banner, replace:

  right: 0;

by

  left: 0;

This also work for horizontal positioning:

  top: 0;

can be replaced by

  bottom: 0;

That’s all ! My solution is not supposed to work (and was not tested) with Internet Explorer as the latter is known to have terrible PNG transparency support. You can still apply fixes on my code using iepngfix, jquery or PNG8 images.

I’ve provided you with all the technical details to create a corner banner and add it to your K2 style seamlessly. It’s now up to you to adapt it to your needs. Be Creative ! Oh, and by the way, when you’ll change the banner PNG file, do not forget to update the CSS code with your image width and height.

Update: my friend QPX sent me an alternative banner made with photoshop: here is the ready-to-use PNG file and the photoshop source file.

It also include some CSS backports from K2 v0.9.6, especially the CSS trick that automaticcaly resize your big images to fit the weight of the central theme column.

Sapphire 0.3 is now compatible with K2 sidebars, which mean that the header and footer of the theme will be expanded or reduced according to the number of sidebars. To achieve this flexibility, I had to redo all images included in the original Sapphire theme. All Inkscape and Gimp source files can be found in the “sources” folder of the Sapphire v0.3 zip file. This total rework also mean that I no longer use any file or code from the legacy sapphire theme.

I’ve just release a new version of my Sapphire adaptation for K2 theme. This second release not only fix margins regarding the main layout, but also styles of blockquotes and lists (to render them consistently in comments).

Here is a direct download link to this v0.2.

Yesterday I’ve build a new K2 style based on the legacy Sapphire 1.0 WordPress theme by Michael Martine. This is the result of my love to the blue bend of Sapphire and the versatility of K2.

As you can see in the footer of that blog, I’m using my Sapphire 0.1 style right now. So if you like the look and feel of that blog, don’t ask yourself and download Sapphire 0.1 for for K2 !

To install it, unzip the archive to your /wp-content/themes/k2/styles/ folder.