Tuesday, October 6, 2009

CSS With Mr. Peterson

To learn some CSS in Typography class, we were to edit the HTML in our existing blogs and experiment. I started out by just playing around with colors, and I stuck with this gray/blue/white/purple color scheme. Then I played around with font stacks; my sans serif stack leads with Helvetica (because I assume most computers have it, and I don't like to think of different users seeing different fonts), and my serif stack leads off with Rockwell (which I suppose a lot of PCs wouldn't have).
The first goal I had was to add an image of me in place of the blog title box. So I deleted all the box lines (header wrappers). Then I added my image in "edit header" under the layout section. I then decided that I wanted to make my blog title in Archer Italics, but I couldn't it to work, and also most people (besides designers) probably don't have Archer on their computers. So I pulled my image into photoshop and typed the blog title on it and saved it as a JPEG. Then pasted that into the header, and now everyone can see Archer Italic! The only downside is, I had to replace the actual blog title to "." because it was layering the blog title on top of the image, so I'm not sure if that really works.
My next goal was to make the blog archive fixed to the right side of the screen so it would follow you when you scrolled, and you could go to another month without having to scroll all the way back up the page. To do this, I made the "outer wrapper" a fixed position, and messed around with the percentages of top, bottom, right, and left, before I had it where I wanted it. I also deleted the picture from my profile because I didn't like the way it looked. I also shortened my About Me section, to be more simplistic.
The next thing I wanted to do was make the Blogger navigation bar at the top disappear. I did this by finding the secret hidden nav-bar HTML, and then pasting a transparency HTML code before it, and set the transparency to 0. I thought this looked nice, but I then realized I need that nav-bar to get to my account to make new posts, edit, etc. So I took the transparency up to 10, making it just barely visible.
I also made the links in the blog archive turn white when your cursor rolls over them, and the title of each blog entry turns black when you roll over it.
The last change I made was to make the background image an image of wood. At first I had just a medium gray background, but I wanted to add an image. So I searched my hard drive for suitable images and found this wood image I had downloaded at some point in my life. I thought the color pallet suited the blog very well, and it brightened up the screen from the gray I had before. It also kind of makes it feel like a design studio!

1 comment:

Unknown said...

the new layout looks great! i love the wood background, especially. and that you made sure everyone could see the blog title in archer. font nerd!