Font for Shopping Cart

[knucklehead]

What is the name and location of the CSS file that rules the table format within the shopping cart (Product, SKU, Qantity etc).

I want to change the size and payout of the table, but I cannot figure out where to make adjustments...

[loren_d_c]

That would probably depend on what shopping cart template you are using.

-Loren

[knucklehead]

##############################################
# ShopSite "Classic" Shopping Cart Templates #
##############################################

[-- INCLUDE sc_cart.css PROCESS --]

Where would that css file be; I cannot see it in my root drive when I am in my web editor (frontpage).

[loren_d_c]

go to Merchandising -> Custom Templates and in the Includes section click Copy ShopSite Include, find the one named 'sc_cart.css' and copy it to a new name and that new file will show up in your editable list of includes. Make the edits you want, then use the Copy Include function to copy this file to the name 'sc_cart.css'. Your copy of this include file will be used before the original as long as it is the exact name as the original).

-Loren

[knucklehead]

Thanks Loren. That has me on the right path...

[dZi]

I added the font-family: Geneva, Arial, Helvetica, sans-serif;
css to many of the areas below to try to get the font to Geneva instead of Times, but it just won't work for some reason, is Times a Hardcoded Font that cannot be changed. My boss is really picky about Font Consistency.

Here is my include:

<style type="text/css">
<!--
/*********************************************************/
/*** TESTCascading Style Sheet for ShopSite Classic Theme ***/
/*** Shopping Cart Screen ***/
/*********************************************************/

/***********************/
/*** Page Defaults ***/
/***********************/
body {
color: #[-- STORE.SC_TextColor --];
background-color: #[-- STORE.SC_BackgroundColor --];
font-family:geneva;
}

/***********************/
/*** Hyperlinks ***/
/***********************/

font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:link {
color: #[-- STORE.SC_LinkColor --];
}
a:visited {
color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover {
color: #[-- STORE.SC_LinkColor --];
}
a:active {
color: #[-- STORE.SC_ActiveLinkColor --];
}


div.header {
}

div.footer {
padding-top: 1em;
padding-bottom: 1em;
}

div#messages {
/* margin-top: 10px; */
vertical-align: middle;
}


