Thursday, November 22, 2007

Web Design

Well, in the past few days I have been doing quite a bit of work on setting up various things on the interwebs. The week starts out innocently enough as I post my comic up and decide, "Hmm. You know what, I wonder how easy it is to update the site's look by swapping to another template." So, I opened up the layout tab, BACKUP the site's current configuration, just incase, and start looking through the templates. After a couple tweaks and what-nots, I decide that none of them are close enough to what I want, so I attempt to revert to the original state.

Nope. Blogger starts spitting out some errors, and in desperate attempts to copy-paste and tweak the page back to how it was, I completely destroyed the site's layout. -_- Colors are all different, boxes are where they shouldn't be, and my eyes were bleeding as I stared at my new ugly site. So, I had to do something.

Fortunately for me, I already had my real site designed and awaiting launch. I had a test page setup here, to see how it all looked. Designed in Photoshop, and hand coded by yours truly (with A LOT of help from Mr. Phillips, Justin) I decided that if I was gonna fix the site, I might as well go all out and make it look like it's suppose to.

Tuesday comes, and I'm about 50% with the restorations. After plenty of copy-paste the basic layout of my site is finished, and I had 3 main tasks to setup. My navigation bar, footer, and my Archives page. Navigation bar was already made on my site, but for some reason something was getting messed up. It was probably the heavy Javascript used in the table of links I made, so I had to look for an alternative. CSS is what everyone is using nowadays to make sites. It allows for your website to have a consistent and clean look throughout all your pages. It seemed that navigation bars are also recommended to be designed with CSS, but I wasn't completely sure how. However, after following some links I found a nice program called CSS Horizontal Menu Generator, which as the name implies, generates horizontal menus in CSS. :P

So cool, that's done, and now I have some added rollover effects and everything for my bar. Next came the footer. The footer (and the main post section of the blog) have a nice little Javascript that applies rounded corners to the box. Niftycube was the script, and my previous attempts with it worked out fairly well. Unfortunately, when I tried adding the rounded corners here, the footer was splitting up. I never know why that happens, but as it happened before, I knew what to do. I copy and pasted straight from the example page, and slowly tweaked that second footer into my main footer. Turns out, it was the Paypal button that was ripping open the footer (at least in Internet Explorer and Opera, Firefox looked fine). Oh well, took it out and put it up somewhere better.

Last came the nasty section under my comic, which contains my archives. Blogger has these widgets that you add to your blog. One of them, as you can see on the right of my blog here, is the Archive Widget, which has every year, and month in a neat drop down style menu. In addition to THAT, my comic blog has a small section with the Chapters individually split up as well (A simple list of links). My problem was trying to get these things OFF the main site and into their own page. Unfortunately it seems Blogger does not support widgets in your average post. So it was time to look for some more Javascript that would hopefully be able to hide the section, and toggle it on and off with my Archive button in the navigation bar.

Well, right now I have a working toggle button, unfortunately, the section is NOT hidden on page load, which kind of defies the purpose of the button. >_> Oh well, I'm sure I'll figure something out, but for now I am glad to see the page has come along quite nicely. Now, if only ComicCMS would come out with their new version so I can use my actual site for everything instead of depending on Blogger...;)

No comments: