Need help to edit WP template

My website looks like the template on top, but I need it to be like the one on the bottom. How do I do that? I need to add 2 small columns on top to put images and links in..

 

check up your theme's index.php and single.php files and find out where the main loop starts. Place your additional content above it.

 

Ok, but how should the coding look? Because that`s the problem.

 

Can you share you theme code here..?

 

What about the width then? I have no idea how the code should be; I wanna put 2 pictures there, with a link in each..

@ supermance:
Stylesheet:
/*
Theme Name: 8some
Theme URI: http://www.wpcosmos.com/2008/09/02/free-wordpress-theme-8some/
Description: 2 columns, with a widget-enabled left-hand sidebar
Version: 1.2
Tags: fixed width, two columns, widget ready, white, business, simple
Author: WpCosmos
Author URI: http://www.wpcosmos.com/
*/



body {
margin: 0;
padding: 0;
color: #111;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #eee;
}


#wrapper{
width: 1000px;
margin: 0px;
padding: 0px;
text-align:left;
font-size: 75%;
line-height:20px;
background: #fff;
}


#header{
padding: 25px 0px 0 0 ;
margin: 0;
height:170px;
}



#content{
margin: 0;
padding: 0;

}



#main {
width: 660px;
float:right;
margin: 0;
padding: 20px 20px 20px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 700px 0 0 ;
background: gray;
color:#fff;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{
float:right;
}

#credit{
text-align:left;
padding: 0 5px;
}

#credit p{
margin:0;
color:#555;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#555;
font-weight:100;
}

/* ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
/* font-family: georgia, 'Times New Roman', sans-serif; */
}

h1{
font-size: 190%;
}
h2{
font-size: 160%;
}
h3{
font-size: 120%;
}
h4{
font-size: 110%;
}
h5{
font-size: 100%;
}
h6{
font-size: 70%;
}


a{
color:#1f58a8;
font-weight:800;
text-decoration:none;
}
a:hover{
color:#1f58a8;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
font-size: 90%;
font-family: "Courier New", Courier, monospace;
white-space: pre;
}

td{
vertical-align:top;
}

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}



/* Headings */

form#searchform2{
display: block;
margin: 10px;
}

#header h1{
margin: 0;
padding: 0 5px 0px 10px;
}

#header h1 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 140%;
line-height:28px;
}

#header h2{
margin: 0;
padding: 3px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 110%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:3px 5px 15px 5px;
background: #f2f2f2;
color: #444;
}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 5px 10px 5px 10px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #1f58a8;
font-size: 170%;
font-weight:100;
padding: 7px 10px 2px 2px;
margin: 0 0 15px 0;
}


.post h2 a{
color: #1f58a8;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #1f58a8;
}

.postmetadata, .categorymeta{
font-size:90%;
padding: 1px 8px 1px 5px;
margin: 0;
line-height: 12px;
}

.postmetadata{
color: #777;

}

.responses{
float:right;
}

.categorymeta{
text-align:right;
}

/* Comments */

h3#comments, h3#postcomment{
font-size: 100%;
font-family:verdana, sans-serif;
}

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
padding: 0px 3px;
margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}

ul#commentlist li{
display: block;
padding: 0;
margin: 0 15px 5px 15px;
font-size:90%;
background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
width:50px;
float:left;
padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/* sidebar styles */

#subscribe{
text-align:center;
}

#subscribe p{
margin: 3px 0 10px 0;
font-size: 110%;
}

#subscribe p a{
color: #fff;
}


.menu{
padding:10px 10px 10px 0px;
}

.menu a{
font-weight: 100;
color:#fff;
}

.menu a:hover{
text-decoration:none;
color:#fff;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
margin: 0 0 20px 0;
padding:0 30px 0px 25px;

}

.menu ul li.widget ul{
margin: 0;
padding:0 0 0 10px;
}

.menu ul li.widget ul li{
border-bottom:1px solid #555;
padding: 3px 0 3px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px solid #555;
border-bottom: none !important;
padding: 2px 0 2px 15px;
margin:3px 0 0 0;
}



.menu ul li.widget h3{
font-size:140%;
padding:2px;
margin:14px 0 8px 4px;
color: #fff;
font-weight: 800;
border-bottom: 1px solid #fff;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #fff;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

#sidebar input{
background: #444;
border: 1px solid #666;
color: #fff;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


INDEX:

<?php get_header(); ?>


<div id="content">
<div id="content-inner">

<div id="main">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<div class="postmetadata">

<div class="responses"><?php comments_popup_link(__('0 RESPONSES'), __('1 RESPONSE'), __('% RESPONSES')); ?> <img style="vertical-align:-5px;" alt="comments" src="<?php bloginfo('template_directory'); ?>/images/comment.gif" height="16" width="16" /> </div>

<b><?php echo strtoupper(get_the_time('F jS, Y')); ?><br />

By <?php echo strtoupper(get_the_author()); ?></b>


</div>

<div class="entry">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>


<?php the_content(__('Read more &raquo;')); ?>
</div>

<div class="categorymeta">
<?php if (get_the_tags()){?>
<p>Tags: <?php the_tags('') ?></p>
<?php } ?>
<p><?php edit_post_link('(edit)','',' '); ?> <img style="vertical-align:-5px;" alt="categories" src="<?php bloginfo('template_directory'); ?>/images/category.gif" height="16" width="16" /> <?php the_category(', '); ?></p></div>




<?php comments_template(); ?>


</div>




<?php endwhile; ?>



<div id="navigation">
<div class="fleft"><?php next_posts_link('&laquo; Older') ?></div>
<div class="fright"> <?php previous_posts_link('Newer &raquo;') ?></div>
</div>



<?php else : ?>

<div class="post">
<div class="entry">
<h2>Not Found</h2>
<p>Sorry, you are looking for something that isn't here.</p>
</div>
</div>

<?php endif; ?>




</div> <!-- eof main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

Still lookin for an answer here..

Edit: or instead of having those two images on top it would be ok to have some kind of "top bar", if you understand what I mean. Just make it as simple as possible..

 

Never mind, sorry for the bump!