Beginners questions about layout changes.

1. Modify your stylesheet (style.css) for the theme you are using. Look for an entry for #sidebar-1 and add the code between the { } below to it. If you do not find an entry or you don’t feel like looking for it add all of the below to the very bottom of your stylesheet:

#sidebar-1{
  margin-top:60px;
  }

2. Add this to the bottom of your style sheet:

a:hover img {border:0;}

3. Same directions as for 1. look for the .post style in your style sheet and add whats between the { } to it, if you can’t find it, add the whole thing to the end of your style sheet.

.post{
  margin-bottom:30px;
  }

4.Your going to need to modify each template file where this appears. The main ones are index.php and single.php but it probably also appears in archive.php and search.php.

Look in index.php for a line of code that looks like this (it should come right after the title is generated for each the post)

<span class="meta-start">

Right after that tag you will see a bunch of other <span>s <div>s and other tags. You can find the class of each of these tags and adjust their css definition as shown above by adding padding:0 5px; or you can cheat and just throw a bunch of   where you want more spaces. Each   is one space.

Hope that helps.

Thanks! This looks very helpfull. I wil have to look into this tonight.

I have been mucking about the CSS files already, but I was having a hard time identifying the classes. I used developer toolbar to try and pinpoint it on my site but the refrences I found didnt show up in my CSS, but now I have some concrete things to look for!

Thank you again!

AKIRA

1, 3, and 4 can all be done by editing (or adding) the margin and/or padding values of the desired element in the style.css file. Margin is the space between the element and the next element beside it. Padding is the space between the element and the element(s) within that element. You need to be aware that Internet Explorer 6 treats margins differently than other browsers. In IE6 margins don’t overlap and in other browsers they do.

1. the right column is inside <div id="sidebar-1"> so you find the #sidebar-1 selector in the style.css and change or add the margin or padding value.

3. the posts are inside <div class="post"> so you find the .post selector in the style.css and change or add the margin or padding value.

4. the date is inside <div class="entry-date"> so you find the .entry-date selector in the style.css and change or add the margin or padding value. Use only left margin or padding you don’t want to add space to the top or bottom (i.e. margin-left: 1em; )

You can remove the blue border around the images inside links by adding the following line to your style.css

a img { border: none; }

Which means if there is an image (<img>) inside a link (<a>) add no border.