Help needed with CSS on Shopping Cart

[Steven300]

Hi I'm hoping someone can spare a moment to help with some css for a mod I'm working on. In tpl_shopping_cart_default.php, there is the following div id:

<div id="cartSubTotal"><?php echo SUB_TITLE_SUB_TOTAL; ?> <?php echo $cartShowTotal; ?></div>

Currently the mod is using that same div id for two additional rows that I have added, something like this:

<div id="cartSubTotal">Line Two</div>
<div id="cartSubTotal">Line Three</div>

It displays fine but what I want to do is give the additional rows their own div ids, like this:

<div id="cartShippingTotal">Line Two</div>
<div id="cartTotal">Line Three</div>

That way each row can be styled differently if needed.

I would like to add a new css file to manage these new div ids. In the stylesheet, this is all the code I can find relating to "cartSubTotal":

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #9a9a9a;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

I'm not sure exactly what code I have to copy over to the new css file and how to change it so it manages the two new div ids independently of each other.

Thanks.

[gjh42]

Pull the #cartSubTotal selector out of the other rules and duplicate their properties in the #cartSubTotal rule:

.tableHeading {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	background-color: #e9e9e9;
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading {
	height: 2.2em;
	}

Then you can duplicate this rule for each of the other divs, with changes as desired.

[Steven300]

Thanks Glenn, actually is there any way that I can also copy the css code for #cartSubTotal from stylesheet.css over to my additional css file so that changes to #cartSubTotal in the additional css file makes a change and any changes to #cartSubTotal in the stylesheet.css are ignored? It would just be nice for all three div ids to be managed by the same file, preferably without altering the main stylesheet at all? This is what I have so far:

#cartShippingTotal {
	background-color: #e9e9e9;
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	height: 2.2em;
	padding-right: 2.5em;
	}
	
#cartTotal {
	background-color: #e9e9e9;
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	height: 2.2em;
	padding-right: 2.5em;
	}

I tried adding a section for #cartSubTotal to the file above but it wouldn't make any changes.

[gjh42]

You can move the #cartSubTotal rule from stylesheet.css to your mod stylesheet, though if you are planning on it being a public mod you can't count on that happening.
What is the name of your mod stylesheet? If it loads (alphabetically) before stylesheet.css, its version of a rule will be overridden by the original version.

You might be best off by changing the id a bit so it is no longer influenced by the original stylesheet. Depending on the circumstances, that might make life easier.

[Steven300]

You might be best off by changing the id a bit so it is no longer influenced by the original stylesheet. Depending on the circumstances, that might make life easier.

That's a great solution

This is going to be a public mod, related to this thread:
http://www.zen-cart.com/forum/showthread.php?t=121728