homepage Welcome to WebmasterWorld Guest from 54.145.243.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / Ecommerce
Forum Library, Charter, Moderators: buckworks

Ecommerce Forum

    
How to change column bg color in oscommerce
adammc

10+ Year Member



 
Msg#: 3591481 posted 1:18 am on Mar 5, 2008 (gmt 0)

Hi folks,

Can anyone possibly help me figure out where to change the BG Color of columns left, right and main content area?
I have searched the entire stylesheet and havent been able to find it? I looked in index.php and column left right too!

Any advice would be GREATLY appreciated as this driving me crazy!

[edited by: lorax at 2:13 am (utc) on Mar. 5, 2008]
[edit reason] removed url [/edit]

 

adammc

10+ Year Member



 
Msg#: 3591481 posted 2:18 am on Mar 5, 2008 (gmt 0)

as my url was removed from the post, here is the stylesheet.

/*
$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 (c) 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: #789632; text-decoration: underline; }

BODY {
background: #e3eff3;
color: #ffffff;
margin: 0px;
}

.shopping_cart {
font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:11px; color:#669933; font-weight:bold; line-height:14px; text-decoration:underline;
}
.shopping_cart:hover {
font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:11px; color:#669933; font-weight:bold; line-height:14px; text-decoration:none;
}

.infoBox {
background: #282828;
}

.infoBoxContents {
background: #4E4F4C;
font-size: 10px;
}
/* A {
color: #B6BAA9;
text-decoration: none;
}

A:hover {
color: #B6BAA9;
text-decoration: underline;
} */

FORM {
display: inline;
}

TR.header {
background: #ffffff;
}

TR.headerNavigation {
background: #bbc3d3;
}

