7.26.2012

Helpful Design Sites

HTML & CSS is some confusing shit. I always get massive headaches trying to figure things out. Luckily, Google helped me locate these awesome sites that helped me design my blog the way I wanted to. (How long this design will last is the question, however.)
  • Full-screen header/banner: Normally when you go through Blogger’s designer, there’s a limit to which the width of your banner/header can be, and if it’s any longer than it becomes cut off. I really wanted mine to extend the entire page, i.e. be full screen. It took 20 minutes of googling before I found this wonderful tutorial – and the blog happens to a book blog too! What a lucky find, huh? http://smallreview.blogspot.com/2011/08/how-to-make-full-screen-blog-header.html She also has other wonderful tutorials on designing and blogging itself.
     →Note: If your background doesn’t show up after inserting the url into your layout, check the background colors in Design >> Advanced. Blogger can sometimes set a color which can override your background. Just change it to transparent and it should show. I figured that out after about 15 minutes of pulling my hair out.

  • My kick-ass header was created using this tutorial: http://mytutorialplanet.com/PhotoShop/ImageInsideText/imageInsideText.html (note that this tutorial is using Photoshop CS5, but I image you can find similar instructions or do the same actions using GIMP or some other software). The tutorial just uses a regular .jpeg or .png file while mine is a animated .gif. It’s basically the same thing except with a .gif you want to make sure you select all the layers before you clip it.

  • I had a hell of a time getting my columns to have their own image background. Normally, blogger just makes you pick a solid color but I was dead set on getting a canvas-like background for my post and columns. But using this tutorial which explains the different pieces coding in a blogger layout, I figured that if you do the same thing with the header, except adjusting a different piece of coding, you can get a separate layer for the main part of your blog.  Basically, it’s the #main-wrapper part of your layout. Doing the same thing (background: url(“url here”;)), it’ll add the background just to the columns of your blog.

  • This one was the easiest -- took all of 10 seconds to find and apply! A tutorial on how to add a border around your posts:  http://momswhoblog.blogspot.com/2007/07/creating-border-around-posts-and.html
     I'm still debating on whether or not I'll keep my borders but for now I rather like them.

  • Sarah's site is my favorite to browse. She's got so many awesome nerd tips about designing and blogging, not to mention her adventures as a circus performer are witty & entertaining. Her tutorial on removing the annoying shadows behind images was quick and simple. (For me, removing the code did the trick.)
These are the 3 main sites I used when designing my blog. Everything else I just customized using prior knowledge and the magic of photoshop. You know, in retrospect, it isn’t actually a lot but like I said, it sure took a long time trying to figure it out. But with HTML & CSS, it’s all about trial & error, lots of patience, and maybe chamomile tea. Right, Sheldon?
chamomille tea Right. Happy designing, guys. If you have any questions, feel free to ask and I’ll do my best to answer with my limited knowledge. Remember: Google is your best friend.