OSCOMMERCE SUPPORT CALL 702-453-3332

The look of osCommerce is fairly easy to change...it usually only requires the change of no more than 5 files..
1. includes/header.php
2. includes/footer.php
3. includes/left_column.php
4. includes/right_column.php
5. Stylesheet.css

Have fun... 

Well..its a general replay..

Since a lot of new users dont know where to start.....

thanks for posting this topic

Yes thanks for posting this topic....has any one else found any other contributions/tutorials that will help explain modifying better....I have seen some amazingly modified sites out there.

I'd like to thank you for putting this info on here!!! I need to ask a newbie question. I couldn't load up on how to insert a "about us" in the info box in the contributions and I would also like to put others in the info box also.  How would I do this?

TIA !!!!!!
Rhonda

Hi,
I have a question too 

I'm making a store in www.templateslord.com. i have edited many things and it looks nice now, but it needs one more change.

As you can see i have removed the right colum, deleting all the content in colum_right.php.

But it seems the content of that file is inserted in an other table which is still there,
in my html output i see this



I'd like to remove all that code but i can't find the php file that outputs it.
Any idea?
Thanks in advance

7. If a database table must be altered (or added) when installing a contribution, many readme files don't remind you to see whether the table ID (configuration group ID, etc.) is already in use. If you've installed a few contributions already, make it a habit to look at your database structure FIRST to see whether the IDs being assigned in the SQL text are open or not.

I do this by going to phpMyAdmin and browing through the structure of the table affected to see if the ID numbers are open. If they're already in use, change the ID numbers in the SQL text before continuing. If you're not sure how to do that, ASK FIRST. Somebody will help you.

HTH,

Terry

thanks - this is all fantastic (i was just about to start a topic asking how I change the look of the site) 

Hi,
This is by far the most useful thread there is outhere.  Thanks.
I still have some questions though.  I downloaded the buttons from contribution but need to change text inside them.  Nobody offers "My account" or "Cart Contents" buttons for some reason.  I am using Macromedia Fireworks for image editing, but a newbie at editing buttons.
Another questions is: If i am using sts_template and want ot change "Buy now" buttons and all the buttons through out the page where do i find them?

Thanks,
Ruslan

Ok i found where to change the buttons (catalog/includes/languages/english/images/buttons), but still can't change text inside some of the buttons.

Another problem of mine is that i can't seem to find how to change the background of boxes where links like "categories", "shopping cart", "order history", "languages" are located.  I mean those grey boxes by default on the main page.  I tried many changes in stylesheet.css but can't seems to nail the right one.
See the site for better understanding:

www.escapetorussia.com/Store/catalog

Please help,
Thanks in advance,
Ruslan

Hello,
        I am not new to graphics, so I like to add as many custom ones as I can. I have noticed that with Cubecart (A HORRID program) that they have all of the "blocks" on the homepage encased by cells. This allows for some really unique appearnaces.

I have combed through many of the files pertaining to OSC, and I don't see how I could change the borders around the blocks to display graphics. I am completely capable of creating cell tables, and would even add them to this site if I knew WHERE to add them. lol

Basically, this is what I am looking to do:



I would be most appreciative if someone could guide me on how I could pull this off.

(For those that care to know, Cubecart is NOT a good program to use as a storefront. It has some features, like the graphics, that I liked. The shops coding though contains a great deal of bugs. This includes the newest version, but also includes the complete line of 2.0 versions. I am switching over to OSC because of this. Also, they don't include shipping with their release. lol I guess they just assume shipping is free? Nonetheless, don't waste your time with that application as I did. It may be smaller and easier to customize, but OSC is much more powerful and comes with the items required to maintain a functioning site....like shipping and handling! lol)

Firstly the looks of the boxes is controlled in the stylesheet.css file, and its possible to change colors and to add graphical images to the boxes there.

If you would like to change the way the boxes layout are functioning today , this is controlled in a file called boxes.php located in the folder  /includes/classes

Alternatively you could use on of these contributions.....

1.
Infobox Skin Manager

2.
Graphical Borders

Hello,
        Unfortunantly, the second contribution doesn't work correctly. I am fairly experienced, and I couldn't figure out the problems and there are cross browser issues. (Mozilla refuses to show the bottom images.)

I am preparing to see if I can get the first contribution to work.

Hello,
        Unfortunantly, the second contribution doesn't work correctly. I am fairly experienced, and I couldn't figure out the problems and there are cross browser issues. (Mozilla refuses to show the bottom images.)

I am preparing to see if I can get the first contribution to work.

Thanks, I will try the first one too....I use firefox, cross-browser compatability is very important to me.

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

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Portions Copyright © 2003 osCommerce
  Portions Copyright © 2004 www.oscommerce-templates.co.uk

  Released under the GNU General Public License
