Design-Err

The Web Wizard's Guide to JavaScript

2009-01-31T14:01:00.000-08:00

My husband found Steven Estrella's The Web Wizard's Guide to JavaScript on a shelf in his office at work and, knowing that I wanted to learn JavaScript and that it had been highly recommended, he brought it home to me.

Now, I've read the w3schools' JavaScript tutorial, and I completed all of the little examples successfully, but I still couldn't think of a way to implement stuff I wanted to implement. Part of this has to do with the fact that so far, I haven't WANTED to implement any JavaScript aside from some menus and some automatically rotating images. I found code to do that before I'd even read the tutorial.

Part of it also has to do with the fact that I think in sentences, and this guide seems to recognize that that's a pretty common way to think. The first chapter alone has been really helpful in helping me understand the different parts of a JavaScript "sentence" and helped me realize that the punctuation in JavaScript isn't really punctuation - it actually tells you a lot about what part of the sentence you're looking at.

As a for instance, say you have this line in your JavaScript:

document.link.color = "blue";

The period is a lot like an apostrophe s - it shows ownership, so you have the document's link's color. We know that color is a property, not because it comes last in this series, but because of the treatment of blue. We have an equal sign followed by blue in quotation marks. That means color is a property of link, which means the value can be thought of as an adjective or quantifier. A different set of marks might indicate that color is a method (think verbs) rather than a property (though I don't think there are any methods called color in JavaScript).

All in all, the first chapter alone has been worth reading, and I'm looking forward to going through more of the book.

Until tomorrow or the day after or whenever you next see me, don't laugh so hard the milk spews out your nose. That hurts.

What's Shakin'

2009-01-31T07:17:00.000-08:00

I’ve been away for quite a while now – Andy and I have returned to the States and are back in Chicago after a dreamlike month back home. Returning to Chicago at the beginning of a cold and snowy January from a warm and sunny Texas is a bit like slamming your forehead into a brick wall. At least it gives more than granite…

The up and coming bit is pretty exciting – I’ve made some modifications of my personal website and am working on some new stuff for TLC.

The best part about the TLC work is that the website will look brand new, but most of the underlying CSS and Html is the same, making for a smooth transition. Now that Tiffany has added pelvic dysfunction as a specialty (that girl is always learning something new!), we’ll also be working on an intro page to better direct newcomers their first time through.

If you’re interested in taking a look at my website, head on over to cheryl.terrel.us. I’m really pleased with it except for the little title text at the top. It looks perfect in Firefox and is somewhere around 10 pixels off in IE. Raise your hand if you’re surprised. That’s what I thought. If IE supported .png my life would be simple – I’d just do the text without a background, and it wouldn’t matter if one was slightly off from the other. Of course, if I didn’t want the text to be clickable AND I didn’t want the text to be in a nifty font, this also would not be a problem. We’ll see what happens.

I’ve also just had a tiny little epiphany for performing further edits to this page’s header. I may have mentioned, though I don’t recall, that I wanted to change the photo’s edges to look as though sand were falling onto the photo from the background sand. I’m going to try making a border using the background sand, adding a black border around that, using Gaussian blur (Gimp) on the black border to create a faded effect that crosses over the sand border, and then doing whatever it is that I’ve now forgotten how to do (the intertubes are a wonderful place!) and combining the images. Hopefully it will be exactly what I’m looking for. Stay tuned!

Until next time, don’t burn your candles on flammable surfaces.

Firefox & IE continued

2008-10-20T01:56:00.000-07:00

Mozilla Firefox

Internet Explorer 7

I finally convinced everything to be a little more well behaved in both IE and Firefox. For reasons I may never understand, IE always seems to add some sort of unremovable padding to my divs that causes them not to nest the way I want them to. I had to shrink everything down a bit in order to get it to fit, but the change isn't too noticeable.

As I mentioned in the last post regarding this design, I wanted to see about having the menu stationary on the page, so that it moves when the page moves. I had some trouble pulling this off because of the layered effect I'm currently using. Once again, the primary difficulty lies in the differences between IE and Firefox. I could get one to work, but not the other. If I thought this were an important enough feature, I could run a Javascript ummm script at the top of the page to check for IE versus Firefox, then direct the browser to the appropriate CSS file, but it's not that important.

If you'll check out the little comics menu sitting just above the last comic boxes, you'll notice that IE isn't displaying the menu. That's fun, isn't it? I haven't looked into this problem yet, but I'm sure it will make me want to bang my head against the wall at least once or twice more.

I also added a white background to the footer in order to make that a bit more legible, as well as making it stationary, so that it's always at the bottom of the page. In this way, the menu is always accessible, and I don't have to make it cooperate with any other divs.

I'm having two issues with this, as you can see. The first is something of a perennial problem - centering a horizontal, unordered list. You've probably seen lots of centered menus on websites. I've used the technique in the past, actually, but not using an unordered list. The problem is unique to standards compliant coding, which tries to use code that makes sense - a menu is a list, so its code should reflect that. Unfortunately, lists don't like to be horizontal AND centered. I haven't done too much digging to solve my problem, but thus far all recommendations have failed. Right now I can solve the problem in Firefox OR IE, but not both. We'll see what I can do to fix it up before the next installment.

The second issue involves mouseover effects. My first menu turns yellow when a menu button is moused over. The footer menu shouldn't do this. The code tells it not to, but for whatever strange reason known only to the browser designers, this portion of my list code insists on duplicating itself. When I took the shot, I made sure my mouse was sitting over one of the menu items in the footer menu to display the problem. What I want is a simple underline to appear, without changing the background color or anything else. That, obviously, is not happening.

Following

2008-10-18T04:36:00.000-07:00

For the sake of learning who my one and only reader is (I hope there's one of you anyways), I've added the Followers Gadget to my sidebar. Once you've added my blog to your list, Blogger will update my list and stick your profile photo in my sidebar. It's pretty nifty and gives people an opportunity to learn about your blog while perusing mine. It's also a nice colorful addition when there are many faces there, so it's aesthetically pleasing to boot!

The only drawback as far as I'm concerned is if you're using Google Reader already (which I am), then it adds another folder for the Blogger blogs that you follow. Those blogs are, of course, already in Google Reader (which is grrrrrrrrrrrreat!), so I now have them twice, in folders that I want them in. Not a big deal, just a little annoying. Maybe they'll eventually make that an option. Even with the annoyance, I clicked to follow blogs to let folks know I think their blogs rock enough to let them put my face on it.* =)

All that being said, if you'd like to follow this blog, just go to Regular Readers** on my sidebar and follow the instructions!

*Followers just makes me feel like I've got some sort of crazy messiah complex...

**You don't have to think my blog rocks, I just want you to stick your face on my blog. 0=)

Creative Commons Licensing

2008-10-06T23:55:00.001-07:00

Image licensed by Wikimedia Commons

For a while now I've been using images for content that have Creative Commons Licensing - always those items that are free for use for non-commercial purposes, and, if I plan to edit them, free for editing. But I was never certain how to credit them, so, since most of my work is on the web, I've been crediting them in my blog posts whenever they were put to use.

Happily for me, my How To of the Day gadget for my iGoogle homepage has a how to for crediting such items.

In the upcoming weeks you'll see a few changes around my blogs as I try to work these credits into the design without making them invisible or especially eye-catching. I want them to be available for anyone looking for them, but not anything that anyone else will find especially noticeable. I'll be sure and point them out as I go along.

Great Googly Moogly!

2008-10-01T07:30:00.000-07:00

As you know, I've been working on the Math Rox design. Since I always start by coding for FireFox, sometimes I don't notice until pretty late in the game that things are TOTALLY JACKED in Internet Explorer. Since I'm with only one computer (not counting my husband's Mac), I only get to see the painful destruction wreaked by IE7 rather than IE6 and earlier.

That being said, you've probably guessed that I just opened the design in IE for the first time. I think this is the most messed up anything has ever been! At least it gives me something to do and keeps me from wandering the Dutch streets, getting into trouble, right? Right.

So without further ado witness the devastating wrath of Microsoft:

Compare that to the lovely Firefox edition of the exact same code:

Impressive, ain't it?

Math Rox III

2008-09-18T02:44:00.000-07:00

Things are looking a lot better, though they've changed a good bit. I decided the best thing to do with the boy would be to have him resting on the comic itself, though I'll have to see what I can do to keep the boxes from moving out from under him as soon as someone increases the font size. I think I'm also going to recolor his clothes. Who wears that??? I changed the background to just a sky blue, to give a sensible background to the boy and get rid of the cluttersome rocks.

I also had to find something to do with the girl besides stick her on top of a rock resting at the bottom of the screen. That works out fine for anyone with a wide screen like mine, but for most desktop monitors, she and the menu would wind up at the bottom of the screen, which is not optimal. To get around this, I hung her upside down from a pole. If you to to my website where most everything has been uploaded, you can change the width of your browser window to watch the pole increase in length. I didn't want to stick the main content all on the left side while leaving the right side completely empty. That would be a bit tacky. =) So in order to center the content, and keep the pole, I added another div to sit behind the logo flag, both of which are ordered using absolute positioning and the z-index property.

I'm tempted to have the girl and the menu stay in place if possible. I'm not sure yet if I can make a menu stick in the same place on the page, but I'm going to find out. =) The optimal back end (database) of the page doesn't and won't exist, so a bit of the coding that I would need to do to implement that won't be done, but I intend for it to be possible for someone who was crazy enough to take this layout and make lots and lots of comic pages, all of which actually link together and look the same.

I'm happy that the mental block I'd developed for this page has departed, this is turning out to be a much cleaner, less crowded layout than the original.

Math Rox II

2008-09-02T10:28:00.000-07:00

I've been away for a bit, but have worked a smidgeon on the Math Rox site mentioned earlier. Something I hadn't thought about, but should have realized immediately was that my design requires a fixed height. This would be fine if the writer never wanted to add anything of any length to the page, but that's not likely to be the case. I've been trying to come up with a brilliant way to keep the kid standing on the mountain without winding up with the mountain abruptly ending mid-air (like the girl on the side who isn't standing on anything). I actually rectified the issue with the girl in another version of the design in which they're both standing on rocks. That actually matches the theme a bit better, but I find the mountain more aesthetically pleasing for whatever reason.

As you know, in my fiction blog Betwixt Mine Ears, I fixed the background to the back so that it follows the page. I could use that option here, but if I fix the background to the bottom of the screen, the boy could be doing his handstand behind the comic or the only thing that might be visible is his hand, and then the title would no longer be legible, because the mountain would be directly behind it. I made a background of falling rocks and stuck the boy and girl in front of the background so that they're standing on other falling rocks and put a colored background behind the title (as you see in the image), but I still don't care for it.

So right now I'm trying to think of a better option, but this might be it. Coding the thing up has been pretty simple and a good deal faster than anything else I've done before, but part of that is probably because there's no content, and it's likely there never will be, so I don't have to deal with making the text line up just the way I want it to or designing headings and what have you. These bones is pretty bare.

Math Rox

2008-08-07T11:49:00.001-07:00

A friend of mine writes some pretty funny math-nerd comics (someone else draws them), so I thought of this design to display them online. I don't know that they'll ever make them online, or if they'll make them in this format, but it's kind of fun, so I thought I'd throw it up there while I'm doing nothing this summer.

If you're wondering, I put together the plan using the Gimp. I was pretty careful to layer, so if they're big enough, I might even get to use the doodles and what not when I implement things.

Success!

2008-08-04T13:30:00.001-07:00

Sort of. I learned how to knit with the aid of several websites, but didn't quite knit what I had intended to knit. Instead, I wound up making this soap sack. If you'd like to read the details, they're over at Lost in Holland.

Knitting...

2008-08-02T06:01:00.001-07:00

I'll be back when Texas is done.

Rounded Corners

2008-07-30T05:24:00.001-07:00

I made a few minor adjustments to this blog including rounded corners, new link colors and a little opening and closing background for the posts (through the post title and footer divs).

The rounded corners are pretty simple with this background - it's dark and not clearly patterned, so I was able to easily lift the desired color out of the background without worrying about where the corners would wind up on the background if somebody used a different sized window.

When I went through adjusting fonts the first time, I changed everything to black (#000) within the code itself rather than in the variable section at the top, which was probably not the smartest thing to do... So I took a few minutes to replace the variable data within the code and to change the colors according to my preferences.

You might remember that all of the main content was on a gray background. That same color is now only used within the post title and post footer backgrounds, with the main background being white. I think this improves the legibility of the text while providing a light, but clear differentiation between posts. I also spent 5 seconds pushing the h2 and h3 tags farther out for the posts to provide even more differentiation.

I'm going to adjust the link colors a bit right now, because there a little light and hard to distinguish, but otherwise, I think I'm pretty happy with this layout.

D*** Cool Layout

2008-07-29T12:56:00.000-07:00

Now, usually I wouldn't use such language, but I'm so happy with the layout over at Betwixt Mine Ears, that it just seems necessary. Ok, so I'm a closet user of d*** and h***, but that's beside the point. Ask my husband, he'll tell you I use those words too often... But that's it. Really. ;)

Anywho, the last post displayed the new background that I had found along with the new look using said background. As I think I said in that post, I really liked the photo and thought it was just too wonderful to chop into bits. I also thought it was too wonderful to hide behind the content backgrounds. So I pulled out the backgrounds just to see whether or not the text would be legible. I found that it was, though I cringed at what it might do to some color blind readers.

In order to make it as easy as possible on those readers, I needed to make sure my fonts were as dark as possible. I also needed to do something about the resulting spacing problems once the background images were removed. If you recall, I was using the No. 897 template (which is definitely one of my favorites), so as you can imagine, removing those images created gaping, empty spaces between bits of content that made no sense and just looked bad. The least painful solution for solving this problem seemed to be starting with a more suitable template that would require fewer adjustments.

I started with Tekka, because it uses all dark colors for the fonts (though I changed the link colors), I liked the way it moved the sidebar to the top of the page (especially since I no longer wanted a big graphic header), it doesn't have any images in the layout, and the overall spacing is about what I wanted. It turned out that it worked very well. I just needed to squeeze the sides in, remove the background colors, shift the headings into Cheryl-approved locations, add a line above the date header, change the sidebar border, make a few tiny changes to the fonts, and voila!

Except for the background... I really wanted to put a transparent image in the content background to fade the main background enough that it would be pretty easily read by any color blind folks, but I knew that would only work in Firefox and maybe IE 7, which meant it just wasn't good enough. Then when I had my husband look at the site, he started talking about windows and frost on the windows (basically what I wanted to do) and that got me thinking about putting the transparency on the main background itself. Super idea!

I fired up the GIMP, selected the middle 750 pixels, tossed 3 splashes of 20% transparent white onto the background, lined it with the same color from the sidebar and rule border and uploaded it (right after ensuring that the background was centered rather than left-aligned). That was when layout-nirvana happened. =D

I am definitely more pleased with this layout than with anything else I've done, so check out the photo and then check out the site.

Background for Betwixt Mine Ears

2008-07-28T05:16:00.000-07:00

While looking for suitable background images for my other blogs I found this image from fishmonk's gallery (in a weird coincidence, also where I found the raindrops photo). I really liked the mysteriousness of the fog laying over the hills, but I didn't want to chop it up to make it a header, plus, I like the way the Betwixt Mine Ears header is designed.

My first attempts were to make a foggy background that went all the way down to the photo at the bottom of the page (you can still see the image in all it's glory if you scroll to the bottom - if you're using Firefox). I wasn't sure how to do this, because it would require multiple background images. I knew with absolute positioning I could pull stuff out of the normal flow, but I didn't know how to put them BEHIND the normal flow. A quick search, and I was ready to go: the z-index determines the depth of an item, with the default depth being 0.

I then needed a suitable misty background to lead down to the photo. At first I tried repeating the image of a section of the original until it reached the bottom of the photo, but this just created lines (either vertical or horizontal, depending on the height of the cross-section). I switched to a gradient and found success moving from a light grey to a darker grey.

Once I got everything working, I sent the link to my husband, who then suggested with his usual brilliance that I should have the background stand still when the user scrolls. He's so smart.

So that's what I did using background-position: left bottom, background-attachment:fixed and removing the other div I had added for the original plan.

You can check it out over at Betwixt Mine Ears.

Background for Lost in Holland

2008-07-28T02:44:00.001-07:00

I finally made a background I like! I found this image from fishmonk's gallery, selected a chunk, colorized it into a blue using one of the blues from the canal in the header photo, used the clone tool to get rid of the droplets on the edges, copy and pasted a few raindrops near the edges that seemed especially empty, then stuck like ends to like ends to make a starting pattern, and voila! a background was born!

Exciting isn't it? =D

You can check it out over at Lost in Holland.

Design Update

2008-07-27T13:46:00.000-07:00

Wow. I finally updated this design. I had a great inspiration for a splash page for cheryl.terrel.us and needed a suitable image to direct traffic here. I came up with a sand castle image from stock.xchng and then built the new design off of a sand castle theme. The new header is from boomobile's gallery.

It's not complete - I plan to add rounded corners, actually put some thought into the font colors and do something about the fat border around my photo. The overall color scheme still needs some futzing - I'll have to decide if the colors are not similar enough or too similar to work together. We shall see.

Lost in Holland Updates

2008-07-19T14:46:00.000-07:00

I made a few changes to our Holland blog.

I've tried a number of backgrounds, and even spent a few hours designing one, only to decide that when part of it was hidden by the posts and what not, it looked like a bunch of chickens. I finally just settled on the fade. I'm not really satisfied, but I can't really think what to do with it that isn't going to cost me a LOT of time and effort. Not that I have anything better to do...

I also gave the sidebar a light blue background and was disappointed to find out that for whatever strange reason the AdSense border won't turn on, so it looks a bit off, but oh well. You might also notice that I separated the sidebar from the left side and the header. I think this provides better spacing and separation, directing the eye around the page.

The last thing I did was to separate the date line from the post. I noticed a couple of days ago that when I posted multiple items on the same day the first posts lacked an upper border and were detached from later posts. This was a bit on the unattractive side, but the fact that there's no div surrounding both the date line and the posts makes it impossible (as far as I wanted to deal with it) to combine the first and last posts in the same "box". So I settled for pushing the date line farther away from the previous posts by adding a margin above the date line and a margin below the post box. That brought everything that should be close close, and pushed everything that should be far far.

Everything still feels very disjointed and disconnected, so I think I'm going to try adding a few rounded edges to see if that brings things together. Otherwise I think I'll just sit down and cry.

Until next time, I hope there's a little less rain where you are than there is where I am.

Casey Karbowski

2008-07-16T13:47:00.000-07:00

A friend of mine just started a new blog to get his photography biz going. Check out Casey Karbowski Photographer (extraordinaire). I told him today (and I really do quote - it was over IM), "Some of these are so cool. They look like a real photographer took them and not just one of my friends." So, yeah, he actually does good stuff (if he didn't, I probably just wouldn't mention it).

New banner for Lost in Holland

2008-07-10T11:21:00.000-07:00

I found a really nice photo for the Lost in Holland banner in Tim Berga's collection over at stock.xchng. It's pretty sweet!

I should have posted an image of the last instantiation of the website last night (or was it the night before?) when I posted the backgrounds. The only major change is the banner, but it's still pretty different. I have a photo for you of the current one though!

I really like the banner, but I don't like the layout or the background colors (which now clash). The layout is just too heavy with all that stuff and not enough white space. The spacing is adequate, but I'd still like to see the sidebar come down and to give it a less complicated, more subtle background. That will give the eyes good cues for where they're supposed to be and cut down on sensory overload. Especially bad sensory overload!

Updated Design

2008-07-08T05:27:00.000-07:00

I changed up the design for Lost in Holland a bit. Things were looking a bit boring, so I decided to spice it up a bit with a kitchen towel/Delftware inspired background (towel pattern, Delftware colors) and more Delftwarish coloring.

I had some trouble with the background as the "main-wrapper" specified a 1em margin on the right. It took some time figuring out the source of the problem, since I wasn't sure what divs the main background was nested within. Once found, though, it was quickly solved.

I'm not altogether satisfied with the design (it does look like a dish towel), but it's better than what was there before and it only took a couple of hours.

*I couldn't help myself, so I changed the background for what is actually the 4th time. The sage in the background works nicely to push the posts out of the background. The white was simply too overpowering and made making the distinction more painful than necessary. I also happen to be a very big fan of the color sage. =)

The following three images are the first three backgrounds I tried.

The first was a test to see if I liked the idea well enough to put it up.

The second was an idea to try to tame the first - the darkness of the blue combined with the brightness of the white, which also matched the background color for the posts, was a bit hard on the eyes.

And the third was an attempt to mesh the two.

The second never actually made it up, the third is what I had 10 minutes ago when I posted this the first time!

Change of mind*

2008-07-03T13:27:00.001-07:00

On another note, I've also decided I'm not going to worry about creating unity in my designs. If it happens, it happens. These blogs are really going to attract different personalities, so I'm reverting back to a Blogger design while I come up with a good plan for this one.

*This is one of those things you get to do way too much when you're designing for your own personal satisfaction.

I've not been idle

2008-07-03T13:00:00.001-07:00

I've been away from this blog for quite sometime, and in truth, haven't given it much thought. During that time, though, I was busy redesigning the Calvert House website. It was in need of a makeover, and the table/CSS/HTML based layout was overly complicated and difficult to manipulate.

I decided to go with a modular layout so that it would be easier to maintain for whomever comes next. If you check out the code behind it, you can see that each of those little blocks of text on the homepage is stuck inside a div. If I remember correctly it's even called a block. =D The blocks are in rows, so it's still something of a tabular layout, but it's more flexible as we could simply change the CSS to change the size of the blocks and then toss in another or remove one or do whatever floats your boat.

One thing it's not is completely flexible, which is something I'm disappointed in. I discovered flexible layouts while looking for help with some other code, so I hope to implement what I learned later on. I hate to leave a project half finished!

I'm also a bit dissatisfied by the jumbled appearance of some of the inside pages, such as those under the program menu. Local Events is especially bad. Unfortunately, I just couldn't think of an appropriate way to break things up. The repainted/redesigned clip art helps, but it's really not sufficient. I'd like to plug in a sortable list of events, but I don't think the UChicago folks allow you to do that sort of thing with their servers. On the other hand, if a new webmaster isn't found who can keep up with the local events (believe it or not, it's a lot of work maintaining a page like that), I'll probably advise them to remove that page altogether.

There's actually another layout that I would also like to try that involves a crucifix positioned toward the left with the text boxes flowing around it. It'd be really sweet to have them be completely interchangeable so that you could just exchange the style sheets whenever you felt like displaying a different style. I'm definitely going to look into it at some point, but that's pretty far down the road.

So until we come to that bump, have a tall, tasty mug of milkshake and don't worry so much about that extra little roll that popped up last week.

It's been a long time

2008-06-30T09:02:00.001-07:00

My husband took a 6 month research position in the Netherlands, so that's where I am now! We spent a little over a week and a half in Texas (oh the glory of 100 degree weather!) and have been here for two weeks tomorrow, so it's been a bit of a long vacation for me. =)

But all good things must come to an end, and besides that we all know that boredom sets in after so long on vacation. So hopefully I can get back to working on this design a bit.

If you're interested in hearing about what we're doing, check it out over at Lost in Holland. (Do note that there's another blog called Lost in Holland, but the person who blogs there hasn't blogged in quite some time.)

Done! Or at least getting close to it...

2008-04-27T20:31:00.000-07:00

I finally got enough time to brush up the code and associate everything correctly (I think) with Blogger's Fonts and Colors tool. I'm not sure that I'm going to stick with this color scheme. Actually, I'm sure I'm not, but it's a bit easier on the eyes than the test color scheme, so it'll suffice for now. By the by, don't mention the comments section. I just remembered to check, and it turns out that it needs adjusting. I hadn't done anything with that code (it's not really previewable), so I'm not surprised.

I'll do some further snazzifications later along with cleaning the code up (for the sake of making code readable, I prefer even tabbing and spacing throughout), but I wanted to get this posted right now. Until the Age of Snazz comes to pass, don't stab yourself in the foot with that sword.


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  <head>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[
/* Variable definitions
* ====================

  <Variable name="mainBgColor" description="Page Background Color"
            type="color" default="#6C7095"  / value="#6C7095">
  <Variable name="mainTextColor" description="Text Color"
            type="color" default="#000" / value="#000000">

  <Variable name="headerBgColor" description="Header Background Color"
            type="color" default="#5D6080" / value="#5D6080">
  <Variable name="titleBgColor" description="Blog Title Background Color"
            type="color" default="#5D6080" / value="#5D6080">
  <Variable name="titleColor" description="Blog Title Color"
            type="color" default="#fff"/ value="#ffffff">
  <Variable name="descriptionBgColor" description="Description Background Color"
            type="color" default="#5D6080" / value="#5D6080">
  <Variable name="descriptionColor" description="Blog Description Color"
            type="color" default="#fff" / value="#ffffff">

  <Variable name="dateHeaderColor" description="Date Header Color"
            type="color" default="#fff" / value="#ffffff">

  <Variable name="postTitleColor" description="Post Title Color"
            type="color" default="#000" / value="#000000">
  <Variable name="postTitleBgColor" description="Post Title Background Color"
            type="color" default="#CCB88F" / value="#CCB88F">
  <Variable name="postBorderColor" description="Post Border Color"
            type="color" default="#807359" / value="#807359">
  <Variable name="postBGColor" description="Post Background Color"
            type="color" default="#CCB88F" / value="#CCB88F">
  <Variable name="postFooterColor" description="Post Footer Color"
            type="color" default="#000" / value="#000000">

  <Variable name="mainLinkColor" description="Link Color"
            type="color" default="#5D6080" / value="#5D6080">
  <Variable name="mainVisitedLinkColor" description="Visited Link Color"
            type="color" default="#807359" / value="#807359">

  <Variable name="sidebarBGColor" description="Sidebar Background Color"
            type="color" default="#CCB88F" / value="#CCB88F">
  <Variable name="sidebarBorderColor" description="Sidebar Border Color"
            type="color" default="#807359" / value="#807359">
  <Variable name="sidebarTitleColor" description="Sidebar Title Color"
            type="color" default="#000" / value="#000000">
  <Variable name="sidebarLinkColor" description="Sidebar Link Color"
            type="color" default="#5D6080" / value="#5D6080">
  <Variable name="sidebarVisitedLinkColor"
            description="Sidebar Visited Link Color"
            type="color" default="#807359" / value="#807359">

  <Variable name="bodyFont" description="Text Font"
            type="font" default="normal normal 90% 'Trebuchet MS', Trebuchet, Verdana, Sans-Serif" / value="normal normal 90% 'Trebuchet MS', Trebuchet, Verdana, Sans-Serif">
  <Variable name="titleFont" description="Blog Title Font"
            type="font" default="normal bold 266% Verdana, Sans-Serif" / value="normal bold 266% Verdana, Sans-Serif">
  <Variable name="descriptionFont" description="Blog Description Font"
            type="font" default="normal bold 85% Verdana, Sans-Serif" / value="normal bold 85% Verdana, Sans-Serif">
  <Variable name="postTitleFont" description="Post Title Font"
            type="font" default="normal bold 110% Verdana, Sans-serif" value="normal bold 110% Verdana, Sans-serif">
  <Variable name="sidebarTitleFont" description="Sidebar Title Font"
            type="font" default="normal bold 125% Verdana, Sans-Serif" / value="normal bold 125% Verdana, Sans-Serif">
   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/
body {
margin: 0px;
padding: 0px;
background: $mainBgColor;
color: $mainTextColor;
font: $bodyFont;
}

   a {
  color: $mainLinkColor;
}

   a:hover {
  color: $mainVisitedLinkColor;
  text-decoration: underline;
}

a:visited {
  color: $mainVisitedLinkColor;
}

a img {
border: 0;
}

@media all {
  div#main-wrapper {
width: 510px;
overflow: hidden;    
float: $startSide;
    padding-$endSide: 15px;
    padding-bottom: 0px;
    padding-$startSide: 0em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
 
  div#sidebar-wrapper {
    margin: 0px;
    padding: 0px;
    text-align: $startSide;
  }

  div#sidebar {
width: 235px;
margin-top: 5px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
}

#content-wrapper {
  margin: 0 auto 0;
  width: 760px;
}

             
@media handheld {
  div#main-wrapper {
    float: none;
    width: 90%;
  }
 
  div#sidebar-wrapper {
    padding-top: 20px;
    padding-$endSide: 1em;
    padding-bottom: 0;
    padding-$startSide: 1em;
    text-align: $startSide;
  }
}
                       
#header-wrapper {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
background: $headerBgColor;
color: #000;
border-bottom: solid 1px #000;
}
#header {
margin: 0 auto 0;
padding: 25px;
width: 750px;
border-left: solid 10px $headerBgColor;
background: $headerBgColor;
color: $descriptionColor;
}

.titlewrapper {
padding-left: 215px;
padding-top: 25px;
padding-bottom: 0;
margin-bottom: 0; 
}
h1 a:link {
  color: $titleColor;
}

h1 a:visited {
  color: $titleColor;
}

h1 {
padding: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 490px;
color: $titleColor;
background: $titleBgColor;
font: $titleFont;
}

.description {
padding: 5px;
margin: 0px;
width: 365px;
font: normal bold 85% Verdana, Sans-Serif;
color: $descriptionColor;
background: $descriptionBgColor;
font: $descriptionFont;
}
.descriptionwrapper {
padding-top: 0px;
padding-left: 325px;
margin-top: 0px;
}


h3 {
  margin-top: 0px;
  margin-$endSide: 15px;
  margin-bottom: 0px;
  margin-$startSide: 15px;
  padding-top: 8px;
  padding-$endSide: 10px;
  padding-bottom: 20x;
  padding-$startSide: 10px;
  color: $postTitleColor;
  background: $postTitleBgColor;
  font: $postTitleFont;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}

h3.post-title a,
h3.post-title a:visited {
  color: $postTitleColor;
  } 

h2.date-header {
  padding-top: 0px;
  padding-$endSide: 0px;
  padding-bottom: 0px;
  padding-$startSide: 2%;
  color: $dateHeaderColor;
  font-size: 90%;
  text-align: $startSide;
}

#sidebar h2 {
  padding: 10px 10px 5px 10px;
  margin: 0px;
  color: $sidebarTitleColor;
  font: $sidebarTitleFont;
  background: $sidebarBGColor;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  }

#sidebar .widget {
clear: both;
padding: 10px;
margin-bottom: 15px;
background: $sidebarBorderColor;
border: solid 1px #000;
}

#sidebar ul {
  list-style-type: none;
  font-size: 95%;
  margin-top: 0;
}

#sidebar li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 105%;
}

#sidebar a {
  text-decoration: none;
}

#sidebar a:link,
#sidebar a:visited {
  color: $sidebarLinkColor;
}

#sidebar a:active,
#sidebar a:hover {
  color: $sidebarVisitedLinkColor;
}

#Image1 {
  text-align: center;
}

#Image1 img {
  border: solid 1px #000;
}

.Blog {
  margin-top: 20px;
}   

.blog-posts, .feed-links {
  margin-$startSide: 2%;
}

.feed-links {
  clear: both;
  line-height: 2.5em;
}

.post {
margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 100%;
background: $postBorderColor;
border: solid 1px #000;
}

.post-body {
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 0;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
background: $postBGColor;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
}

.post strong {
  font-weight: bold;
}

pre,code,strike {
  color: #666666;
}

.post-footer {
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
margin-left: 15px;
background: #fff;
  color: $postFooterColor;
  font-size: 80%;
border: solid 1px #000;
}

#comments {
  padding-top: 2px;
  padding-$endSide: 0px;
  padding-bottom: 2px;
  padding-$startSide: 5px;
  font-size: 110%;
  font-weight: bold;
  font-family: Verdana,Sans-Serif;
}

.comment-author {
  margin-top: 20px;
}

.comment-body {
  margin-top: 10px;
  font-size: 100%;
  font-weight: normal;
  color: black;
}

.comment-footer {
  padding: 0px;
  margin-bottom: 20px;
  color: $postFooterColor;
  font-size: 80%;
  font-weight: normal;
  display: inline;
  margin-$endSide: 10px;
}
                      
.deleted-comment {
  font-style: italic;
  color: gray;
}
                 
.comment-link {
  margin-$startSide: .6em;
}


/* Profile
----------------------------------------------- */
.profile-datablock {
margin: 0;
padding: 0;
}

.profile-textblock {
  clear: both;
  padding: 0;
  margin: 0;
}

.profile-img {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 5px;
margin-$startSide: 5px;
float: $endSide;
}

.BlogArchive #ArchiveList {
float: $endSide;
}

.widget-content {
padding: 10px;
margin: 0px;
background: $sidebarBGColor;
border: solid 1px #000;
}

#blog-pager-newer-link {
  float: $startSide;
}
 
