Tag Archives: CSS

Cool Cavemen WebDesign Retrospective

Posted on by
1

Here is a collection of all themes I created for the Cool Cavemen website over the years.

Before settling on its current name, the Cool Cavemen project was referred to by its members as The Ultimate Band (talk about rock-star egos…). Here is a screenshot of the theme I did for e107:

In fact the original HTML mockup this theme is based on still exists. It is dated back to November 1st, 2004, which is now the official Cool Cavemen anniversary. The theme above was created two weeks later.

When I created the Cool Cavemen’s site, I choose e107. Back then I perceived it to be the only Open Source PHP-based CMS having the best balance between a clean and a powerful theme engine. That was my opinion before decided to switch to WordPress.

At the end of November ’04, our theme was updated to this:

The header above is based on a photo of a green laser, that was taken by Cool Cavemen’s guitarist.

2005 started with an updated version of the theme, featuring a photo of Cool Cavemen’s first gig. They were only three on stage, our bass player was still drumming at the time:

In February we finally had our official photo featuring all members of the band ! But it was cold outside so we added some fur to keep our website warm:

I spent the next months trying to build my own version of the Holy Grail: a perfect CSS-based 3-columns fluid layout (with a middle column placed in the top of the HTML). This explain Eric Mayer‘s quote in these mockups and the references to the Skidoo Too template:

I never found the Holy Grail, and the tests above remained unseen by the public. Tired by this journey, I never touched the theme again.

Until September 2005 when I updated it to this:

Notice the box in the top of the right column, which was designed to publish a new track every week. The code behind this box is available in another article.

So that was the last major version of the theme. Basically our e107 site looked that way for most of its life.

In November 2005 I attempted to reboot the theme. I made these 3 propositions to the band:

The last one had an interactive header, with tiny sketches showing up on mouse over:

Unfortunately we didn’t found any of these themes matching the Cool Cavemen spirit (whatever that is). If these alternatives were publicly discussed, we decided that no one was going to replace our previous theme.

The final update we made was when our Raw EP was released. We basically applied filters on the header to match Raw’s cover. We also updated our logo to use the one designed for us by QPX:

New blog header and tiny WordPress theme customizations

Posted on by
7

I maintain a bunch of websites for friends on my server. In this context, Maomium‘s owner owed me some bucks for his .com domain name. Here is the envelope I received yesterday with a check:

Now that’s what I call a personalized letter ! This original artwork is so great that I had to share it.

The hours he put creating this original artwork mirror the effort I invested maintaining his digital properties (a WordPress blog, a Drupal-based online store and a ZenPhoto gallery). That’s the best thank you note I have received so far ! :)

Jim from Maomium is a really talented artist and really deserve attention. He used to have an online shop where you can buy his paintings and customized furnitures. But we shut it down some weeks ago. Its replacement is not available yet, so if you want to buy him unique hand-made piece of art, don’t hesitate to get in touch with him at jim@maomium.com.

And with Jim’s approval, I now use his letter’s artwork as my blog image header. It’s much better than the default theme image ! ;)

Talking about this , here is a quick tip to make minimal design changes to a WordPress theme. The idea is to put custom CSS directives in a widget, as below:

As widgets are site-wide, all these CSS customizations will be applied everywhere. Here is for example the code I applied on this site to hide blog’s name and description from TwentyTen‘s header:

<style type="text/css"><!--
#header {
  padding-top: 0;
}
#site-title a, #site-description {
  display: none;
}
--></style>

This quick and dirty hack is perfect for tiny customizations. It will make your CSS easier to maintain as you don’t have to modify the core style files or create a child theme.

How-to add a corner banner to a K2 WordPress theme’s style

Posted on by
2

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.

How-to inherit CSS width attributes for Internet Explorer

Posted on by
6

Let’s say you rely on a third party CSS framework that set the default layout of your content. The following CSS rule is part of the framework:

img {
  width: 100%;
}

This CSS directive tell all your images to use the full width available to them.

Now, for any reason (aesthetic, layout, etc.), you want to reset this behaviour.

One solution (the laziest) is to remove those three lines from the original CSS file. But if you’re like me, this sound too dirty for you as you don’t want to modify the original CSS file (I like to avoid patches on third party tools and libraries I don’t maintain).

Another solution consist in overriding this width attribute in another CSS file that you will call after the original one. This case is covered by the CSS 2.1 specification which define the inherit value:

img {
  width: inherit;
}

This solution is perfect and work as expected in Firefox. Unfortunately, and without any surprise, it doesn’t with Microsoft’s browser as IE has anecdotical support of CSS’s inherit.

But today I found a trick to fix this in both Firefox and Internet Explorer. The workaround is to use the auto value instead of inherit:

img {
  width: auto;
}

I’ve tested it with both Firefox 3.0rc1 and Internet Explorer 6.0.2800.1106CO.

Of course this solution is not generic: it only work in my case because img html tags has width attributes that support the auto value.

Sapphire style for K2 WordPress theme

Posted on by
9

Sapphire custom style for K2 WordPress Theme

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.