Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Adding/Positioning Logo in Template


AlexMitchell

Recommended Posts

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!!

Link to comment
Share on other sites

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.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

  • 5 months later...

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. ??

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...