Change style of boxes (shopping cart,best sellers,etc

[Guest]

Hi Everyone

I am attempting to change the "background" of the various boxes on the right & left side of the page.

I have a gif file that I want to use.

Can anyone help with a) - am I able to replace the standard white box with my gif,

and

B) - where I need to place this file so that all the boxes are changed the same on each page.

 

also on a similar veign

 

I wish to place a background colour at the topp of thew page where the oscommerce logo sits.

How should I do this.

Any suggestions greatly appreciated

Peter

[bill110]

Catelog/stylesheet.css find this code

.infoBoxContents {
 background: #f8f8f9;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

change like this:

.infoBoxContents {
 background-image: url(images/your_image.gif);
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

Use this for all stylesheet definitions

http://www.oscommerce.info/kb/osCommerce/C...n_and_Layout/54

 

or my contribution at the bottom of this post which has all definitions pasted into a stock stylesheet.

[Guest]

Bill

Thanks for your help

Greetings from Oxford UK

I am getting on with this now and will get back to you over the week-end when completed.

Regards

Peter

[Guest]

Bill

I have tried this, but the size of the gif seems to have resized heading bar for the box, in this case "cart contents".

If you have a minute could you have a look for me.

What I am trying to do is put this background as a background for all the boxes on the right and left and thew New productys box at the bottom.

Any ideas.

Peter

emlmedicare/test

[bill110]

Are you sure you edited the correct stylesheet element?

[Guest]

Bill

Not sure

This is what I have

Thanks for looking

Peter

*

$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

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: #ffffff;

color: #000000;

margin: 0px;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #AABBDD;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

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

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

TR.headerError {

background: #ff0000;

}

 

TD.headerError {

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

font-size: 12px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

 

TR.headerInfo {

background: #00ff00;

}

 

TD.headerInfo {

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

font-size: 12px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

 

TR.footer {

background: #bbc3d3;

}

 

TD.footer {

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

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #b6b7cb;

}

 

.infoBoxContents {

background-image: url(images/corner_right.gif);

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

font-size: 10px;

}

 

.infoBoxNotice {

background: #FF8E90;

}

 

.infoBoxNoticeContents {

background: #FFE6E6;

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

font-size: 10px;

}

 

TD.infoBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

 

TD.infoBox, SPAN.infoBox {

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

font-size: 10px;

}

 

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #f8f8f9;

}

 

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #f8f8f9;

}

 

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}

 

.productListing-heading {

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

font-size: 10px;

background: #b6b7cb;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

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

font-size: 10px;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

 

TD.pageHeading, DIV.pageHeading {

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

font-size: 20px;

font-weight: bold;

color: #9a9a9a;

}

 

TR.subBar {

background: #f4f7fd;

}

 

TD.subBar {

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

font-size: 10px;

color: #000000;

}

 

TD.main, P.main {

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

font-size: 11px;

line-height: 1.5;

}

 

TD.smallText, SPAN.smallText, P.smallText {

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

font-size: 10px;

}

 

TD.accountCategory {

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

font-size: 13px;

color: #aabbdd;

}

 

TD.fieldKey {

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

font-size: 12px;

font-weight: bold;

}

 

TD.fieldValue {

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

font-size: 12px;

}

 

TD.tableHeading {

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

font-size: 12px;

font-weight: bold;

}

 

SPAN.newItemInCart {

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

font-size: 10px;

color: #ff0000;

}

 

CHECKBOX, INPUT, RADIO, SELECT {

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

font-size: 11px;

}

 

TEXTAREA {

width: 100%;

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

font-size: 11px;

}

 

SPAN.greetUser {

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

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

 

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

 

TD.formAreaTitle {

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

font-size: 12px;

font-weight: bold;

}

 

SPAN.markProductOutOfStock {

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

font-size: 12px;

color: #c76170;

font-weight: bold;

}

 

SPAN.productSpecialPrice {

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

color: #ff0000;

}

 

SPAN.errorText {

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

color: #ff0000;

}

 

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

 

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

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

 

/* message box */

 

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

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

 

/* input requirement */

 

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

[bill110]

Ok sorry for the late reply. The image you used is called corner_right.gif which is the name of the very small image the shopping cart box uses in its title bar. That image is located in catelog/images/infobox. Your image you uploaded needs to be named something different and located in catelog/images. and in the stylesheet change to the new name,

[Guest]

Bill

You are a gent and a scholar

May I pick your brains agin should the need arise.

Best regards

Peter

[Guest]

Bill

Could you have a look again and let me have your comments.

The gif is there but it seems to load on over a previous coloured background, and if you look at the bottom box it appears to be duplicted and not as a single colour background.

Any thoughts welcomed.

Peter