X-Cart forums

[divinechic]

I have read thread after thread trying to figure out how to change the default text size on my product pages. The suggestions that are being given don't seem to be working for my site, they might be for older versions of x-cart. Can someone please look at my code and tell me where I need to put the changes. Here is my

Product.tpl

{* $Id: product.tpl,v 1.46.2.2 2007/06/04 11:13:13 max Exp $ *}
{capture name=dialog}
<table width="100%">
<tr>
    <td valign="top" align="left" width="30%">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}
<p />
{if $smarty.get.mode ne "printable"}
<a href="product.php?productid={$product.productid}&amp;mode=printable" target="_blank"><img src="{$ImagesDir}/print.gif" width="23" height="22" name="print" alt="{$lng.lbl_printable_version|escape}" /></a>
{/if}
    </td>
    <td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
    <td>{$lng.lbl_sku}</td>
    <td>{$product.productcode}</td>
</tr>
{if $product.category_text}
<tr>
    <td>{$lng.lbl_category}</td>
    <td>{$product.category_text}</td>
</tr>
{/if}
{if $usertype eq "A"}
<tr>
    <td>{$lng.lbl_vendor}</td>
    <td>{$product.provider}</td>
</tr>
{/if}
<tr>
    <td>{$lng.lbl_availability}</td>
    <td>{if $product.forsale eq "Y"}{$lng.lbl_avail_for_sale}{elseif $product.forsale eq "B"}{$lng.lbl_pconf_avail_for_sale_bundled}{elseif $product.forsale eq "H"}{$lng.lbl_hidden}{else}{$lng.lbl_disabled}{/if}</td>
</tr>
<tr>
    <td colspan="2">
<br />
<br />
<span class="Text">{$product.descr}</span>
<br />
<br />
    </td>
</tr>
<tr>
    <td colspan="2"><b><font class="ProductDetailsTitle">{$lng.lbl_price_info}</font></b></td>
</tr>
<tr>
    <td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr>
    <td width="50%">{$lng.lbl_price}</td>
    <td nowrap="nowrap"><font class="ProductPriceSmall">{include file="currency.tpl" value=$product.price}</font></td>
</tr>
<tr>
    <td width="50%">{$lng.lbl_in_stock}</td>
    <td nowrap="nowrap">{$lng.lbl_items_available|substitute:"items":$product.avail}</td>
</tr>
<tr>
    <td width="50%">{$lng.lbl_weight}</td>
    <td nowrap="nowrap">{$product.weight} {$config.General.weight_symbol}</td>
</tr>
</table>
<br />

<table cellspacing="0" cellpadding="0">
<tr>
    <td>{include file="buttons/modify.tpl" href="product_modify.php?productid=`$product.productid`"}</td>
    <td>&nbsp;&nbsp;</td>
    <td>{include file="buttons/clone.tpl" href="process_product.php?mode=clone&productid=`$product.productid`"}</td>
    <td>&nbsp;&nbsp;</td>
    <td>{include file="buttons/delete.tpl" href="process_product.php?mode=delete&productid=`$product.productid`"}</td>
</tr>
</table>

    </td>
</tr>
</table>
{/capture}
{if $smarty.get.mode eq "printable"}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=440"}
{else}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}
{/if}

[kube]

Hi there,

From the code you have given us, you're looking for anything that looks like this (the FONT tag)...
<font class="whatever_classid_is_relevant">

It's best to go into your skin1/skin1.css file to edit these, so locate the "whatever_classid_is_relevant" with a search inside the file. And when you're more advanced with CSS, in future, to remove these altogether.

When you have located the relevant class within the css file, replace/add accordingly within the brackets statement. For instance, here are some examples in changing the font size (disregard/ignore the comments and its contents) ...

FONT-SIZE: 12pt; /* in point size */
FONT-SIZE: 1em; /* in em's */
FONT-SIZE: 13px; /* in pixels */

Compare existing code within the css file and also google CSS for more tips.

Remember to back up.
Regards,
Doms

[kube]

I reread that and I don't think I was clear enough.

For clarity sake as an example:

locate the skin1/skin1.css file. and locate ProductDetailsTitle within the file (this one is a little tricky as it affects a few titles as well as the price within the product item page but it will give you a gist)

it will read something like...

.ProductDetailsTitle {
COLOR: #FF3300;
FONT-WEIGHT: bold;
FONT-SIZE: 12px; /* <- change this to 22px to get a feel for its effect, this means 22 pixels big */
}

Hope that's a little better for understanding.
Regards,
Doms

[divinechic]

I am sorry but I looked at my css and and changed the font size where it says product description and I still don't see anything. Here is my css I change the font size to 14 and still nothing, it is almost like it doesn't control it at all. Here is the snippit of the code that I feel pertains to the description:

/*
    Product details page
*/
.ProductTitle {
    COLOR: #F13CC6; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-decoration: none;
}
.ProductTitle:link {
    COLOR: #F13CC6; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-decoration: none;
}
.ProductTitle:visited {
    COLOR: #F13CC6; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-decoration: none;
}
.ProductTitle:hover {
    COLOR: #76B200; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-decoration: underline;
}
.ProductTitle:active {
    COLOR: #F13CC6; FONT-WEIGHT: bold; FONT-SIZE: 12px; text-decoration: none;
}
.ProductTitleHidden {
    COLOR: #666666;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
}
.ProductDetailsTitle {
    COLOR: #F13CC6;
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
 }
.ProductDetails {
    COLOR: #112536;
    FONT-SIZE: 14px;  

The hightlighted is where I changed the font size. ut there was no change on the product pages.

[kube]

Hi Divine,

Have you got the right product.tpl? skin1/customer/main/product.tpl (The product item's page) rather than skin1/main/product.tpl

I am a little unsure about skin1/main/product.tpl's effects (by the looks of mine it seems to be an admin file - not sure why now).

Also, in my browser, you have the wrong CSS class highlighted it should be ProductDetailsTitle and not ProductDetails for testing with. Your original snippet doesn't contain the ProductDetails class but it does have the ProductDetailsTitle class.

Also note that the {$product.descr} from your snippet above is surrounded by the class="Text". (but again mine looks like to be an admin file)

Hope this helps.
Doms.

[divinechic]

Kube-

Wow, thanks so much for your help! I actually got it to work, but you'll never beleve this, in the CSS my product descriptions didn't have anything to do with the product detailsatall, this is what controled my product descriptions:

*/
body {padding:0; margin:0; background-color:#252525;}
body, td, div, th, td, p, input, select, textarea, tt {font-family :Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #474747;}

I never would have guessed it. You are so sweet to help me, thank you again!

[kube]

Hi again Divine,

Yes, I was going to mention this, as a test, but I wasn't sure if you wanted to change more-or-less all the font sizes within the cart, as sometimes it can have undesirable results.

Glad to help.
Regards,
Doms