05 August 2008

New Look

I've been wanting to change my blog design for some time, and I finally have. Only problem is that it looks awful. I wish I knew HTML. I also wish I had an eye for design.

Here are my main complaints:
  • I don't want the title to be in the center of the header box. I want it to be in the bottom left corner, but I can't figure out how to move it.
  • In my side bars, I want there to be more room in the boxes on the left. The titles of the widgets are right up against the edge of the purple boxes.
  • The color scheme. I like the background. I like the purple with the background. I like my picture with the background. But I do not like my picture with the purple. And any other colors didn't really thrill me either. I generally prefer bright and dark colors and rather dislike pastels, but I am torn because I really want to use the photo in the header.
  • I wan the little purple box that the date is in to mesh with the purple box that the post is in. Only I'm pretty sure I don't want purple boxes at all. Gah.
Any help? Any suggestions of color combos? I know that I could go to a website that would give me a design, but those designs don't really thrill me, and almost all of them have a very scrapbooky feel that isn't really me.

Feel free to comment with suggestions or offers to help.

5 comments:

Anonymous said...

try hotfreelayouts.com

TheMoncurs said...

The only thing I can really help you with is the header. It looks like you've just used Blogger's title and subtitle and put your picture behind it. Instead, you need to create your header with the title and subtitle where you want it (use Photoshop or paint or whatever) and then load that as your header while clicking the radio button that says something like, "use instead of default header." That will hide Blogger's default header and just use the one you've created.

I hope that makes sense, because I'm not good at typing out directions in words. Let me know if you need more specific directions and I can look up the specifics.

Sherry said...

Hmmm... Well, anonymous, I guess you missed the part where I said "those designs don't really thrill me." Anyway, I guess what I should have said was that those designs look like poop, and I hate them. I want this to be my very own design.

Kayla, I did try that, after you suggested. But it made everything go crazy because I had edited the HTML. I will keep playing with it though. Thanks!

Erin Gong said...

I'm not an expert in any of this, but here's my advice.

First, advice for the technical side.

1. Go to w3schools to learn some html and css basics. Don't spend a lot of time here, just zip through their tutorials. It will help you get a sense for how the logic of html and css works.

2. Once you've gone through the tutorials, go into the html-mode in your blog and change things to see what happens. You're a smart person and html is logical. Find one part of the code that looks like a good candidate for what you want to change. Change one part of the code. Then preview the results. For example, if you want to change the margins, then look for parts of the code that give numbers and pixels (something like: 100px, 10px, 50px 10px). Then change one number at a time to see what happens. Look back to the tutorials, or do google searches if you get stuck.

3. Save a back-up of your current blog html to your hard drive so you don't do irreversible damage. Or open a new dummy blog and mess around with that as a sandbox.

4. If you can't figure out how to do a specific thing, ask Abe. At least, that's what I usually do. I'm sure he wouldn't mind being your tech-guru as well.

Second, advice for the design side.

1. Find blogs you like and ask yourself, why do I like this blog? Then do those things in your blog.

2. SmashingMagazine has some interesting design examples, more focused for webpages. But they also just put out a small study of big blogs, which may be interesting to you.

3. Check out or buy the book The Non Designers Design Book if you're interested in learning quick, useful principles for great design. This is the best resources I've come across for getting started in just making things look nice. The focus here is on print media, but the principles translate to web design. Can get used on Amazon for $0.05 plus shipping.

As a warning, I looked up the author's personal webpage and thought it was poorly designed. I don't know why this is, because the books is really, really, good.

Erin Gong said...

And some more advice geared toward your specific concerns.

1. Looks like you got the title figured out.

2. To fix the sidebar margins go into the html and look for this part of the code:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
background-image:url(http://i307.photobucket.com/albums/nn289/sll11/box.jpg);background-repeat:repeat-xy;
color: #99aadd;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:.25em;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-10px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted #ffffff;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}

This part of the code defines your sidebars. Each section .sidebar ... } defines a specific part of the sidebar. Play around with either the margin or paddings and see if you can get the spacing you want.

3. Personally, I think the colors here work. But here are some websites on color, courtesy of Abe. WellStyled.com, which lets you play around with different color schemes, and gives their "computer codes". And WhatsItsColor.com, which let's you upload photos and find what color schemes they gravitate towards.

4. Hm. I'm not sure on this one. (Gee, that's helpful.)