I got a business doing websites
When my friends need some code, who do they call?
I do HTML for ‘em all
Even made a homepage for my dog

-Weird Al Yankovic, "White and Nerdy"

Wednesday was a kind of milestone, or climax, or finish, for a project of mine. And that project was Matt Barley's website.

It started as a idea in Matt's head at some time or another, and he eventually conveyed to me at the New Year's 2008-2009 party at the RimRock Inn that he had been procrastinating on the project for some time and didn't get it done in 2008 and so wanted to get it done this year. I said I could help him, and so, on January 9, the domain name was registered, and a web page converted from a Word document made on Matt's MacBook was thrown up, slightly hand edited.

The first thing I did after that was to recode the page cleanly, with the help of KompoZer. Matt wanted a menu on the side, so it went table based. Yep. I just said that. It wasn't the best of designs, and later on I changed that to a menu positioned left with CSS. Praise God for CSS. Eventually it went back to plain HTML structure with a text menu below the header. Also, somewhere along the line, Matthew of abm fame gave a couple design suggestions and some code for one of them.

And then there was the photo galleries. First I did them with Web Album Generator and tried to embed them in a page, and then tried a page per album, using in iframe. That was a pain, and eventually I gave up and put them on separate pages and edited the CSS in each album folder to make those pages appear look like the rest of the site. And then Matt didn't like so many pictures on a certain album, or something like that. So, we ended up switching to Picasa Web Albums and linking to Matt's public page from his website. That worked out pretty well, since Matt can now manage the pictures all himself, which is great for both of us.

Eventually, I wanted to set up some sort of solution so Matt could edit the site on his own. I thought of a content management system first, and looked up one I recalled seeing linked from BugMeNot called CushyCMS. So I went and checked it out. It turned out to be, as one reviewer put it, more like a remote content editor. You put the proper class on div elements you wanted editable by Cushy and give it an FTP account to work with, and that's how it works. As another reviewer said, most of the time he'd probably forget to download the version from the site if he wanted to edit with something else (e.g., by hand with a text editor). So, that idea ended up being quashed before I even tested it.

I checked out three systems after that, really: Joomla, WordPress, and CMS Made Simple. XAMPP running on Windows on my laptop was my testbed of choice. Joomla was easy enough to set up, but seemed kind of complicated. WordPress looked like it might work well for blogging, but that's not what I was gunning for (although abm may be gunning for it in the future). CMS Made Simple ended up being it. The template/stylesheet system was easy enough to understand, and the use of the Smarty template system seemed nice. Not that I had heard of it before, but inserting Smarty tags seems to me a good way to insert special content into pages.

The first day of development gladdened the heart, because it seemed like it would work out great, and there was a pretty sweet little Picasa Web Albums module I found. There were some frustrations after that. A lot of aggravation dealing with CSS. In fact, that's been a thing all through the development of the website. Eventually things got ironed out and the site was finally ready for launch. The launch however, was terrible. I tried several times to upload and correctly configure the site for being on the server, and made a clean version of the site a couple times while at it. This process was highly frustrating, the least of reasons not being that I still have dial-up! Anyway, I finally got it nailed down and done correctly.

After after putting it in a test directory and then getting the go ahead from Matt, it went root, and now sits there beautifully. It's not much, but I have to admit I'm rather proud of it and am thinking that I may even redo our church website with CMSms if given stewardship of it. So, go check it out.

So, three things:

I had been wishing for a sort of label management tool for Blogger. Finally, I just did a Google search (doh!) and found that Blogger itself has a sort of label mangement. So, it looks like I can edit labels fairly easily and delete rarely used ones. Sweet. Check out this Blogger help page and this blog post at BloggerStop.net for a guide to a few common actions.

Second thing: Windows Live Writer. I had been using a beta version for a while, and a few weeks ago updated it to a 2009 version. It's not the snappiest in performance, but I think the updated version improved that. I'm happy with it; it works well for what I do. I can save drafts, link up a storm, and pull up cached copies of posts. I know there are other blogging applications out there, I haven't tried any yet, but maybe I will in the future.

