Adding/Positioning Logo in Template

[AlexMitchell]

Okay so I'm pretty terrible with coding but I added on this free temple http://addons.oscommerce.com/info/7698 yesterday and am having issues putting my logo in. I've edited template_bottom to have the image with the link, etc and everything is there, only its on the bottom left of the page and I can't seem to figure out how to get it to the top right where it belongs! You can see the mess at www.hohokamreef.com So here is my current coding in the stylesheet:

 

/* Website name and/or logo */

 

body#freeoscommerce_009 div#website_name {

z-index: 8;

vertical-align: top

position: relative;

top: 0px;

right: 0px;

}

 

body#freeoscommerce_009 div#website_name a {

vertical-align: top

position: relative;

top: 0px;

right: 0px

}

 

 

and for template_bottom:

<!-- Website Name/Logo -->

<div id="website_name"> <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">

<img src="http://hohokamreef.com/images/freeoscommerce_009/Logo%20w%20waves%20torquoise%20w%20gray%20border%20small.png" width="440" height="145" top="0px" left="0px"/></a>'; ?></div>

 

 

 

 

I feel like it's probably something really simple that I just don't know about! Anyways also wondering if I need to change the z-index for it to be on top of the background in the top or if that doesn't matter? Any advice/suggestions would be greatly appreciated!!

[germ]

To get it to the top of the page finde this code in the template_bottom:

 

<div id="top_background"></div>

Change it to this:

 

<div id="top_background">
*** DELETE THIS LINE AND PUT ALL THE LOGO CODE YOU POSTED HERE ***
</div>

To position it horizontally find this code in the stylesheet_freeoscommerce_009.css file

 

div#top_background {
z-index: 2;
position: absolute;
top: 0px;
width: 100%;
height: 386px;
background: url(images/freeoscommerce_009/top_background.jpg) top center no-repeat;
}

Change it to this:

 

div#top_background {
z-index: 2;
position: absolute;
top: 0px;
left: 665px; /* added this line - adjust to suit */
width: 100%;
height: 386px;
background: url(images/freeoscommerce_009/top_background.jpg) top center no-repeat;
}

Sometimes after changing the stylesheet in order to see any change you have to hold the <Ctrl> key down while doing a page refresh in the browser to force the browser to reload all contents from the server, including the newly changed stylesheet.

[AlexMitchell]

Thank you very much!!

[dares_uk]

im also trying to sort my new logo on a new template i have install,

I have the logo displaying now, I just need to sort out the positioning.

I am using free oscommerce template 212.

 

my question on the above is,

 

with the positioning code, why is it about aligning top_background.jpg and not for example logo.png / website_name. ??

[dares_uk]

body#freeoscommerce_212 div#website_name {
z-index: 8;
position: absolute;
top: 0px;
color: #ffffff;
text-align: right;
width: 800px;
top: 105px;
left: 50%;
margin-left: -400px;
font-size: 24px;
letter-spacing: 1.5px;
}

 

 

This is the code from my .css file,

I need to move the text upwards, and want to align it to the left/matching the left column.

Am i right in thinking i need to edit - text align right and top 105px ? or top 0px ?

 

 

thanks

[dares_uk]

thanks for the help every one.

 

 

but ive done it now.