Captain Oblivious

I've gotten a couple of questions about this, so I decided to blog it for posterity. 'cause I'm just such a nice guy. Oh, and because I didn't want to get asked again. *smirk*

So you want to add a new skin to BlogSphere. Maybe you're bored with the 15 or so that are included. Maybe you can't stand to be like everyone else. Which would beg the question of why you want to import a standard skin that was developed by someone else. But hey, this isn't the Hypocrisy Patrol, that's the third door on the right.

How do you get started? Get a skin. In Movable Type they're called Styles. I like the BlogSphere name better 'cause style is a pretty heavily used term in web development. Anyway, Google to your heart's content if you want. Or you can go to these two sites: Movable Type's Style Library and The Style Archive.

Pick a fabulous style/skin of your very own. Download and extract the zip file. It will include two CSS files and a set of image files. One of the css files will be called base-weblog.css, the other will have a name based on the title of the style in question.

In BlogSphere, go to the BlogSphere Config menu. Under Look and Feel, choose the Page Skins view. Click the New Site Skin button. Fill in the metadata - Skin name and description show up in the view, while the other fields are mostly a way of giving credit where credit is due.

There are 4 tabs below the metadata: Base Skin, Extended Skin, BlogSphere Features, and Images. Base Skin and Extended Skin are where you'll paste in the 2 CSS files. The Images tab is where you attach the various image files. BlogSphere Features is for the adventurous among us who want to add styles for advanced BlogSphere features (web polls, for example) that aren't included in Movable Type styles. Follow the steps below (it should take about 20 minutes, max).

1. Base Skin - this is where the base-weblog.css file is pasted, just as it came - no changes should be necessary (thought you may tweak it later if you're a style geek).

2. Images - Use the "attach" button and select all the images included in the zip file. Save the document (which will close it if you use the "Save" button instead of the File/Save command, so re-open it). You did this to get the filepath to these images. Those paths are only visible when the document is not open for editing (read mode), in the Image URLs: table cell.

3. Open the second CSS file in your favorite text editor (one that has good search/replace functionality). If you're masochistic, you can just make the changes manually in Notes. I'll wait here while you remove the fingernails from your index fingers just for kicks. The rest of us will use our preferred programmer's editor.

     A. Delete the first line of this file. It will read "@import url(base-weblog.css);" and it is redundant in the BlogSphere configuration.
     B. Search and replace the following:

          "url(" with:
          "url(" + MyBasePath, where MyBasePath will consist of the name you gave this skin + ".css/$file/" - so an example would be "url(TheLiteraryLife.css/$file/"

     C. Do a sanity check and search for any other image files types who might not have matched that pattern. Yes, by hand. Oh, the pain. You'll survive.
     D. Paste the (updated) contents of that CSS file into the Extended Skin field.
     E. Save the document.

4. Edit the BlogSphere Configuration document (Blog Setup/Blog Configuration) and choose the new skin from the drop-down in the Site Skin field.

5. Check the site locally before replicating 'cause it's Notes and you can do that. Fix anything you screwed up. Unless you've done something goofy to the Page Templates that come with BlogSphere, there won't be anything screwed up. But we're geeks, so we do test before uploading the new design, even when we're sure nothing can go wrong.

6. Replicate to your hosting server. Load your blog page. Be amazed at what a killer style designer you are(n't)...

Wanna add more styles? Lather. Rinse. Repeat.