.blog-pager-older-link {
  float: $endSide;
}

.blog-pager {  
  text-align: center;
}

.clear {
  clear: both;
}

/** Tweaks for layout editor mode */
body#layout #outer-wrapper {
margin-top: 10px;
}
]]></b:skin>
  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design-Err (Header)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'> </div>

    </div> <!-- end content-wrapper -->
  </div></div> <!-- end outer-wrapper -->

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
var pageTracker = _gat._getTracker("UA-388278-7");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

Finally!

2008-04-13T19:36:00.000-07:00

As you can see, I swapped the layout back to one of Blogger's. Here's the code and a screen shot of what my code looked like in Firefox. As you can see, I haven't had time to insert the variables into all of my CSS or to change the defaults to what they are in the screenshot, but you should get the gist of things. I used SimpleCode to encode my code so that you could read it. I assume SimpleCode was created by and is maintained by SimpleBits, but I don't really know. I linked to it from here.

If you're wondering what I've been doing that I'm so busy, I'm preparing to take a group of students to see the pope in NYC, I took on a user manual for a tech company and I'm preparing for an extended trip to Europe.

I hope I hope I hope to find some time to dedicate to my blogs this week, but we'll see how that goes. Until then, get a stovetop espresso machine: it's cheap, it's caffeine, and with a lot of milk and even more sugar, it doesn't taste too much like coffee.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

 <head>

   <b:include data='blog' name='all-head-content'/>

   <title><data:blog.pageTitle/></title>

   <b:skin><![CDATA[

/*

* Variable definitions
* ====================

 <Variable name="mainBgColor" description="Page Background Color"
           type="color" default="#ffffff"  / value="#ffffff">
 <Variable name="mainTextColor" description="Text Color"
           type="color" default="#000000" / value="#000000">
 <Variable name="headerBgColor" description="Header Background Color"
           type="color" default="#d2ec9b" / value="#d2ec9b">
 <Variable name="titleBgColor" description="Blog Title Background Color"
           type="color" default="#ffffff" / value="#ffffff">
 <Variable name="titleColor" description="Blog Title Color"
           type="color" default="#000000"/ value="#000000">
 <Variable name="descriptionBgColor" description="Description Background Color"
           type="color" default="#ffffff" / value="#ffffff">
 <Variable name="descriptionColor" description="Blog Description Color"
           type="color" default="#000000" / value="#000000">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#777777" / value="#777777">
 <Variable name="postTitleColor" description="Post Title Color"
           type="color" default="#555555" / value="#555555">
 <Variable name="postTitleBgColor" description="Post Title Background Color"
           type="color" default="#ffffff" / value="#ffffff">
 <Variable name="postFooterColor" description="Post Footer Color"
           type="color" default="#444444" / value="#444444">
 <Variable name="mainLinkColor" description="Link Color"
           type="color" default="#de7008" / value="#0066CC">
 <Variable name="mainVisitedLinkColor" description="Visited Link Color"
           type="color" default="#e0ad12" / value="#9e5205">
 <Variable name="sidebarTitleColor" description="Sidebar Title Color"
           type="color" default="#000000" / value="#000000">
 <Variable name="sidebarLinkColor" description="Sidebar Link Color"
           type="color" default="#999999" / value="#0066CC">
 <Variable name="sidebarVisitedLinkColor" description="Sidebar Visited Link

Color" type="color" default="#de7008" / value="#de7008">
 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 90% 'Trebuchet MS', Trebuchet,

Verdana, Sans-Serif" / value="normal normal 90% 'Trebuchet MS',

Trebuchet, Verdana, Sans-Serif">
 <Variable name="titleFont" description="Blog Title Font"
           type="font" default="normal bold 266% Verdana, Sans-Serif" /

value="normal bold 266% Verdana, Sans-Serif">
 <Variable name="descriptionFont" description="Blog Description Font"
           type="font" default="normal bold 85% Verdana, Sans-Serif" /

value="normal bold 85% Verdana, Sans-Serif">
 <Variable name="postTitleFont" description="Post Title Font"
           type="font" default="normal bold 110% Verdana, Sans-serif" value="normal

bold 110% Verdana, Sans-serif">
 <Variable name="sidebarTitleFont" description="Sidebar Title Font"
           type="font" default="normal bold 125% Verdana, Sans-Serif" /

value="normal bold 125% Verdana, Sans-Serif">
 <Variable name="startSide" description="Start side in blog language"
           type="automatic" default="left" value="left">
 <Variable name="endSide" description="End side in blog language"
           type="automatic" default="right" value="right">
*/

body {
margin: 0px;
padding: 0px;
background: $mainBgColor;
color: $mainTextColor;
font: $bodyFont;
}

          a {
 color: $mainLinkColor;
}

a:hover {
 color: $mainVisitedLinkColor;
 text-decoration: underline;
}

a:visited {
 color: $mainVisitedLinkColor;
}

a img {
border: 0;
}

@media all {
 div#main-wrapper {
width: 510px;
overflow: hidden;   
float: $startSide;
   padding-$endSide: 15px;
   padding-bottom: 0px;
   padding-$startSide: 0em;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

 div#sidebar-wrapper {
   margin: 0px;
   padding: 0px;
   text-align: $startSide;
 }

 div#sidebar {
width: 235px;
margin-top: 5px;
   float: $startSide;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }
}

