osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 Changing the Logo

The logo is always the first item that osCommerce shop owner wish to be modified. Let's see how to change the logo with osCommerce v2.3.3.

The size of default osCommerce logo (store_logo.png) is: 200 x 50 pixels

We are going to replace it with anothe logo with different size: 300 x 100 pixels

replace osCommerce logo

Upload the new logo to osCommerce catalog/images directory and see what happens:

oscommerce change logo

Oh! The new osCommerce logo not display correctly. It stretch below the header navigation menu. This is clear that height of the DIV layer is setting to a fixed value. Let's see how to fix it.

Step 1: Study the osCommerce header.php File

As we discussed many times in other tutorials that the osCommerce logo and the header navigation menu is controlled by the header.php file.

Open catalog/includes/header.php with a text editor

Navigate to line 18, and we find that the header DIV layer contain both the osCommerce logo and the three buttons on the right side - Cart Contents, CheckOut and My Account.

oscommerce change logo

Step 2: Study the stylesheet.css

Open catalog/stylesheet.css with a text editor.

Navigate to line 60, and you will find

#header {
height: 60px;
}

Ah! The #header DIV layer is set to a fixed height of 60 pixels. That's why the new logo (300 x 100 pixels) stretch below the #header DIV layer.

To fix the problem seems quite easy. Try to modify the height of #header DIV layer to 110 pixels, 10 pixels taller than the height of logo.

#header {
height: 110px;
}

Refresh browser to see the changes:

oscommerce change logo

Look! The new osCommerce logo looks perfect. We know how to change or replace the osCommerce logo now.