How to fix a transparent Categories Box?

ij2241 · December 20, 2009

Hiya's, firstly I a very new person to OSC and have had both fun and impending insanity trying to figure the workings of customising a website for a friend.

Currently I have a background image that is static (the pages scroll up and down over it without the background moving), however the body is transparent. The boxes in the Left and Right Columns are okay (but will be changed in the coming days..).

How can I get the center area to have a independent colour?

The site is at www.alternatereality.com.au

Cheers

IJ

jhande · December 20, 2009

Styles and stylesheet.css

http://www.oscommerce.info/docs/english/e_catalog_stylesheet_definitions.html

ij2241 · December 20, 2009

Hi jhande, thanks for replying. I have just looked through all option in the link you left and tried all that seemed even vaugely possible however the center area is still transparent. I have checked the stylesheet.css for any reference to "color: transparent;" in case it was that but have not found anything. Below is the current stylesheet.css info. If you or anyone else can see the problem please let me know...

Cheers,

IJ

--------------------------------------------------------------------

/*

$Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

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-image : url('images/border2.gif');

background-repeat : repeat ;

background-position :left;

background-attachment : fixed;

color : #FFFFFF;

margin : 0;

}

background: #cfcfcf;

color: #CC0000;

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

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

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

a.forever · December 20, 2009

Hi jhande, thanks for replying. I have just looked through all option in the link you left and tried all that seemed even vaugely possible however the center area is still transparent. I have checked the stylesheet.css for any reference to "color: transparent;" in case it was that but have not found anything. Below is the current stylesheet.css info. If you or anyone else can see the problem please let me know...

Cheers,

IJ

No, it's not that stylesheet.css is calling anything transparent. It's that there are no other styles for background that override the current BODY background. For your columns, the infoBox styles all have backgrounds that will cascade over the BODY background. However, things like TD.pageHeading and DIV.pageHeading that have no background declarations will not have anything to cascade over and will thus retain whatever background its predecessor tags have.

ij2241 · December 20, 2009

A.forever, thanks very much for the information. I have located and added a background #333333; parameter to the td.main portion of stylesheet.css and the headings and text now have an independent background :D . That is one portion of my problem fixed (it has been driving me nuts).

While the front page and the individual items in the catalog now have the background, the Categories pages (see this Link for an example) is still transparent. I have looked in the Stylesheet.css and the categories.php files but can not see a logical place to enter in a background color.

Where does this little bit hide?

Cheers

IJ

jhande · December 20, 2009

Hey Stan,

Try this for a better solution to what you are trying to do.

Un-do your stylesheet edit to td.main.

Enter a new style in your stylesheet.css:

.tableBackground {

__ background-color: #333333;

}

Open index.php and add class="tableBackground" here:

Starting around line 56 ending line 62

<?php

if ($category_depth == 'nested') {

$category_query = tep_db_query("select cd.categories_name, c.categories_image from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'");

$category = tep_db_fetch_array($category_query);

?>

Also here:

Around line 228

And also here:

Around line 286

ij2241 · December 21, 2009

.tableBackground {

__ background-color: #333333;

}

Hiya jhande, I have removed the extra's from the td.main and added the extra info to the index.php locations ( all three) however the page has reverted to the original with the front page having the transparent sections and the Categories pages remaining transparent.

In your addition to the stylesheet you had the first line as "."tablebackground (without the quotes). Is there meant to be something before the point?

cheers

IJ

a.forever · December 21, 2009

In your addition to the stylesheet you had the first line as "."tablebackground (without the quotes). Is there meant to be something before the point?

Having a period in front of a CSS declaration denotes use of a class. So .tablebackground is for ANY HTML tag that equals class="tablebackground". Also fun to note, something like TD.tablebackground would only be used for any TD tag that equals class="tablebackground".

jhande · December 21, 2009

Thank you Kevin for explaining CSS.

Looks as if you fixed it Stan since your post, looks fine on my end.

ij2241 · December 21, 2009

You are both gentlemen and scholars. Trying to figure out how to do something like this either requires someone to basically learn an whole new language (and at times I seem to have problems with my own english :blink: ) or it relies on the skill and generosity of others.

Thanks for helping with what may have been a small problem for you but was more of a mountain for me!

Cheers

IJ

How to fix a transparent Categories Box?

Recommended Posts

ij2241

jhande

ij2241

a.forever

ij2241

jhande

ij2241

a.forever

jhande

ij2241

Archived

Browse

Activity