#content-wrapper {
 margin: 0 auto 0;
 width: 760px;
}

@media handheld {
 div#main-wrapper {
   float: none;
   width: 90%;
 }

 div#sidebar-wrapper {
   padding-top: 20px;
   padding-$endSide: 1em;
   padding-bottom: 0;
   padding-$startSide: 1em;
   text-align: $startSide;
 }
}

#header-wrapper {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
background: #f3f48b;
color: #000;
}

#header {
margin: 0 auto 0;
padding: 25px;
width: 750px;
border-left: solid 10px #f3f48b;
background: $headerBgColor;
color: $descriptionColor;
}

          .titlewrapper {
padding-left: 215px;
padding-top: 25px;
padding-bottom: 0;
margin-bottom: 0;  
}

h1 a:link {
 color: $titleColor;
}

h1 a:visited {
 color: $titleColor;
}

h1 {
padding: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 490px;
color: $titleColor;
background: $titleBgColor;
font: $titleFont;
}

      .description {
padding: 5px;
margin: 0px;
width: 365px;
font: normal bold 85% Verdana, Sans-Serif;
color: $descriptionColor;
background: $descriptionBgColor;
font: $descriptionFont;
}

.descriptionwrapper {
padding-top: 0px;
padding-left: 325px;
margin-top: 0px;
}

