osCommerce without content background styleOnce you have changed the background image of your osCommerce site, you will want to customize the body of the webpage. The snapshot to the right shows what the osCommerce site looks like with no background for the content area for the "Sunny" theme. You see the website background through it.

To style this we will need to edit the stylesheet.css file. The CSS code in the stylesheet.css file is the #bodyWrapper id. This article will explain how to change the color of the background of your osCommerce #bodyWrapper content.

Create a header image

Create a header.png osCommerceThe first thing you will need to do is create an image for your header. Just like the last tutorial, we will make the header image duplicate across the header. The image we will use in this tutorial is found to the right. Part of the #bodyWrapper is the header section. The header section simply needs an image to make it fit the body content color. Below are the steps to set this up.

Add the CSS for the #bodyWrapper content

Once you have the image you want for your header, you can now add the code which will style the #bodyWrapper content of your site. below are the steps to add the CSS code for your #bodyWrapper content in osCommerce.

  1. Login into your cPanel.
  2. Go to the File Manager. Select your osCommerce installation directory and click Go.
  3. Upload the header to the images folder osCommerceUpload the header.png image to the images folder in your osCommerce installation directory.
  4. CSS code osCommerceEdit the stylesheet.css file in your osCommerce installation directory. Add the following code to the #bodyWrapper CSS.
    #bodyWrapper {
    background: repeat-x top  url('images/header.png') #fff8e5;
    border:solid;
    border-width: 0px 1px 1px 1px;
    border-color: #494437;
    }

    This code will add a border around the bodyWrapper, fill in the background with the #fff8e5 color, and duplicate the header image across the top.

    Note! the color for the background in this example is #fff8e5. You can change to whatever color you want.

    Save the file.

    View with the body styled osCommerceNow the #bodyWrapper area is styled with a border and a solid background.

The next tutorial will explain how to customize the footer of your osCommerce site.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201014

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!