This is the first post in a series that will deal with Blogsome theme conversions. Part 2 can be found at Blogsome Themes, part 2.

To begin with, you will need the following things:

  • A blog created with Blogsome. I suggest that if you already have a blog that has posts on it, you create a new one, just to tweak until the theme is just right. That way, your real blog will continue to work, no matter what. I’ll assume you have a Blogsome blog to test on, and know a bit about the backend (Dashboard, and where to find the various options/tools).
  • The files required for your theme. Alex King has a great list of themes, and runs competitions occasionally, so go visit there if you want to find one, and don’t have one already.
  • Firefox, with the EditCSS extension installed, or the EditCSS bookmark
  • Patience

You should also bookmark the following sites:

I will use the following conventions in this document:

  • Button: a button that you click on. Will look different in each browser - usually it looks like the buttons in your Operating System, but not always.
  • Links that you need to click on will be bold.
  • Code that you modify will either look like this or this
  • Filenames will look like this.
  • Important, or unusual terms will be italic.

Converting a WordPress theme to Blogsome is not always easy, but is very rewarding, and you may learn something along the way. Finally, whilst I have gone to a lot of effort to ensure everything in this document is correct, I take no responsibility for any data loss. You should not have been working on your ‘proper’ blog anyway;).

Starting: Upload Image Files

Okay, let’s get started. The first thing you will want to do is upload all of your image files to your Blogsome blog. This is a much more time consuming process on Blogsome, as there is no automated way to do it. Under normal WordPress installations, you can usually FTP into the server, and dump all of the files you need.

We need to click on the Upload button in the backend, and then on the Browse… button. Navigate to where the images you have as part of the theme are on your computer, and select the first one. Click the Upload button. When the page loads, record the information it gives you in a place you won’t lose it. Blogsome doesn’t provide the ability to look at lists of images, so if you forget it, you’ll need to try by trial and error to find it.

Most of the images will have names that aren’t mangled by Blogsome’s server, so you should end up with a list of files like:

/images/header.jpg
/images/search.png
/images/logo.gif

What files you have will really depend on the theme you are using. There are some standard file names, but don’t expect them to be the same as everywhere else!

Update Style Sheet

You now are ready to insert your Style Sheet data. In the backend, click on Manage, and then on Files. Scroll down to the bottom of the page, and click on Site Style Sheet. After a few seconds, your Style Sheet will appear in the text editing box.

We need to replace the entire contents of the text view with the contents of the theme’s stylesheet. This could have one of several names: typically it will end in .css, and more than likely it will be the only one. wp-layout.css, stylesheet.css and style.css are all likely candidates.

We now need to examine the Style Sheet, and replace all instances of image filenames with their equivalent URL on your server. You can use relative URLs, so if you find something that looks like:

    background:url(img/content_bg.gif) repeat;

You will want to make it look like:

    background:url(/images/content_bg.gif) repeat;

You need to ensure you get every filename - otherwise the correct images will not appear! When you are done, you must save your changes. The Update Template! button will do this nicely.

Righto! That’s the easy parts done. Next time, you will learn which template files Blogsome uses, and what data needs to go into each of them. You will also learn how to convert a PHP function to Smarty Tags.

The next part of this article can be found at Blogsome Themes, part 2.

  RSS Feed for Comments on this Post