Thursday, August 21, 2008

Colibri fixes

Blogger Templates: Colibri

The name of the blog template I use is Colibri. It's considered one of the most beautiful templates, but the original code has some bugs. If you'd like to use Colibri on your blog, here's step by step instructions.

1. Go to and click on "Download XML" (underneath the screenshot). Save the code/web page to your hard drive as a xml file. In IE7, you'll do that by clicking Page\Save As. Don't copy the text and expect to paste it as doesn't work.

2. Click on the link to the right of the screenshot to download a zip file of the background images. Save the images to your hard drive. You'll want to save these in case something goes awry with the links in the code. You'll see what I mean in a moment.

3. Go to your blog and upload the xml file as your template. In "new" Blogger, this means you click Layout, then click Edit HTML. Then follow the instructions toward the top of the screen for "Upload a template from a file on your hard drive".

4. After you click Upload, the html will import and your template will be saved automatically. At this time your blog will look terrible, assuming the original xml code has not been corrected. Don't panic. Go back to Edit HTML.

5. If you like the Blogger Navbar to show at the top of your blog, then scroll down through the html until you see instructions showing text that needs to be removed in order to show the Navbar. Delete that text. Otherwise, leave the text in place.

6. Scroll down until you find text referencing a .png file. OR you can do Ctrl+F to Find "png". There are only 2 references to .png files in the code. The first one looks something like this:

#main-wrapper { background: url( top no-repeat; margin-top: 76px;

Remove the entire 'http: .png' string and replace it with

Scroll down and click Save Template. You're not done yet, but you will want to check that there has been some improvement to your blog. View your blog and see if the main image is showing. If it still does not show or you see an error message on your blog, this is where the zip file of images (from step 2) comes in handy. You will need to upload the "maincontent" png to the image/photo sharing website of your choice, but it needs to be a website that creates a weblink to the photo for you. Obviously at this time this capability is available on Photobucket, and you can create a Photobucket account for free. Do this and replace the http: string above with the new string that you just created.

7. If the flower background seems too narrow for your blog, go back to Edit HTML. Toward the top, look for a reference to a .jpg file or search for "jpg". At this time, there is only one .jpg in the code. It looks something like this:

body { background: #fff url( top center no-repeat; margin: 0;

Replace the entire http:...jpg string with this:

Save the template and view your blog as in step 6. If you don't see improvement, get the "body_back" image from your hard drive and upload it to the web yourself, as described in step 6.

8. Note that there is a 3rd image in the html code (and in the zipped images that you downloaded in step 2). If you find this one is not loading correctly on your blog, you may need to upload that one to the web as well. At this time, the existing code should not give an error.

9. Also note that if you have been using Colibri for a long time and your blog looks funny, the xml code on the template page has changed a couple of times. If you see blue lines around the frames, or if the Creative Commons license doesn't show at the bottom, then your code is old and you can fix it by downloading a new xml file and starting over.


Alissa said...

This was super helpful!


Laci said...

This was exactly what I needed! You are amazing, and you just made my day! :) Thank you, thank you, THANK YOU!

Peachy Herrin said...

i've been wracking my brains out how to fix the bug but you did it! thank you thank you thank you!!! :)

Steph said...

Oh thanks SO much for the help! Now my blog looks amazing and my brain isn't so confused! Yes you ROCK!

Frau Holle said...

I owe you something! Thank you SO much for putting this site up. I had already given up on the beautiful layout - and with your help it is niw shiny and new on my blog.

Yes, I agree - you ROCK!

Anonymous said...

Thanks for the help:)

Anonymous said...

Thanks so much for your detailed instructions!!!

Do anyone know how to move the date and title of the first post down a little so that the flowers aren't covering the text?

|Shan| said...

It works perfectly!!!!!!! THANKS A LOT!!!!!!!!!!!!!!!!!!!!!

Widi A. said...

Thanks so much for the clear and detailed instructions. Now i can use this template on my blog..

Thanks again

Elie Mulyadi said...

Thank you very much for your's so helpful

Webmaster said...

Thanks for fix Colibri is Great theme :)

しろっぷ said...

Thank you. It survived very much.

psychopoet said...

thanx: u r most generous! ;-)

Geronimo said...

Thank you soo much for this, really really helps me =D

Michelle said...

Woo, thank you! =D

Anonymous said...

Thank you so much for a clear set of instructions. So pleased with the look of my new blog now.

principal said...
This comment has been removed by the author.
principal said...

Dear, Thanks a lot. It's wonderful. I try it more than 3 hours until I read your guide. It's working till this September 2010. God bless you. Arigato Gozaimase.

Shannon said...

thanks, i did all this but the images do not sync up with the text columns, and it looks nothing like how colibri is supposed to look on its original site.


Related Posts with Thumbnails