How to centre logo in header

[ozstar]

Hi,

 

I want to centre the oscommerce logo from the left to the middle in the header area and maybe add an image each side of it.

 

I have looked but can't seem to see how I can do this.

 

Thanks

 

Oz

 

:)

[acoz]

Hi,

 

I want to centre the oscommerce logo from the left to the middle in the header area and maybe add an image each side of it.

 

I have looked but can't seem to see how I can do this.

 

Thanks

 

Oz

 

:)

 

 

try checking \includes\header.php

[ozstar]

try checking \includes\header.php

 

Have tried lots of things in there but to no avail.

[Guest]

Here's the table row in includes/header.php that you needto change:

  <tr class="header">
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td>
<td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>  <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>  <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>  </td>
 </tr>

The logo is osCommerce.gif, but you probably knew that already. You can change the layout to some extent by changing the valign="middle" to align="center" but you still have the other table divider with all the links and images. personally, I'd get rid of them. They are redundant to the links below them. I've also never really liked the osC stock images. They're nice to have as a starting point but they don't really scream serious ecommerce to me. They also draw the eye away from your products. Just drop that whole second <td> to </td> and that will make it much easier. Consider a background color that matches your logo so it isn't a floating rectangle.

[ozstar]

Thanks Dan..

 

I decided to leave those little gobbly thingos there plus the bar, but was able to fiddlle around with extra images etc.

 

What was happening was I kept the word valign=middle and when I changed it to center, zip happened until I changed it to align.

 

Thanks again

 

Oz

[julielan]

Dan, thank you very much for this post. I have been searching the forum for this topic. I'm a newbie to this whole environment. Would you please teach me how to add the background color so there will be no floating rectangles? A code would be greatly appreciated. Thanks again. Kady :rolleyes:

[ozstar]

Hi,

 

You can do this in the stylesheet.css file in the catalog directory.

 

Open it in a text editor and look for the word 'background'. Try a few things and you will see what happens immediatley you make the change.

 

Good Luck

 

Oz

[julielan]

Sorry Dan, what I am looking for is how to get rid of the OS Commerce images in the other pages under "information box". Thank you. Kady

[ozstar]

To find stylesheet.css..

 

 

I have read that to change background color you need to change the stylesheet.css file in the catalog directory

 

My question is where is the "catalog directory"?

Yes, I am a newbie.

Amy Jo :)

 

Amy, if you can get to your root directory you wills ee a directory called - calatog/

 

In there will be a file called stylesheet.css

 

It will be near the bottom of the list of files.

 

Open it with an editor of sone type and do a search for the word..background.

 

You will see something like this..

---------------------

Released under the GNU General Public License

*/

 

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

 

BODY {

background: #FFFF99;

color: #000000;

margin: 0px;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #AABBDD;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #FFFF99;

}

 

TR.headerNavigation {

background: #000000;

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #000000;

color: #ffffff;

font-weight : bold;

}

 

Change one at a time the ones that say background, save it and go see what it looks like. You eventually will have the colours you want.

 

Good Luck

[Guest]

Can you tell me how I figure out how the color yellow is entered?

 

THis is just an example of how I don't understand, where do I find the numbers and letters to use for a specific color?

 

New here. Thanks

[ozstar]

See this excerpt frpm the above post..

 

BODY {

background: #FFFF99;

color: #000000;

margin: 0px;

}

 

BODY means the body of the page.. (Most of it)

background means just that

#000000 means black (6 numbers)

#FFFFFF means white

#FFFF00 means just one version of yellow, there are many.

 

You can get these colours in any swatch in a graphics program or try a google search etc..

 

God Luck