Saturday, May 05, 2012

I used code!

You've probably noticed that the blog has a new look!  I've completely changed the color scheme, there's a new banner, and I switched from a two-column to a three-column layout.  There's also a new "About Me" page.  What do you think?  I'm much much happier with it!

This is the first time I've changed the look of the blog significantly from the template.  I did some coding!  I'm even using html code in the posts to make the photos the same width as the text.  That's right. Coding in the posts. Are you impressed?

There are, of course, bits I still want to change.  If you looked at the blog in the last week, you may have noticed that the header image was cut off.  I seem to have fixed that, but please let me know if it looks wonky on your computer.  The biggest thing that's bugging me right now is that the email, Facebook, and Twitter buttons on the right sidebar are spaced so far apart.  Anyone know how to change that?  I also want to make the date at the top of each post smaller.

There are other things, too.  I'm not going to go back and change the formatting on all the old posts, so if you look back the photos are going to be too big and stick out into the sidebar.  But I can live with that.  Overall, I'm pretty proud of getting a look I like on my own.

Did I mention that I used code?


Angela said...

To go for quick and easy, you could pull out some of the <br>s between the sections and see if that changes it enough for you -- I'm pretty sure the <div>s will shift the buttons to a new line all by themselves, so the extra <br>s are just adding spaces.

What I would try to make the dates smaller is to look at the section of the code that it's in and determine what styles/classes it's referencing. (This also goes for adjusting the spacing for the first issue, if the <br> trick doesn't work, incidentally.)

So you'd look here:

<div class="date-outer">
<h2 class="date-header"><span>Saturday, May 05,2012</span></h2>
<div class="date-posts">

...And then look elsewhere in the code for those. Usually you can test whether you're affecting the right thing by just changing the color to something bright and obnoxious in the code, and seeing what on the page turns that color. These are the places I'd look:

/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: normal normal 22px Josefin Slab;
color: #9d7808;
text-transform: uppercase;

/* Posts
----------------------------------------------- */
.date-header span {
background-color: #ffffff;
color: #444444;
padding: 0.4em;
letter-spacing: 3px;
margin: inherit;

One of these specifies text size in pixels and the other doesn't, but if you find that changing the size in the h2 portion changes the size of other sections of your page besides just the dates, you can almost always add properties that aren't already there to the date-header portion, particularly when they're just text attributes. Play around with it (after saving a copy of your original code somewhere else, of course) and see what you get! :)

Lina said...

Wow, thanks Angela! I'll give that a try!