And finally: feed widgets. I have been checking out a few recently to use for a feed from the CaringBridge journal for Isaiah. WidgetEasy is quick and, well… easy, except it broke somewhat on that feed. Arg. Also no customization. Feed Informer I found via a Wild Apricot Blog post; it requires registration but is pretty customizable. You make digests: they can contain more than one feed if you want and you can set some options relating to filtering incoming items, sorting, and such. One thing I like is that it seems to (at least with some templates… I shall have to investigate what exactly causes it), you can truncate the post content; for the Isaiah feed on PAN, I used a template that had a read more.. link. Nice. And finally, from a comment on that post, Feed2JS. It's quick, it needs no registration, you can plug in CSS styling.

Edit : April 24, 2009:
Some more info: you can truncate post content with Feed2JS also, if you turn off HTML display from the feed. Also, you can run it from your own server. And finally, the Feed2JS server caches feeds for an hour; seems to be faster than Feed Informer, which is nice; it was getting behind the feed on the Providence blog. 60 minutes is much more acceptable.

[Also known as (for the Google's sake): How to fix far right links with Subtlebeauty Blogger template or How to fix Subtlebeauty Blogger template sidebar poking into posts]

We noticed a while back that links on the far right of a post using this template were at least partially unclickable - you know, the little link hand cursor disappears. The beam cursor also disappeared when mousing over unlinked text there… made it harder to select such text. I did a little code tweaking and found something that solved the issue: changing the width of the sidebar-wrapper div in the template CSS. It is by default at 35% ("of the parent element's width"); I think I had it at 27% in the last couple days, just did some experimenting, and I think 28% percent is the highest you can go without having the sidebar wrapper bleed into the posts. You might need to do some expermenting, maybe set it lower, if you have lots of buttons on the top navigation bar (the links just above the posts). I haven't noticed any squishing of the sidebar, or any breaking of it otherwise because of the tweak; it seems to work fine.

So, if you haven't done it before, here are the editing instructions: go to your blog Layout settings (accessible from your Dashboard) and click to the Edit HTML sub-tab. Now, use your browsers search function (Ctrl+F, probably, or Edit menu > Find) if you wish, or just find it manually; look for #sidebar-wrapper (it won't be italicized). Find the width property under #sidebar-wrapper and change it from 35% to 28% (or whatever other width you decide; that's just what I am recommending).

I don't know if this is an issue with the WordPress version of the Subtlebeauty template, but I know it certainly is with the Blogger version. But… issue fixed.

--Nat

[This is a bit of a rewrite of Tuesday's post.]

The quick edit icons,   and , can be handy for, well, quick edits, but I personally prefer the clean look of our blog without wrench icons cluttering up the sidebar (by the way, they only appear when you are logged in as an admin of that blog or on a post you made). Fortunately, LawnyDesignz has a simple and elegant solution.

Here it is: you have to add a bit of CSS code to your template. So, get your blog template HTML open in the Blogger editor (Layout settings > Edit HTML). Now the important part: you have to put this in the right section to work. You have to put it in the section between the opening tag <b:skin> and the closing tag </b:skin>. For convenience, just make a new line right after the <b:skin> tag (i.e., insert your cursor right after <b:skin> and hit Enter). Now copy in the following text:

.quickedit{display:none;}

Press Save Template and then take a look at your blog. Wrench icons have disappeared, hopefully.

This still leaves the little pencil icons, but I don't find them so obtrusive and deign to leave them there. However, these can be removed, too, if you so desire. Go into the Settings tab (Basic sub-tab, selected by default), in your blog settings, and select No on the drop down box for 'Show Quick Editing on your Blog?'. Save Settings and pencils-B-gone!

Note: in the previous version of the post, I mentioned you can put the code in the first style section before <b:skin> but I would recommend putting it in the b:skin section. Lawny told me about putting it in the b:skin area, so thanks Lawny!

Also, if you have Firefox, you can grab the Stylish add-on and use this userstyle to quickly toggle the pencil and wrench icons visible/invisible, no reload required. Pretty cool.