Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Background Images


vablonde25

Recommended Posts

Hi there,

 

I would like to add a background image to my OSCommerce store, it's a rather dark *.gif file, but when I add it, it makes it the background for everything which makes the text in the "What do we Have Here" and other pages difficult to see.

 

Can anyone confirm the BODY code I need to add the background image and which setup in the CSS file I need to change, so that all my information boxes remain white/gray?

 

Thank you in advance!

 

WM

Link to comment
Share on other sites

If you post (or PM me) a link to your site and the name of the gif you want to use as a background, I can probably help with the code changes required.

:)

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

Make a backup of these files before beginning:

 

/store/index.php

/store/stylesheet.css

 

In the /store/stylesheet.css make these changes:

 

CHANGE the BODY style to this:

 

BODY {
 background-image: url('images/leather-background.gif');
 background-repeat: repeat;
 background-position: center;
 color:#FDFEC8; margin:0px; font-family:verdana; font-weight:bold;
}

 

ADD this style just below the BODY style:

 

.fixcenter {
 width:815px;
 border: solid; border-width: 1px;
 background: #333333;
 background: #333333;
 margin: auto;
 margin-top: 20px;
}

Edit your /store/index.php file, find this code:

 

<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

Just ABOVE it ADD this code:

 

<div class="fixcenter">

At the bottom of the index.php find this code:

 

</body>
</html>

Just ABOVE it ADD this code:

 

</div>

When you get this new style looking like you want it on your home page, you'll need to edit all the other pages on your site, like contact_us.php, create_account.php and so on, and make the same minor changes as you did to the index.php file, just adding those two lines of code in the same place.

 

When you first look at your site you might have to hold the <Ctrl> key down while doing a page refresh in the browser to get the new style to show up. This forces the browser (IE and Firefox) to reload the content from the server.

 

It would be wise to backup all your pages before making the edits.

 

I don't know any other way to achieve what you want without adding a new style, then editing all your pages to use the new style.

:blush:

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

Forget changing the index.php

 

I turned on my brain and found a better way...

:blush:

 

This way you don't edit every file on your site, just the header and footer.

 

In your /store/includes/header.php find the first HTML portion after the first ?> PHP tag.

 

It will look something like this:

 

?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">

Change to:

 

?>
<div class="fixcenter">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

Now in your /store/includes/footer.php at the very bottom AFTER the closing PHP tag:

 

?>

ADD this line:

 

</div>

Next time I'll engage my brain before I open my mouth....

:wacko:

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

Please, disengage away! That is just great!

 

I followed your instructions: http://chesapeakesaddleryva.com/store/index.php

 

It's hanging off to the left and not dead center, did I miss something?

 

THANK YOU!!!

 

Forget changing the index.php

 

I turned on my brain and found a better way...

:blush:

 

This way you don't edit every file on your site, just the header and footer.

 

In your /store/includes/header.php find the first HTML portion after the first ?> PHP tag.

 

It will look something like this:

 

?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">

Change to:

 

?>
<div class="fixcenter">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

Now in your /store/includes/footer.php at the very bottom AFTER the closing PHP tag:

 

?>

ADD this line:

 

</div>

Next time I'll engage my brain before I open my mouth....

:wacko:

Link to comment
Share on other sites

Change your fixcenter style to this:

 

.fixcenter {
 width:815px;
 border: solid; border-width: 1px;
 background: #333333;
 background: #333333;
 margin: auto;
 margin-top: 20px;
}

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

Ok, I tried my feeble hand at CSS and did this, which moved it:

 

.fixcenter {

width:815px;

border: solid; border-width: 1px;

background: #333333;

background: #333333;

margin: 40px;

margin-top: 20px;

}

 

Still left. :)
Link to comment
Share on other sites

What you changed it to and what I posted are two different animals...

:blush:

 

In other words, make it what I said to make it.

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

Ok, I just copied and pasted what you posted. :blush:

 

Thanks for all your help!

 

What you changed it to and what I posted are two different animals...

:blush:

 

In other words, make it what I said to make it.

Link to comment
Share on other sites

This is what you have:

 

.fixcenter {
 width:815px;
 border: solid; border-width: 1px;
 background: #ffffff;
 background: #333333;
 margin: 40px;
 margin-top: 20px;
}

This is what I posted:

 

.fixcenter {
 width:815px;
 border: solid; border-width: 1px;
 background: #333333;
 background: #333333;
 margin: auto;
 margin-top: 20px;
}

It won't work until you make it what I said to make it.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...