*/

.boxText {
    font-family: Georgia, 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: #ff6347;
  color: #575757;
  margin: 10px;
}

A {
  color: #575757;
  text-decoration: none;
}

A:hover {
  color: #575757;
  text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
  background: #ffffff;
}

TR.headerNavigation {
  background: #eeeeee;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #eeeeee;
  color: #ffffff;
  font-weight : bold;
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

A.headerNavigation {
  color: #ffffff;
}

A.headerNavigation:hover {
  color: #ffffff;
  text-decoration: underline;
}

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: 12px;
  background: #eeeeee;
  color: #ffffff;
  font-weight : bold;
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

.infoBox {
  background: #b6b7cb;
}

.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1.5;
  border-top: 0px;
  border-right: 1px;
  border-left: 1px;
  border-bottom: 1px;
  border-color: #cccccc;
  border-style: solid
  <--!background: #FFEBA8;-->

}

.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: 12px;
  font-weight: bold;
  background: #eeeeee;
  font-variant: small-caps;
  color: #f4a460
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

a.infoBoxHeadingLink {
    color: #ffffff;
}

a.infoBoxHeadingLink:hover {
    color: #ffffff;
    text-decoration: underline;
}


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: #FFFFE5;
}

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: #F2FFE5;
}



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

#############
TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #cccccc;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
}

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: transparent;
  color: #FFFFFF;
  height: 26px;
  font-weight: bold;
  background-image: url(images/template.me.uk/background.gif);
}

A.productListing-heading {
  padding-top: 8px;
  background: transparent;
}

#############

A.pageResults {
  color: #0000FF;
}

A.pageResults:hover {
  color: #0000FF;
  background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold;
  color: #575757;
}

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: 0.8em;
  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; }

.outline {
    border-top: 1px;
    border-right: 1px;
    border-left: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: #575757;
    background: #ffffff;
}




















/*
------------Boxes Section for css-------------
Format each info box according to you liking
*/

.contentBox {
  background: #8b1a1a;
}

TD.contentBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #8b1a1a;
  color: #ffffff;
}

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


.BestSellersBox {
  background: #f4a460;
}
TD.BestSellersBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.BestSellersBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.CategoriesBox {
  background: #f4a460;
}
TD.CategoriesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.CategoriesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.CurrenciesBox {
  background: #f4a460;
}
TD.CurrenciesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.CurrenciesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.InformationBox {
  background: #f4a460;
}
TD.InformationBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.InformationBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.LanguagesBox {
  background: #f4a460;
}
TD.LanguagesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.LanguagesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ManufacturerInfoBox {
  background: #f4a460;
}
TD.ManufacturerInfoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ManufacturerInfoBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ManufacturersBox {
  background: #f4a460;
}
TD.ManufacturersBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ManufacturersBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.OrderHistoryBox {
  background: #b6b7cb;
}
TD.OrderHistoryBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #b6b7cb;
  color: #ffffff;
}
.OrderHistoryBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ProductNotificationsBox {
  background: #b6b7cb;
}
TD.ProductNotificationsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #b6b7cb;
  color: #ffffff;
}
.ProductNotificationsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ReviewsBox {
  background: #f4a460;
}
TD.ReviewsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #f4a460;
  color: #ffffff;
}
.ReviewsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.SearchBox {
  background: #f4a460;
}
TD.SearchBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.SearchBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ShoppingCartBox {
  background: #f4a460;
}
TD.ShoppingCartBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ShoppingCartBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.SpecialsBox {
  background: #f4a460;
}
TD.SpecialsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.SpecialsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.TellaFriendBox {
  background: #f4a460;
}
TD.TellaFriendBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.TellaFriendBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.WhatsNewBox {
  background: transparent;
}
TD.WhatsNewBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.WhatsNewBoxContents {
  background: transparent;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px;
  border-color: #f4a460;
  border-style: solid
}

.WhatsNewBox {
background: #f4a460;
}
TD.WhatsNewBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: transparent;
  color: #ffffff;
}
.WhatsNewBoxContents {
  background: transparent;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;

The inside of the boxes are controled here:

"namebox"Contents

example.......


one small hint....make transparent gifs for your box corners...just make one set and then upload it to all the different boxes folders in  /images/

Thanx so much. I replaced the infobox code with
infoBox {
background: #b6b7cb;

Then I copied the background: #f4a460; code to the What's new box.

That's what I get: My Webpage

The box is full of orange, whan I would like it transparent.

* .infoBoxContents :: This specifies the styles for all the actual contents of the infoboxes (The Inner Table). These are all the side boxes and the new products box. This is where you can change the background color and image of the side boxes. The font setting only seems to have an effect on the 'Shopping Cart' , 'Order History' and 'Bestsellers' box's fonts

This is because the other boxes contains mostely links ....