/**********************************/
/*** Table of Products (Cart) ***/
/**********************************/
table.cart {
width: 100%;
padding-top: 1em;
border-collapse: separate;
border-spacing: 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

th {
text-align: right;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.cart_delete, td.cart_cp_delete {
padding: 3px;
width: 50px;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_quantity, td.cart_cp_quantity {
padding: 3px;
width: 70px;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}
td.cart_sku, td.cart_cp_sku {
padding: 3px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}
td.cart_name, td.cart_cp_name {
padding: 3px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_image, td.cart_cp_image {
padding: 3px;
width: 120px;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_name, td.cart_cp_name {
padding: 3px;
width: 300px;
font-weight:
font-size: 20;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_price, td.cart_cp_price {
padding: 3px;

text-align: right;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_total, td.cart_cp_total {
padding: 3px;
text-align: right;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
white-space: nowrap;
}

td.cart_op {
padding: 3px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_op1, td.cart_op2 {
padding: 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_empty {
padding: 3px;
text-align:center;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_shadecolor --];
}

select.cart {
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

textarea.cart {
vertical-align: middle;
font-family: Geneva, Arial, Helvetica, sans-serif;
}


/***************************************/
/*** Table of Totals ***/
/*** Subtotal, Tax, Shipping, etc. ***/
/***************************************/
table.totals {
color: #[--STORE.SC_TextColor--];
vertical-align: middle;
width: 100%;
line-height: 150%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.totals_txt, td.totals_saved_txt, td_totals_blank {
text-align: right;
padding-right: 15px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.totals, td.totals_saved {
text-align: right;
padding-right: 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.totals_all, td.totals_all_txt {
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

/***********************/
/*** Payment Table ***/
/***********************/
table.payment{
color: #[-- STORE.SC_TextColor --];
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.pay_holder {
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.pay_holder_hdr {
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.payment_hdr {
font-weight: bold;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.paymentselection {
text-align: center;
padding-top: 1em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.payment {
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.payment_value {
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.sql_pay {
margin-left: -4px;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.sql_pay {
padding-right: 15px;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.new_payment_type {
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}


/*******************************/
/*** Table of Registration ***/
/*******************************/

table.reg {
color: #[-- STORE.SC_TextColor --];
vertical-align: middle;
border-spacing: 0;
padding-bottom: 1em;
}

td.reg_wel {
font-weight: bold;
}

td.reg {
text-align: left;
}

td.reg_link {
text-align: left;
}

td.coupon {
padding-top: 1em;
}

td.buttons {
text-align: right;
padding-top: 1em;
}

/*** Enter postal code, select country ***/
table.zipncountry {
text-align: left;
}

td.zipncountry {
text-align: left;
}

td.zipncountry_text {
text-align: left;
}

td.sql_addr_hdr {
font-weight: bold;
}

td.sql_addr {
padding-right: 15px;
}


/*** select shipping method, tax rate ***/
table.taxnship, table.surcharge {
text-align: right;
padding-top: 1em;
}

td.taxnship_hdr {
font-weight: bold;
text-align: left;
}

td.taxnship {
text-align: left;
}


/*** select surcharge ***/
table.surcharge {
text-align: right;
}


/*******************************/
/*** Ordering Instructions ***/
/*******************************/
td.orderinginstructions {
text-align: right;
padding-top: 1em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.instruct {
text-align: right;
color: #[--STORE.SC_TextColor--];
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.instruct_hdr {
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

/*****************/
/*** Buttons ***/
/*****************/
#Apply Coupon
input.button152 {
color: #[--STORE.SC_TextColor--];
cursor: pointer;
}

# Remove button
input.button154 {
# font-size: 8pt;
color: #[--STORE.SC_TextColor--];
cursor: pointer;
}

/*********************************/
/*** Table of Error Messages ***/
/*********************************/

table.checkout_err, inv_err {
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.checkout_err, inv_err {
color: #[-- STORE.SC_TextColor --];
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #[-- STORE.SC_shadecolor --];
}

table.ups_error {
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.ups_error {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #[-- STORE.SC_TextColor --];
background-color: #[-- STORE.SC_shadecolor --];
vertical-align: middle;
}

/* Checkout Button Table */
table.checkout {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.checkout {
padding: 5px;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.google_button {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.google_button td {
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

/* ---------------- */
/* Cross-sell Stuff */
/* ---------------- */
td.gcs_table, td.pcs_table {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.gcs_table, table.pcs_table {
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

table.gcs_table caption, table.pcs_table caption {
width: 100%;
text-align: center;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_table_blank, td.pcs_table_blank {
}

td.gcs_table_content, td.pcs_table_content {
width: 25%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

/* Cross-sell Contents */
table.gcs_product_table, table.pcs_product_table {
border-collapse: collapse;
text-align: center;
width: 100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_product_name, td.pcs_product_name {
text-align: center;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_product_image, td.pcs_product_image {
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_product_image img, td.pcs_product_image img {
border: 0px none;
text-align: center;
margin-left: auto;
margin-right: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_product_price, td.pcs_product_price {
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

td.gcs_product_add_to_cart, td.pcs_product_add_to_cart {
text-align: center;
}

td.gcs_product_add_to_cart a, td.pcs_product_add_to_cart a {
font-weight: bold;
}

td.gcs_product_add_to_cart a:active, td.pcs_product_add_to_cart a:active {
}

td.gcs_product_add_to_cart img, td.pcs_product_add_to_cart img {
border: 0px none;
text-align: center;
margin-left: auto;
margin-right: auto;
}

td.sc_secure_image {
text-align: center;
}

-->
</style>

[Jim]

I didn't check through the whole file you posted but this doesn't look right because there is a closing bracket, "}", but not an opening one. Check and see if there may be other places that you have misplaced the brackets.

/***********************/
/*** Hyperlinks ***/
/***********************/

font-family: Geneva, Arial, Helvetica, sans-serif;
}

[dZi]

I put a bracket in front of the first one you pointed out, but the rest look fine. Still didn't work. It seems as if some stuff is showing up as Geneva and some stuff isn't. For example in the Cart page has Geneva for the column headers on the product table. But when I go to checkout/shipto/billto page, the product table headers (quantity,sku, price,etc.) are in Times.....

[dZi]

Sorry, that page is a different Include.....Thanks!

[loren_d_c]

So what you have done is specified the font face for all of the text that is in HTML elements with a specifically-defined class. But what about all of the other text that is not inside one of these elements? For this, you should have a generic section that covers the font face for all standard HTML elements that can contain text, for example something like:

body, p, h1, h2, h3, h4, h5, th, td, div, ol, ul, dl, input {
font-family: Geneva, Arial, Helvetica, sans-serif;
}

In fact, you probably could have done just this and not any of the other modifications you made, because unless the definitions of those elements with a specific class assigned specifies a different font face, then I believe it should inherit the font face from the generic definition for that type of element.

-Loren