h3 {
 margin-top: 0px;
 margin-$endSide: 15px;
 margin-bottom: 0px;
 margin-$startSide: 15px;
 padding-top: 8px;
 padding-$endSide: 10px;
 padding-bottom: 20x;
 padding-$startSide: 10px;
 color: $postTitleColor;
 background: $postTitleBgColor;
 font: $postTitleFont;
}

h3.post-title a,
h3.post-title a:visited {
 color: $postTitleColor;
}  

      h2.date-header {
 padding-top: 0px;
 padding-$endSide: 0px;
 padding-bottom: 0px;
 padding-$startSide: 2%;
 color: $dateHeaderColor;
 font-size: 90%;
 text-align: $startSide;
}

#sidebar h2 {
 padding-top: 10px;
 padding-$endSide: 10px;
 padding-bottom: 0px;
 padding-$startSide: 10px;
 margin: 0px;
 color: $sidebarTitleColor;
 font: $sidebarTitleFont;
 background: #fff;
}

#sidebar .widget {
clear: both;
padding: 10px;
margin-bottom: 15px;
background: #c48bf4;
}      

#sidebar ul {
 list-style-type: none;
 font-size: 95%;
 margin-top: 0;
}

#sidebar li {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 font-size: 105%;
}

#Image1 {
 text-align: center;
}

#Image1 img {
 border: #000 solid 1px;
}

.Blog {
 margin-top: 20px;
}          

.blog-posts, .feed-links {
 margin-$startSide: 2%;
}

.feed-links {
 clear: both;
 line-height: 2.5em;
}

.post {
margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 100%;
background: #8b95f4;
}

.post-body {
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 0;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
background: #fff;
}

          .post strong {
 font-weight: bold;
}

#sidebar a {
 text-decoration: none;
}

          #sidebar a:link,
#sidebar a:visited {
 color: $sidebarLinkColor;
}

          #sidebar a:active,
#sidebar a:hover {
 color: $sidebarVisitedLinkColor;
}

          pre,code,strike {
 color: #666666;
}

          .post-footer {
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
margin-left: 15px;
background: #fff;
 color: $postFooterColor;
 font-size: 80%;
border-bottom: solid 1px #8b95f4;
}

                      #comments {
 padding-top: 2px;
 padding-$endSide: 0px;
 padding-bottom: 2px;
 padding-$startSide: 5px;
 font-size: 110%;
 font-weight: bold;
 font-family: Verdana,Sans-Serif;
}

.comment-author {
 margin-top: 20px;
}

          .comment-body {
 margin-top: 10px;
 font-size: 100%;
 font-weight: normal;
 color: black;
}

.comment-footer {
 padding: 0px;
 margin-bottom: 20px;
 color: $postFooterColor;
 font-size: 80%;
 font-weight: normal;
 display: inline;
 margin-$endSide: 10px;
}
        
.deleted-comment {
 font-style: italic;
 color: gray;
}
                  
.comment-link {
 margin-$startSide: .6em;
}

/* Profile
----------------------------------------------- */
.profile-textblock {
 clear: both;
 margin-$startSide: 0;
}

.profile-img {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 5px;
margin-$startSide: 5px;
float: $endSide;
}

.BlogArchive #ArchiveList {
float: $endSide;
}

.widget-content {
padding: 10px;
margin: 0px;
}

#sidebar .widget {
clear: both;
margin-bottom: 15px;
background: #fff;
border: solid 10px #c48bf4;
}

#blog-pager-newer-link {
 float: $startSide;
}

.blog-pager-older-link {
 float: $endSide;
}

.blog-pager { 
 text-align: center;
}

.clear {
 clear: both;
}

/** Tweaks for layout editor mode */
body#layout #outer-wrapper {
margin-top: 10px;
}

]]></b:skin>
 </head>

 <body>
 <div id='outer-wrapper'><div id='wrap2'>

   <!-- skip links for text browsers -->

   <span id='skiplinks' style='display:none;'>
     <a href='#main'>skip to main </a> |
     <a href='#sidebar'>skip to sidebar</a>
   </span>

   <div id='header-wrapper'>
     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design-Err (Header)' type='Header'/>
</b:section>
   </div>

   <div id='content-wrapper'>

     <div id='crosscol-wrapper' style='text-align:center'>
       <b:section class='crosscol' id='crosscol' showaddelement='no'/>
     </div>

     <div id='main-wrapper'>
       <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
     </div>

     <div id='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
     </div>

     <!-- spacer for skins that want sidebar and main to be the same height-->
     <div class='clear'> </div>

   </div> <!-- end content-wrapper -->
 </div></div> <!-- end outer-wrapper -->
</body>
</html>

Just a little bit longer

2008-04-03T10:37:00.000-07:00

And I'll be back. We went to visit my husband's sister's families this last weekend and I took on a part time job writing a tech manual. Life just hasn't been the same since. Hopefully I'll be back under control (or what passes for control) by next week.

Wish me luck. ;)

Problem Solved - sort of

2008-03-26T18:02:00.000-07:00

I finally started checking the code in my other blog templates with this code to look for differences, but there were none that could result in this issue. Then I compared all of my settings, and actually changed the template. All to no avail - I still had the darned transparent style that wouldn't go away.

Finally a flash of brilliant light shown around me, and I thought to myself, maybe it's the background image I put in my header. Once that was gone, so was the transparent setting. Now I just need to find a place to store the background image so I can put it in the CSS where it belongs.

At least the mystery is solved and I can get on with my life. I recommend you do the same. Until next time - an ice cold glass of water might help you lose weight, but only if you're shooting for a pound a year.

Taste the Rainbow*

2008-03-25T19:53:00.001-07:00

Well, so far I've gotten most of the changes and edits I wanted accomplished accomplished, but I've got one little snag: the title background - for some reason there's a style associated with it that is automatically setting the background to transparent. I have no idea where that style is coming from. I think, however, that I'll probably be able to solve the problem by getting rid of the chaff if you will. Let me explain how I put this setup together, and you'll probably see what I mean.

As I mentioned in a previous post, in order to make sure my CSS works with Blogger, I have to use the correct ID and class tags. To do that, I did two things. First, in order to manipulate the CSS and see the results of my changes, I opened my blog, right clicked in the middle of the page (yah, that's like squiggly thingy+click for you Apple peeps) and selected View Source (in Firefox). I then proceeded to copy and paste that into Notepad++ (definitely my favorite free editor thus far) for editing.

Once I got things straightened out in that department, I moved onto the second part - moving those changes into the actual template. To do that, I copy and pasted the template from the Edit HTML tab in the Layout settings tab into Notepad++ where I shifted data over to the appropriate locations. In most places I left the variable information (that stuff with the dollar signs), deleted what was not contained in my code and added what I had done. There were some things that I didn't really care about changing such as the formatting for the blog archive, so I left them as well.

As you can see, large segments of the code still belong to someone else. I'm guessing that my transparency problem has to do with that, but I'm not really that interested in finding out what the little secret is. OK, so I'd like to know it, but I'm not stubborn enough to figure it out. That being said, I do have a method for solving the problem - rewrite all the code. This will be fairly time consuming, and I will very likely not complete it before next Thursday, but it will definitely be worthwhile to come up with something that does what I want it to do rather than things I don't expect it to do. Who knows what else lurks beneath that seemingly placid and cooperative exterior?

I'll also try to come up with a way of displaying my code without having a scare-everybody-away-under-construction design. This should be a valuable lesson for you - if you're making huge changes to your site, don't slap an under-construction sign up and let your new and old visitors alike leave frustrated - continue maintaining the old website while building the new. Otherwise, your visitors may leave and never come back. I think this also goes for people who are really gung-ho about getting their new website up and then put links to pages that say, "Content Coming Soon". I'm not coming back to check out that link, and I'm not impressed by links that don't go anywhere. I'm going to leave your website frustrated and disinterested. Links should provide further information, not road blocks.

Until next time, enjoy the rainbow that is now my blog. You might grab some Skittles** while you're at it.

*This title is only barely related to the article, and I know it.
**I don't like Skittles.

Not an especially good idea..

2008-03-22T17:36:00.001-07:00

considering how unattractive it is, but it gives you the ability to see my CSS. Keep in mind that this isn't the usual CSS - I kept the variables so that if I randomly felt like changing things that way, I could. I'm not sure I've got all of them right, but I'm REALLY hungry, and my husband is on his way home, so it's time to make dinner! Whoohoo!

I'll be editing this post*, so if you read it, and it's still only two paragraphs, check it out later - I'm going to tell you how I did it. (Yah, and ignore the weirdness that's going on with the date-header in IE6 - I have no idea what it's doing in 7.)

*You've probably noticed by now that this post hasn't been changed yet. Since I'm a couple days behind, I'm just going to leave it as is and continue in another post.

Progress

2008-03-22T13:51:00.001-07:00

I was finally able to start coding my base CSS today. I'm not sure how to show you what I've gotten so far, but I wanted to check in to say that I'm getting there and when I have a little more time this coming week, I'll make the code available so you can see what's going on.

The Building Blocks

2008-03-16T18:08:00.000-07:00

I've been a bit busy this last week - a friend who graduated last year came into town for a visit, so we were all busy keeping him entertained. Or at least attempting it.

In the between times, I put together a graphic frame for my blogs so that I can code my basic CSS to fit it. This will help in a few ways. One, it sets up my information architecture so that I know what elements require visual emphasis by way of importance to the audience and the client (me). Two, it will give me a "rule" of sorts to work with when I sit down to do the graphics and the content (sort of like the rules governing an essay). And three, it gives me a visual to use when I'm coding, rather than trying to code directly from what's in my head. I realize it's not much different than most blogs, so it may seem a bit unnecessary, but it's an important step for anyone who is designing a website from scratch. I'll use this technique when I go to design my actual website, and you'll probably be able to better understand why it's important then.

As you can see, I've marked out what I expect to be my dimensions for each container. I'm going to code these big blocks first, and once that's done, I'll fill in the little bits and pieces such as the timestamp, comment info, etc. None of these will be styled other than to have the appropriate tags. That means it will be very, very not pretty when it first comes out.

I also have to admit that I sort of like the color scheme, so I might have to try to use it in a template or something at a later date.

I'll code both the CSS and XHTML for this outline, and maybe if I'm feeling a little insane, put it up in place of the current template. Just as a little reminder, since this code has to work in conjunction with somebody else's code, I'll be grabbing tag names from Blogger's templates. Until I return, safe journeys on the road of life and a blessed Holy Week.

A few more preliminary thoughts

2008-03-06T18:59:00.000-08:00

I haven't had much luck devoting time to design ideas, but I've had a few today, so we'll see where that leads.

I'm still having troubles with this unity thing, so I'm pretty much ignoring it for now.

I've thought up a few ideas rather than simply themes for my blogs.

The biggest difficulty is WakinHrs since it really doesn't have a specific purpose. At the same time the content doesn't really suggest a specific feel. I'm thinking something variable, actually I'm thinking something variable for both it and Betwixt Mine Ears. I'd say that WakinHrs presents a lot of my serious-ish personality but periodically throws in a little bit of the lighter side. I'm not sure if it's possible, but it would be awesome if I could develop two themes - one for the serious side of things and one for the less serious side of things. Of course, I'm never formal, or at least I try not to be (which is why I'm so stiff in formal situations), so it'd be something akin to nice jeans (washed as opposed to the baggy ones that I've worn for a week without washing) and a sports coat - no tie (I hate when women wear ties) vs my old pale and getting paler jeans that once were blue but have been washed too many times for that and now I can't wear them in public because the holes are in the wrong places and a t-shirt that says something relating to my days with the Catholic Student Association back at Tech (I had nothing to do with that website and will some day mail them a cd with a decent one).

Along those same lines, I'm thinking something really informal for Betwixt Mine Ears like beaches, sunglasses and giant umbrellas. Sort of like writing poetry while enjoying a margarita in some place I've never been with blue water and sandy beaches (as opposed to the brownish-green and pebbly-hurt-your-feet beaches we have in many places in Texas).

As for Design-Err, it might be cool to do a Photoshop/InDesign type theme with a background image covered by my gadgets with desk icons and silly stuff like that. It could definitely be neat, but I'm not sure it would be as pretend professional as I'd like. I'm thinking something very minimalist, but not without the decor that makes a person enjoy a site.

Those sound like good beginnings for my designs, but I need something unifying about them or some elements that I can use within them to make it clear that they're the same but not the same all at the same time. =)

There's a possibility of forcing each design into the exact same shape - so that my gadgets, posts, headers, images, etc. all possess the same outline, though not the same content. That could be an interesting design exercise. I could also try to create a logo, but I'm not sure I'm ready to do that just yet. Actually, if I try to use the exact same outline, it means I only need to do the skeletal CSS and XHTML once and I could have as many variations as I wanted by using Javascript to swap CSS templates. That would be pretty stinkin' cool. Another option would be to utilize the same color scheme, but that would destroy the moods that I'm trying to create.

I really like the concept of creating one skeleton and then fleshing it out in lots of different way like they've done over at CSS Zen Garden (there are some insanely beautiful designs there, there are also some ho-hum ones, but oh well).

That's it for tonight. I'll sleep on these thoughts for a few days and see what we come up with. Hopefully I'll have a line drawing and maybe even some code available next time. Until then, sleep well, get up, drink your coffee and go to work. By the way, if you're ever in need of a little inspiration, take a trot over to Design Meltdown and check out some of the sites Patrick McNeil has accumulated.

A few preliminary thoughts

2008-03-03T14:02:00.000-08:00

The most immediately catching word from my questionnaire is babblerific. It's so personality laden that I immediately have a few ideas about what it means. Upon further reflection, however, babblerific probably doesn't describe the content of my blogs very well. It suggests content that is a little more spontaneous, excited and funny than what I've been writing and that definitely means I need a different look and feel. When designing for a client, you want to ask them what they mean by non-definitive, but highly evocative phrases before you return something ridiculously irrelevant to their company.

My design ideas:

The design theme I first considered revolved around collegiate babble - the sort of thing some of the most brilliant professors do from time to time. These professors are interested in teaching and conveying ideas, but they've got so much in their brains that it doesn't always come out clearly. Like their offices, which are a highly organized clutter, I'd like my blogs to have a little of the cluttered feel, but I want my users to be able to find everything they need as though it were their own clutter rather than mine. I'm somewhat taken by the idea of rooms in a professor's house - the sunroom for Betwixt Mine Ears, the office for Design-Err and the study for WakinHrs.

Since I'm trying to convey my personality as it is coming out on the blogs, I think something of the mismatch might be appropriate. I'm imagining my own place where I have some nice furniture my dad bought me, a used loveseat we bought from some college kids, a sword my husband bought in Spain, crosses we were given when we married, a big elephant Beanie Baby my mom gave me, and essentially a bunch of other stuff that doesn't go together in any really coherent theme. Somehow, though, I don't think my living room is actually that mismatched - everything kind of goes together in the arrangement it's in and I don't feel like your eyes move from one item to another in surprise to find such an object in the presence of the other objects.

There's also the mismatch of the afghan blanket my grandma made me when I got married - my husband and I picked out the colors, which looked pretty good in the store (ok, I never really liked the marigold) but pretty odd in the blanket. Even though most people look at it and think, wow, what an ugly blanket, I've grown rather fond of it and am somewhat partial to its odd color scheme. But I'm not certain I want to subject my visitors to something which is immediately unappealing and ask that they give it the time to grow on them.

The more I think about it, however, the more I think these themes, especially the latter two really only fit Betwixt Mine Ears, but not this blog. While Design-Err is informal and subject to my whims, it's also much more business like and education oriented. It's more the classroom with the professor who doesn't have an agenda but still attempts to teach than that of the professor who doesn't have an agenda but still manages to say interesting things (even if they're only interesting because they don't quite make sense).

I think what I'm discovering is the uniqueness of each blog - the personality each one needs to stand on its own, but I'm missing the underlying unity to bring them all together. I'll spend some more time coming up with ways these blogs are unique as well as work on coming up with a believable theory for unity upon which to base the unique themes.

It's time to design

2008-03-02T20:12:00.001-08:00

As I said a few posts ago, I think I need to redesign all of my blogs completely so I can get a look that I really like - one that suits the personality of each individual blog while still reflecting some sort of unity between the three and respecting the needs of the disabled. Generally speaking, in design (not InDesign - hahahahaha) the needs and interests of the audience should be heavily weighted in making plans, especially where architecture is concerned. I'd say that I'm not going to do much better than the blog originators have done at providing a useful layout. I will, however, keep in mind user interests when considering where to place different gadgets within the page.

Let's get started by gathering the information I need to start designing. I'll use a pared down list of questions that I would give to clients before designing a website.

What is the mission of your blogs?
To spread my babblerific ideas through individual forums pertinent to three of my interests - creative writing, babbling and web design.

How will these blogs support your mission?
They provide the forum for the spread of babblerific ideas as well as provide the impetus for improving my skills at each of these three interests.

What are your two or three most important goals for the site?
Eye candy, interesting babble, practice

Who is the primary audience for the Web site?
There are several - designers who want to laugh at me, designers looking for tips (Design-Err), people looking for interesting short stories and creative writing (Betwixt Mine Ears) and friends of mine (all three).

What do you want the audience to think or do after having visited your site?
In no particular order: laugh, cry, design a better site, ask me to design a site, become Catholic, be a better Catholic, think a little bit and visit the blogs of more interesting people that will soon appear (the blogs, not the people).

What Web-related strategies will you use to achieve those goals?
Eventually, each blog will link to my website, I'll write stuff that people think is interesting or will think about, I'll use unique designs that are reflective of their written content without overpowering and overshadowing the written content and add a list of blogs of interesting people.

What specifically do you want the site to contain?
Babblerific ideas! interesting, standards compliant, user-friendly design

Do you have any special features you want included in the design?
I want all three blogs to be unique but united (kinda like the Catholic Church - many cultures, one people). It should be obvious to someone visiting all three that they're part of a bigger babblerific whole (me!).

How will you measure the success of your site?
Someday somebody who isn't already a friend of mine will comment and say it looks nice. I'll also see whether or not anybody contacts me to design their site, if my skills in my three babblerific fields of interest improve and if I ever get a job writing something neat.

How will you adequately maintain the finished site?
It's me it's me!

What type of content do you want on the various pages? Briefly describe the purpose or content of each page (one or two sentences max).
WakinHrs: blogs to friends, interesting Catholics, interesting other people, babblerific ideas by me, profile, photo
Design-Err: good web design tools and sites, helpful screenshots, blogs to interesting design people, babblerific design ideas by me, profile, photo, contact info
Betwixt Mine Ears: random stuff from my bookmarks folder, babblerific stories, profile, photo, copyright stuff

All of that means I have some thinking and some doodling and some gray matter work to do. Next time I come in, I'll talk about a few ideas I've had (and discarded) and report on my progress toward three unique and unified designs.

IE's "Bigness"

2008-02-24T17:35:00.000-08:00

Just a little sidenote - IE looks big because it's default font size (or at least what I had it set on) is about 3 times the default size (normal) on Firefox. That's got to be the quickest fix I've ever implemented.

On second thought

2008-02-24T16:29:00.001-08:00

I think the concept of Design-Err should be rethought a bit. After "stumbling upon" (that's a website or something, you know) a number of blogs and sites with self-references to changes that nobody but a regular would ever notice, it has occurred to me to reconsider describing changes to multiple blogs and a website which are likely to be unfamiliar to new readers and may or may not be of interest to old readers (if such a group can be said to exist on a two-month old blog).

That being said, I'll probably take some time to consider how to implement the original goal: displaying design changes as they become necessary or desirable along with the changes made in design plans as they are worked out or thought through. I think such a display only makes sense if it includes visual content, and right now, the only visual content I'm able to provide is the final outcome of my work, rather than the progress.

This might be solved simply by uploading screenshots as I go through the work or I might use some personal webspace to house old versions for my readers' perusal. Either way, change is acomin' so be on the lookout.

Color-blind Fix II

2008-02-18T15:11:00.000-08:00

Last time I said I would fix the broken layout for Betwixt Mine Ears in IE this time, but I think I should do something about the silly colored fonts in all three of my blog layouts. Some of the color choices are difficult to read for people who AREN'T color blind, so I can't imagine them being helpful for people like my husband who have difficulty with shades.

We'll start with this one where all the links are orange. This wouldn't be such a poor choice if orange weren't so much like yellow and that didn't seem so much like white which is the color of my background. Blogger has a nifty way to change your fonts and colors, so I'm going to check that out since I've never used it before. Otherwise, we could make all these changes ourselves through the CSS.

The tool is ok for quick fixes and nothing particularly fancy, so for our purposes, it's almost sufficient. But now that my colors are darker, they don't stand out from the rest of the text as well as they did previously. To solve that problem, I'm going to revert back to the original underscored link by editing my CSS to remove the text-decoration: none tag.

That makes my life easier, and hopefully it's helpful for anyone who has difficulty distinguishing between colors. I also added a description to Design-Err. I hope you like it. =)

The only huge problem I have with Betwixt Mine Ears is the dates - using a font color that's practically the same color as your background is just plain silly. Yes, they match very well, but yes, they are also harder to read for everyone and their dog. I'll just pulled the sidebar color into the Date Header Color, and I think that'll work - it doesn't attract undo attention from the title of the post, but it's definitely legible.

Finally, WakinHrs isn't bad except for the text in the sidebar which is just a little too light to be easy on the eyes, and as I've said before (and really, I'm only repeating other more knowledgeable people), if you have text, you don't want to discourage people from reading it by making it painful to do so.

I've darkened that font to create more contrast, and now I'm all wrapped up for the day.

I'll be seein' ya' 'round the corner.

Color-blind Fix

2008-02-12T17:58:00.000-08:00

I received a complaint a while back (probably a few months ago) that WakinHrs was too hard to read. I wasn't able to fix the problems immediately, but that is my goal for this evening. To start things off, I thought I'd learn a bit more about the problems and solutions involved in designing for a color blind audience. Doing that brought me to a great article on the Digital Web Magazine. Reading the comments brought me a totally nifty little tool for testing the appearance of websites according to the three most common forms of color-blindness.

I ran the program on my blog in each form of color-blindness and the black and white weren't blurred to the extent that they were significantly more difficult to read than usual. I'm not entirely certain what to make of that, but I do think white on black is a little hard to read, so for the sake of my readers and anyone who can't read white on black, I'm changing my color scheme just for you.

Black on white is the easiest to read, but some folks have their monitor displays turned up insanely high (myself included) so that reading black on white on a monitor can also become tiring. I'd like to try something a little less visually taxing without creating something puky. I put a light blue border around some of my boxes, so let's see how that color works as a box itself. I'm not sure what it's going to look like since there's so darn little of it to look at now.

That's interesting. And that's about all I can say about that. It almost works, but there's something missing. I think I need some padding and another frame so that it makes better sense within the look for the rest of the page. That having been done, it does look a lot better. But I think I don't like it. Maybe yellow will do the trick.

**I would like to take this moment to say, "Thank you Blogger for auto-saving my work so that when I randomly, accidentally close my window, my post still exists."**

The yellow worked, but it requires that I change all the other colors on my page. Let's just see how black on white works. This is going to sound really weird, but it looks like my white is kind of yellow... That's an interesting visual trick, and it kind of works, but I think the entire color scheme of this site is going to have to be changed. If I'm going to do that, I'm going to pick a layout that I want to be in color.

Actually, I should really just design my own blogger layout and scheme that looks just the way I want it, sort of the way I did for Calvert House. Granted it's not really a blog, but it serves our current purposes. Also, if you drill all the way to Calvert's website, please DO NOT blame me for the code. Feel free to blame me for it looking better than it did, but don't blame me for too much. I inherited it, and it wasn't pretty when I got it. I should design a new website for them as well.

With that said, my temporary solution is a new template. I, of course, had to fix the profile image, but I also changed the spacing in my post titles. The font of choice is naturally too close together, making the text difficult to read and, in my opinion, sloppy looking. CSS is a great thing.

That's it for now. As the last post said, next time, I'll do something about the broken layout on Betwixt Mine Ears. After that, I'll learn a bit more about IE's "bigness".

Until then, ya'll come back now.

Quick photo fix

2008-02-09T15:09:00.000-08:00

I want to accomplish two things in this post - one is to put a border around my photos that need them (who doesn't do that to begin with???) and the other is to figure out a better placement for the photo on this blog. I'm thinking centered, but maybe right-aligned. We'll see.

It looks like I just need borders on Betwixt Mine Ears and Design-Err. A quick border in Gimp, an upload in Page Elements, and we're all done. But, you know what? I'm going to try something crazy. There's an id tag in my code called Image1 that refers to my photo in the sidebar. I'm going to try putting a CSS border in my code for that id. That was a complete disappointment - it put a border all the way around the widget, not around the photo. Let's try a CSS border for the nested img tags of Image1. Awesome! I now have the border without having to edit my photo in Gimp. Within the Image1 id tag (not the img tag though), I also aligned the text to the center to produce the desired effect, and just like that, I'm all done.

Betwixt Mine Ears is going to be a bit more difficult just because I was lazy when I put that in. Learn a lesson, kids: never ever be lazy - you'll just have to redo it later down the road. I reshrunk my original photo to the appropriate size and uploaded it. For a moment, it will be dreadful, but soon, we'll add the CSS to put some padding and what not in all the right places. Perfect. I'll save my changes, check it out in IE 7 (I refuse to restart my other laptop to check this out in IE less than 7). *a few moments go by* Ok ok ok. I have to check it in IE less than 7 because they didn't get the padding right I'm sure and it has great potential to be dreadful if it's not right! *sigh*

Great! That fix worked fine in IE 7, but now it turns out that the design itself was already broken in IE 7! I am so annoyed about that.

Oh wait. Hah! I just ran IE on my other laptop - it's the one with IE 7 on it! And it looks "fine" in IE 7. Just big. Everything looks big in IE. Why is that? It's so weird. And the layout is broken in IE less than 7 on this laptop. I guess I'll fix that after I make WakinHrs a little more friendly to the color blind community. Maybe I'll do some research after that and fix my code so it doesn't look "big" in IE.

Until next time, prop your feet up, toss back a mocha and do something crazy - code!

Improving Lines

2008-02-04T18:07:00.000-08:00

From a visual perspective, the layout on this template is neat, and it conveys a little bit of the personality that I would like it to illicit when all is said and done.

From a user perspective, however, it's a bit annoying. Generally speaking, text that's more than a few inches in length is tiring for the eyes because they actually have to move in order to take in the entire line. When the eyes are tired, they take in still less text and must move even more. On my machine, where practically the only program I run without being fully maximized is the Gimp, the post text is 6 or 7 inches in length! I appreciate the fact that my posts look shorter, and therefore more readable, and I appreciate that I have less white space on my screen, BUT sometimes web design should be more concerned with the overall user experience than the overall designer's experience. That being said, I'm going to give the wrapper containing these sections a max width of 800px which has pretty much become the standard. At some point, I might throw in some photos or something along the edges, but that's a decision for later down the road. Right now I want this to be a pleasant experience for the reader.

Readability on this design gets worse when the reader goes for the profile information on the right which is unbelievably right-aligned! I really like the uniqueness of right-aligned text - it's a surprise, a little refreshing, a little squirrely, a little poetic, etc., but it's just really darn hard to read without going cross-eyed. I really like it's look on this blog, because it's a bit more like me - not really all that with it, BUT it's not nice to do that to your readers unless you ARE writing poetry, or you're only using a little bit of it. My profile is too prosy for that, so I'm going to switch it to left-aligned. At some point, I'll need to find a way to convey what I want to convey via a means that doesn't distance the user from the experience by making him wear out his eyes.

The easiest way for me to figure things out in this code is to go to the HTML for the posts and check out the tags that surround it to find the one that is most suitable for controlling the width of these widgets. I expect either a wrapper that I can use to shrink both down to 800px as though that were how wide my window is (allowing whatever percentages are already in place to remain) or two tags for both the left and right that will need to be manipulated.

I'm going to guess that the content-wrapper will suffice. Let's check it out... I'll change the current margin setting to margin: 0 auto 0; and add width: 800px; and that should do it. Hit preview, and it's perfect. Of course, who knows what IE will do with it! ;)

Next up is the justification of my text. This should be equally simple, and I can go to pretty much the same place in the HTML to get the right id. I just removed the entire text-align line and hit preview. The result is what I wanted, but I don't like how close my margins are.

I'm also noticing that my browser is creating a scroll-bar at the bottom, that means the 800px is too big. I should have thought about that - with the right scroll bar in place, part of my page real estate is being taken up, so we need to compensate for that. I'll just deduct 20px and see how that checks out. Actually, I'm not appreciating the fact that there's a 20-30px margin on the left that isn't happening on the right. I'm nuts about balance, and that simply is never going to be balanced without compensation on the right. I'm making lots of minor tweaks in the code to save space here and there, shrink the left margin a bit and find a right margin, so I'll spare you those details.

For some reason I can't fathom, I have a little spacer on the right when my window is minimized that didn't appear until I started tweaking, so I'm going to undo everything I did, and start over slowly to see what causes it to appear.

It's good that I started over because I thought through what I needed to do a little more clearly and achieved the correct results with only 4 or 5 changes in the code. Imagine that. ;) Those changes were to the content-wrapper (width and margin) , sidebar-wrapper (text-align and float) and main-wrapper (padding).

I also increased the padding between my sections since they were crowded once they were no longer opposite aligned.

The last thing I want to do is fix my photo since it's now left-aligned, but I'll save that for later in the week. For now, it's almost bedtime. =)

Next up - Google Analytics

2008-01-30T14:34:00.000-08:00

After making my relatively unsupported statement about nobody reading my WakinHrs blog, I decided I should go ahead and startup Google Analytics on my blogs to see how things are going and check if we have any lurkers (I hope I hope I hope).

So, I checked to see if there was an automatic way to do this via blogger, but I didn't find one, so I just clicked on their link for Google Analytics, signed into my account, and now I'm adding three separate profiles for new domains for each of my blogs and copying and pasting that code at the bottom. Should be easy enough...

Per the instructions, I am, of course, inserting the code directly above my closing body tag. Unfortunately I don't really know what the difference is between the legacy code and the new tracking code. I assume this has something to do with them making a new tracking system with new code to track new stuff and some people are still using the old code and don't want to switch because it will ruin all of their data, so they provide both. I'm going with the new code 'cuz newer is better. Sometimes.

Everything is copy and pasted, now I just have to see about confirming everything. Betwixt Mine Ears is go, Design-Err is go, and WakinHrs is go. Groovy. No hiccups at all! Now I just have to wait for data to analyze!

Have a good night and good luck staying awake through the Super Bowl!

We're gone get dis right.

2008-01-28T17:07:00.000-08:00

After a miserably failed attempt at changing my photos, I'm back for more! This time, I have a plan. And that plan involves using CSS templates as opposed to XML templates. I did, however, add "learn XML" to my to-do list. Or at least I plan on adding it...

At any rate, back to where we left off.

This time, I'm going to just view the source code within Firefox and use the preview function on the edit html page for Blogger. In order to figure out precisely where the photo originally goes, I'm going to turn my photo back on. That should identify the most readily acceptable location.

Ok, so Blogger has changed a lot since I made my first blog (WakinHrs) a couple years ago. They've got these widget things that you can't really edit. I'm a little disappointed by that since I really want to position my photo within my profile, but I can get it pretty close by going into the page elements and adding the appropriate element and placing it above the About Me section. I think I'm also going to move my archive below everything.

Well, that was a lot easier than I was expecting, but also a bit less satisfying from a design control aspect. I guess I can't complain too much - it's a free service, a pretty service and a user friendly service...

I'll sign off now and add photos to my other blogs. In the meantime, have a good time and I'll see ya' around the bend!

*Edit: It turns out that the template I'm using on one of my other blogs isn't really properly suited for adding the photo widget - it kept smashing my photo against the top and right sides of the side bar. I would have liked to have done a simple edit on the CSS for this, but since it's a widget, that's code I can't get at. In order to solve the problem, I added 20px of padding to the top and the right sides of my photo, using the same color as the background to fill in my padding. That seems to have worked nicely, and I do believe things look pretty darn decent now. =)

**Edit2: Oh boy oh boy! My first blog doesn't have widgets! That means I can add a div for my photo, give it an id of my own description in CSS and go about my business slap happily. So, let's go at this the way I was first suggesting - add my photo, check the view source real quick, and then remove the photo before someone sees it! Yeah yeah, I know that's not the high quality way of doing things, but I don't think anybody really reads that blog. =)

I'm going to test this to make sure I've located the right place by inserting <div>Howdy!</div> to see where it appears when I hit preview. It looks like the only options available to me with that route are above the words About Me and below the profile. That's the same options I got with the layout. Woe is me! I want more power!

How's about something cheeky? I'll try adding my photo as a background to the class for "sidebar-title" and giving it enough height to show the photo and keep "About Me" just above it.

Alas, as I was searching for the CSS for sidebar-title, I made a rather disappointing discovery - that class is used multiple times. I could do a workaround, but at that point I would be so far astray of anything bearing the remotest resemblance to good web standards, that it's not worthwhile. So I'll just toss my photo in above the About Me the same as it is on the other blogs and call it a day. While I'm at it, I'll also removed all the external links on that blog while I was messing with the code.

First things first

2008-01-22T16:46:00.001-08:00

We need an appropriate photo representation of me. The problem, however, is that I have multiple blogs, each of which has its own unique character. Well, one of them lacks any character whatsoever, but two of them have a bit at least.

So we're going to hit three birds with one stone. Or at least we're going to hit them in the same sitting. No killing this time - my blogs will still not be satisfactorily customized.

Here are my photos:

So the first thing I need to do is turn off the option that adds my photos to my blog automatically. That's done by editing my User Profile and removing the image (it's not like it was of me anyways).

Next, I'll need to take a looksie at the CSS governing my pages. I'll start with this one just because I want to. I'll go back out to the dashboard, click settings on this blog, click the Template tab and then Edit HTML. Now, the easiest way to scope this out is with a bigger window than Blogger provides. I'm going to use my preferred editor for Windows: Notepad++.

Ok. So now I have to read somebody else's code. Fortunately the people who designed these at least thought about the fact that other people might want to read them. What I'm looking for is something that sounds related to the side bar on my blog like the about me section. Ahhh, there it is.

But what’s all that weird stuff that I don't understand???

I guess this is the point where I come to the sad realization that I don't know what language this is written in. I'm going to pretend to be real smart and take a guess that it's XML since Windows wanted to open the file in XML Editor (not to mention that’s what it says at the top of the page!). Since I don't know what's going on exactly, I'm going to try the guess, test and revise method (this is how I edited an old template before I knew what CSS was). Let's try plugging a photo into line 868 where it says src='data:photo.url'.

Apparently that didn't work.

I got an error page instead. So, now that that was a complete failure, I'm going to go over to the edit template page and copy and paste that code because it looks shorter. For the sake of testing things out, being adventurous and not wanting to spend THAT much time on this, I'll just see if it actually runs for me...

And it's just as I feared... This is not going to work.

So. Now I’ve wasted a good hour and a half pretending to be productive while I IMed, it seems that it might behoove me to cruise the other templates lying about to see if any others might be of a more cooperative nature. Herbert seems to have lots of pretty <div> tags to make me happy, so we’ll switch over and finish this another time.

Until then, don’t drink and code. Unless it’s coffee.

This is a bad idea

2008-01-21T20:20:00.000-08:00

Thousands of blogs and websites are dedicated to web design. A good chunk of them provide meaningful advice on how to prepare for the design of a website, how to design the architecture, visual layout, user interface, etc. of the website in an aesthetically pleasing manner, how to code the website, how to test the website, how to put the website online, etc. etc. etc.

I'm here to do something a tiny bit different. I'm going to do all this while you watch, starting with this blog. You'll see me screw up and rethink the design. You'll watch me change my mind halfway through the process. You'll marvel at the ridiculousness of my planned workarounds. You'll say, "I told you so," when I give up on my workarounds. In short, you'll watch a design-err at work. During the process, however, you might pick up a few tips and tricks, find a couple of especially helpful websites and learn how not to do things.

If you're lucky, by the time I've mastered this blog and my other two blogs, I'll be prepared to give you a real show with my personal website. After that, the sky's the limit and I'll be prepared to launch a full scale commercially driven website to sell my design-err savvy. Don't worry, you'll get to watch that one too.