Suplimenting iBlog with CSSEdit ~ teknologi

Posted on Mon - December 25, 2006

Suplimenting iBlog with CSSEdit

I am still experimenting with Cascading Style Sheets. For an old HTML hand like me, it's been tough to break some habits.

There are some really, really big advantages to CSS. Say for example I wanted to change the color of my links. In the old days, I would have to code each page individually to make them all uniform. All I have to do with CSS is change two color definitions and the entire site will have updated colors. I can change the format of the whole site just by uploading one page instead of all of them.

Since Pagan Vigil has more than two thousand pages, you can see that would be a problem. Even with modular HTML, it would be almost impossible to do it quickly.

This blog, teknologi, has what's pretty close to the default style sheet for iBlog. Oh, the colors are tweaked a bit, but that is about it. Once I got to fiddling with the CSS, all sorts of things opened up.

Here is a sample of the blog post headline style and date style Pagan Vigil. Most people won't have my specific fonts installed so it is not American Typewriter like the PV logo, but it is close enough to look like it might have come out of the same typewriter. That contributes to the whole feel of the site.

I did a slight variation for the sidebar title on Pagan Vigil.

For Technopagan Yearnings, I added a background in the blog post headline.

The great thing about this is that I can change any of this at a moments notice. Admittedly iBlog has CSS support, but it doesn't make editing CSS easy. Rather it makes certain things very easy to change and you can't directly change other things. That double border in the side title of Pagan Vigil can't be done within iBlog, you have to edit the master style sheet for the site. Different font families for different blogs (but the same user) also can't be changed within the program. New class definitions can't be added.

For that, you can load the style sheet into a word processor and save it unformatted with the proper extension.

Or Macintosh users can use CSSEdit from Macrabbit.

Stars above I wish I had heard about this program earlier. It's intuitive and lets you see what happens before you save. The latest version even includes a Milestones feature which lets you instantly revert to a previous save, or even saves before that.

Now, here is where things get complicated, it is easier to work around iBlog's filing locations than to try to keep track of what is where. In your Sites folder, there is an iBlog folder with one folder for each blog you have, but the title of the folder is some arcane number that begins with B. If you have only one blog, that is not a problem, but I have three and am thinking about a fourth. In my Sites folder I have an alias for each blog folder, only I have renamed the alias to the blog name instead of the number.

There is a file named “styles-site.css” in each blog folder. This is NOT the master style sheet for that blog, this file is overwritten every time you use iBlog to either Preview or Publish. I found that out the hard way when my changes kept dissappearing.

The master style sheets are in Library/Application Support/iBlog/Stylesheets. I have an alias of that folder in my Sites folder.

So I usually have four windows open when I am experimenting with CSS. One browser, the CSS program, the folder window for the iBlog stylesheets, and the folder window for the blog.

Before I start, I archive the style sheet in case anything goes wrong. I open the site master style sheet with CSSEdit, make any changes, and then save.

I drag the “styles-site.css” from the blog folder to the trash.

Then I option-drag (to make a copy) of the site master style sheet to the blog folder. I rename it “styles-site.css” and refresh the browser.

Instant gratification.

=>