TD.headerNavigation {
font-family: Arial, sans-serif;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
}
/*
A.headerNavigation {
line-height:21px;font-size:20px;color:#687118; font-family:Arial, sans-serif; text-decoration:none;
}

A.headerNavigation:hover {
line-height:21px;font-size:20px;color:#687118; font-family:Arial, sans-serif; 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;
}

.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;
}

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;
}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color:#B6BAA9;
}
.main b {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color:#B6BAA9;
}

.main a {font-size: 10px; text-decoration:underline;color:#B6BAA9;}
.main a:hover {font-size: 10px; text-decoration:none;color:#B6BAA9;}
.main a u {font-size: 10px; text-decoration:underline;color:#B6BAA9;}
.main a:hover u {font-size: 10px; text-decoration:none;color:#B6BAA9;}

TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
#myse select {width:90%;}
.delp {
color:#808080;
font-size:11px;
font-weight:normal;
}
s {
color:#808080;
font-size:11px;
font-weight:normal;
}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}

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-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
.moduleRow { }
.moduleRowOver { background-color: #4E4F4C; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #4E4F4C; }

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

/* 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; }

/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
body {padding:0; margin:0; background:#ffffff;color: #ffffff;}
body, td {font-family:Tahoma,verdana,arial; font-size:11px; color: #949494; vertical-align:top; line-height:13px}
img {border:0px;}
table {width:100%;}
/* ------------------------- ------------------------- */
.header td {color:#FFFFFF;}
.header em a {color:#8FB52B; text-decoration:none; font-style:normal; text-transform:none;}
.header em a:hover {color:#8FB52B; text-decoration:underline;}
.header strong {text-transform:uppercase;}
.header b {color:#ffffff; font-size:12px;}
.header a {color:#3D3F40; text-decoration:underline; text-transform:uppercase}
.header a:hover {color:#3D3F40;text-decoration:none}
.header span a {color:#00CDF2; font-size:11px; font-weight:bold}
.header img {vertical-align:middle;}
/* ------------------------- ------------------------- */
.se {width:562px; height:22px; color:#282E3E; font-size:11px; padding-left:4px; padding-top:2px;line-height:19px; font-family:tahoma;background:#FFFFFF;}
.se1 { width:125px; height:18px; margin-left:5px; margin-right:4px; color:#000000; font-size:10px; background:#D9E2C2;}
.se2 { width:126px; height:18px; color:#000000; background:#D9E2C2; font-size:10px;}
.se3 {width:163px; height:20px; color:#000000; font-size:10px; padding-left:4px; padding-top:2px; vertical-align:middle}
.se4 {width:119px; height:20px; color:#464646; font-size:10px; padding-left:4px; padding-top:2px; vertical-align:middle}
.se5 {width:159px; height:20px; color:#B6BAA8; font-size:10px; padding-left:4px; padding-top:2px; vertical-align:middle;}
.se6 {width:40px; height:18px; color:#000000; font-size:10px; padding-left:4px; padding-top:2px; vertical-align:middle; text-align:right; background:none;}
/* ------------------------- ------------------------- */
.cont_header_txt, .cont_header_txt1 {
height:42px;vertical-align:middle;background:#444642; padding-left:15px; text-transform:uppercase;
font-weight:bold; color:#A0DA17; font-size:12px;}
.cont_header_txt a {
font-weight:bold; color:#A0DA17; font-size:12px;font-weight:bold; text-transform:uppercase; text-decoration:none;}
.cont_header_txt a:hover {
font-weight:bold; color:#A0DA17; font-size:12px;font-weight:bold; text-transform:uppercase; text-decoration:underline;}

.cont_header_txt1 {background:#4E4F4C}

/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
.box_header_txttd{ height:33px;vertical-align:middle;background:url(images/bg_box_title.jpg) top left no-repeat #000000; padding-left:26px; text-transform:uppercase;
font-weight:bold; color:#FEFEFE; font-size:12px;}

.box_header_txt2td{ height:37px;vertical-align:middle;background:url(images/bg_box_title2.gif) left top repeat #7F7F7F;padding-left:11px; text-transform:uppercase;
font-weight:bold; color:#FFFFFF; font-size:11px;}

.body_hline {background:#313130;}
.box_body {background:#e3eff3;}

.box_body a{color:#ABB3B6; font-size:11px; font-weight:bold}
.box_body span {font-size:21px; color:#FFFFFF; font-weight:bold}
.box_body td{font-size:9px; color:#e3eff3; font-weight:bold;}

.box_body ul {padding:0; margin:0; list-style:none; padding-left:10px;}
.box_body .bg_list {background:url(images/bg_list_un.gif) left top no-repeat;}
.box_body .bg_list a{background:url(images/bg_list.gif) left top no-repeat; background-position:0 5px; color:#336699;text-decoration:none; padding-left:15px; font-size:12px; font-weight:normal; line-height:22px;}
.box_body .bg_list a strong{text-decoration:none; font-size:12px; color:#003366;}
.box_body .bg_list a:hover{color:#003366; font-size:12px; font-weight:normal;text-decoration:underline;}

.box_body .bg_list_un { }
.box_body .bg_list_un a{background:url(images/bg_list.gif) left top no-repeat; background-position:0 5px; color:#336699;text-decoration:none; padding-left:15px; font-size:12px; font-weight:normal;line-height:22px;}
.box_body .bg_list_un a:hover{color:#003366; font-size:12px; font-weight:normal;text-decoration:underline;}

.box_body .bg_list_sub {background:none;}
.box_body .bg_list_sub a{background:none; margin-left:15px; color:#789632;text-decoration:none; padding-left:0px; font-weight:normal; font-size:11px;line-height:22px;}
.box_body .bg_list_sub a:hover{color:#DCDBDD;text-decoration:none;}

.box_body2 {background:#e3eff3;}

.box_body2 a{color:#0E1212; font-size:11px; text-transform:uppercase; font-weight:bold}
.box_body2 td{font-size:12px; color:#DDDDDD; font-weight:bold;}

/* ------------------------------------------------- -------------------------------------------------------- */
.product {}
.product td {color:#ffffff; font-size:11px}
.product a {color:#DCDBDD; font-size:14px; font-weight:bold;text-decoration:underline;}
.product a:hover{color:#DCDBDD;text-decoration:none;}
.product a span {color:#789632; font-size:11px;text-decoration:underline; font-weight:normal}

.product_text td{font-size:11px; color:#B6BAA8;}

.black_line {background:#000000}

.product div { text-align:center;padding:8px 0px 5px 0px;}
.product div a {color:#DCDBDD; font-size:11px; font-weight:normal;text-decoration:none; text-transform:none;}
.product div a:hover{color:#DCDBDD;text-decoration:underline;}

.product1 td {color:#5B5B5B;}
.product span {}
.product b {color:#B6BAA8; font-size:11px;}
.product strong {color:#CD0000; font-size:12px;}

.product2 {background:#444642;}

.pic1 img{border: 1px solid #101112;}
.pic img{border: 1px solid #99cc00;}

/* ------------------------- ------------------------- */
.result td {color:#B6BAA8; height:37px; vertical-align:middle;padding:0px 10px 0px 10px; background:#4E4F4C}
.result a {color:#789632; text-decoration:underline;}
.result a:hover {color:#789632;text-decoration:none;}
.result b {color:#B6BAA8; font-weight:normal;}

.result u {text-decoration:none; color:#789632; font-family:arial}
.result_right{ text-align:right; font-family:arial}
.result_right b{color:#789632;font-weight:bold; font-family:arial}

/* ------------------------- ------------------------- */
.popup td{color:#1F1F1F; font-size:11px; text-decoration:none; line-height:13px}
.popup a{color:#ffffff; font-size:11px; text-decoration:underline;}
.popup a:hover{color:#ffffff; text-decoration:none;}
.popup b{color:#7F7F7F; font-size:11px;}
.popup strong{color:#475B14; font-size:11px; text-transform:none}
.popup span{color:#FFFFFF; font-size:11px; text-decoration:none; text-transform:uppercase}
.popup span a{color:#1B1B1B; font-size:11px; text-decoration:none;}
.popup span a:hover{color:#1B1B1B; font-size:11px; text-decoration:underline;}
.footer1, .footer1 a {color:#ffffff; font-size:11px; text-decoration:none;}
.footer1 a:hover{ color:#ffffff;text-decoration:underline;}
.footer1 a span {font-size:11px; text-transform:none; text-decoration:underline;}
.footer1 a span:hover {font-size:11px; text-transform:none; text-decoration:none;}
.footer1 b {color:#FFFFFF; font-size:11px;}
.footer1 td{color:#FFFFFF; font-size:11px;}
.popup_header td{font-size:14px; font-weight:bold; color:#FFFFFF;}
/* ------------------------- ------------------------- */
.footer td {color:#003366; font-size:11px; font-family:arial;}
.footer a {color:#003366; text-decoration:none;}
.footer strong {color:#003366; font-size:10px; text-transform:uppercase; font-family:tahoma;}
.footer a:hover {color:#cccccc;text-decoration:underline;}
.footer b, .footer b a {color:#cccccc; font-size:11px; text-decoration:underline; font-family:arial;}

.footer b a:hover {color:#000033; text-decoration:none; font-family:arial;}
/*--------------------- content ---------------------------------*/
.box_width_left{ width:192px;}
.box_width_right{ width:189px;}
.box_width_cont{ width:100%;}

.shop_carttd{ font-size:13px; color:#DCDBDD; font-weight:bold; background:#444642}
.shop_cartspan{ vertical-align:middle; text-transform:uppercase; font-size:16px; color:#A9DA27; font-weight:bold;}
.shop_carta{ vertical-align:middle; text-transform:uppercase; font-size:11px; color:#505050; font-weight:bold; background:#E0E4E5; text-decoration:none}
.shop_carta:hover{ vertical-align:middle; text-transform:uppercase; font-size:11px; color:#505050; font-weight:bold; background:#E0E4E5; text-decoration:underline}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
SPAN.productSpecialPrice, .box_body SPAN.productSpecialPrice, .product SPAN.productSpecialPrice {
color:#A9DA27; font-size:16px; font-weight:bold; text-decoration:none;}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
input{background:#ffffff;}

.main a b {
color:#B6BAA9;
font-size: 10px; text-decoration:underline;
}
.main a:hover b{
color:#B6BAA9;
font-size: 10px; text-decoration:none;
}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
.smallText a { color:#B6BAA9; font-size:11px; text-decoration:none;}/* advanced_search.php */
.smallText a:hover { color:#B6BAA9; font-size:11px; text-decoration:underline;}
.smallText a u { color:#B6BAA9; font-size:11px; text-decoration:none;}
.smallText a:hover u{ color:#B6BAA9; font-size:11px; text-decoration:underline;}

TD.fieldKey {font-size: 12px;font-weight: bold;font-family: Verdana, Arial, sans-serif;color:#B6BAA9;}
TD.fieldValue {font-size: 12px;font-family: Verdana, Arial, sans-serif;padding:3px 2px 3px 2px;}

TD.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px; color:#B6BAA9;
}
SPAN.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.smallText font b { color:#FF0033; text-decoration:none; font-size:11px }
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */
.product .shop_cart { height:41px;text-align:center; vertical-align:middle;color:#8E1214; font-size:13px; font-weight:bold;}
.sea_1 { padding:0px 10px 0px 10px;}
.sea_2 { padding:10px;}
.padd2 td{padding:10px;}
.padd3{ margin-left:16px;}
.bg_gg{background:url(images/bg_vv.gif) left top repeat-x;}
.bg_vv{background:url(images/bg_vv.gif) left top repeat-y;}
.prod_info{width:5px; border-right:30px solid #444642;}
/* ------------------------------------------------- -------------------------------------------------------- */
/* ------------------------------------------------- -------------------------------------------------------- */

/*Credits: Dynamic Drive CSS Library */
/*dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
padding-left:30px;
font: bold 12px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 15px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

[edited by: minnapple at 2:31 am (utc) on Mar. 5, 2008]

[edited by: lorax at 9:43 pm (utc) on Mar. 5, 2008]
[edit reason] removed link [/edit]

jecasc

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3591481 posted 9:46 am on Mar 5, 2008 (gmt 0)

Since I do not have the time to go through this whole stylesheet I'd rather not give you the fish but try to teach you how to fish.

Do the following:

1. Install Firefox if you have not already.

2. Install Chris Pedericks web developer toolbar for firefox. (search for web developer toolbar or for chris pederick in google.

3. Restart Firefox load your oscommerce site. Select "CSS -> View Style Information" from the web developer toolbar and hover with your mouse over the style element you want to change and click the left mouse button.

4. You should now have the exact name and positon of the element you want to change in your css file. So open the stylesheet and simply change the background color. (Or click "CSS-> EDIT CSS" to try changes directly in your browser window)

If it's a tablerow you need to change you probably won't be able to select it directly. But you should be able to find out the name of the table row by looking at the web developer bar on the top, when you hover over a table cell in the row.

ytswy

10+ Year Member



 
Msg#: 3591481 posted 1:12 pm on Mar 5, 2008 (gmt 0)

I think this is one of those cases where you start to curse osc.

As far as I'm aware there is no css class applied to the left and right columns, the relevant bit in the html/php (on each main page) is as follows:

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
</table></td>

In column_left.php and column_right.php are calls to the various boxes that are included - each of these will start with a <tr> tag, so you are denied the chance of inserting a legal container in the included column files since (AFAIK) you can't place anything between a <table> and a <tr>.

To the best of my knowledge, I believe you need to add a class manually to each main page and then apply a style to it in the css - hope you have a text editor with a decent search and replace function...

jecasc

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3591481 posted 1:52 pm on Mar 5, 2008 (gmt 0)

.infoBoxContents {
background: #4E4F4C;
font-size: 10px;
}

should be it for the columns. I think the background color is attached to the whole table not to the cells.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Ecommerce
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved