K2 Gifs for Internet Explorer

Published on   Monday, August 14, 2006
by  John Garner

The following concerns the WordPress K2 theme. These are the gif images that you can use in your CSS files so that you don't have the light blue background colours you'll get with PNG files in Internet Explorer. You can either right click and save the ones you need or download the zip file of them all at the end :

Post Gifs

  • Pencil : Pencil K2
  • Comment : Comment K2
  • Comment Edit : Comment Edit K2
  • Heart : Heart K2
  • Quote : Quote K2
  • Time : Time K2

Rolling Archive Gif

  • SliderHandle : SliderHandle K2
  • Slider BackGround Right : Slider BackGround Right K2

Sidebar Gifs

  • Feed : Feed K2
  • Reset : Reset K2

Zip of all Gifs

Note :
the only icon that required some changing was the sliderhandle.gif since I added the background of the slider and then deleted white space that wasn't any use. I used pattern transparency diffusion.
The complete set doesn't include images that are already Gifs since you already have these.
Also I only use the above Gifs on my site, if you use others in 0.9 release you'll find them in the zip file.
Finally in the zip file there are two versions of the Gifs, one set that have a transparent background and one that have a white background. It is pretty much impossible to get as good a solution as a PNG for transparency for example here you can see the two trackback versions the first transparent and the second with a white background :
1. Transparent background : Reset K2

2. White background : Reset K2

You can simply add the following CSS to your K2 theme CSS file :

Take (for example) the code from the styles.css file :
.entry-edit a {
border: none;
padding: 2px;
padding-left: 23px;
margin-left: 10px;
background: url('images/pencil.png') left center no-repeat;
height: 16px;

Add to your theme file in this case ubikann.css in the ubikann theme folder which is in K2's 'styles' folder :
.entry-edit a {
background: url('pencil.gif') left center no-repeat;

and for the GIF with a white background you would use this :
.entry-edit a {
background: url('pencil2.gif') left center no-repeat;

Note :
- since this code overrides the above you only need to specify the change of image since the rest needs to remain the same.
- To keep things in the same place I would recommend adding the pencil.gif to your theme folder in my case in the 'ubikann' folder which is in K2's 'styles' folder. Because the image is in the same folder as the css file, the url code must be changed from :
background: url('images/pencil.png')
background: url('pencil.gif')

Also please feel free to copy the WordPress logo that I created using the official illustrator (.ai) file from WordPress.org that is the page footer below. It's the GIF version. The K2 icon is not official I just did for the fun and to fit in with WordPress.