How to add colored box - PLEASE HELP

I would like to know how do I add that colored box when writing short and detailed product description - It was use to be in the OLD version of CS-Cart but they have took that feature off - I am not sure why. But your help is much appreciated.

I am running CS-Cart 2.10


This seems like a CSS issue. Just adding a line of CSS to the description class. That said, the detailed description is in the tabs section, isn’t it?

To add a color for your product list page you need to edit your styles.css or make up a new style using the hooks method.

If you want to just modify the style go to line 1306 in your skins/your-skin/customer/styles.css

You should see:

.product-descr {
padding:7px 0 2px;

Just add:


Just change the color to whatever you want.

If you want to have a colored box for the details page, you need to be more specific on what exactly you want colored. Do you just want the description? Or, do you want the contents of all the tabs colored? If it isn’t the tab content, what do you want colored?


Thank you so much who has responded me I really appreciate that.

This is how I wanted…

Product Detailed Description

Product Short Description

Yeah Id like to get the coloured background back too on the product deatils page

as in 2012 here


but in 2.15 is like this(is not good)



Is this what you want:


The way I did this was:

1.) Created a file called skins/your-skin/customer/addons/my_changes/hooks/products/vew_main_info.override.tpl

In there I put:

{if $product}
{assign var="obj_id" value=$product.product_id}
{include file="common_templates/product_data.tpl" product=$product}
{assign var="form_open" value="form_open_`$obj_id`"}

{if !$no_images}

{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"}



{assign var="rating" value="rating_`$obj_id`"}{$smarty.capture.$rating}
{assign var="sku" value="sku_$obj_id"}{$smarty.capture.$sku}

{assign var="old_price" value="old_price_`$obj_id`"}
{assign var="price" value="price_`$obj_id`"}
{assign var="clean_price" value="clean_price_`$obj_id`"}
{assign var="list_discount" value="list_discount_`$obj_id`"}
{assign var="discount_label" value="discount_label_`$obj_id`"}

{if $smarty.capture.$old_price|trim || $smarty.capture.$clean_price|trim || $smarty.capture.$list_discount|trim}

{if $smarty.capture.$old_price|trim}{$smarty.capture.$old_price} {/if}

{if !$smarty.capture.$old_price|trim || $details_page}

{if !$smarty.capture.$old_price|trim || $details_page}


{if $smarty.capture.$old_price|trim || $smarty.capture.$clean_price|trim || $smarty.capture.$list_discount|trim}

{if $show_discount_label && $smarty.capture.$discount_label|trim}



{if $capture_options_vs_qty}{capture name="product_options"}{/if}

{assign var="product_amount" value="product_amount_`$obj_id`"}

{assign var="product_options" value="product_options_`$obj_id`"}

{assign var="qty" value="qty_`$obj_id`"}

{assign var="advanced_options" value="advanced_options_`$obj_id`"}
{if $capture_options_vs_qty}{/capture}{/if}

{assign var="min_qty" value="min_qty_`$obj_id`"}

{assign var="product_edp" value="product_edp_`$obj_id`"}

{if $capture_buttons}{capture name="buttons"}{/if}

{assign var="add_to_cart" value="add_to_cart_`$obj_id`"}

{assign var="list_buttons" value="list_buttons_`$obj_id`"}

{if $capture_buttons}{/capture}{/if}

{assign var="form_close" value="form_close_`$obj_id`"}

Basically I added:





{if $capture_buttons}{/capture}{/if}

You could do the same by modifying the file skins/your-skin/customer/blocks/product_templates/default_template.tpl

But I prefer to use the hooks method.

2.) Modify your style sheet or create a hooked style sheet.

In that style sheet put:

.colored-box {
.cm-tabs-content {

Or edit your style sheet with those styles.

I have attached all the files needed to make your hooks work. Unless you have already created these files in the past, you should be able to just copy them over.

Be sure to clear your cache after your done making the changes.


Thank you that YELLOW Box is not coming up on DETAILED Description page I can see the green box.

I was able to to get that green box in TAB’s but yellow color - Thank you again for all who participated in helping me - THANK YOU SO VERY MUCH.

I’m a little confused, did you get both boxes to work?

One thing I guess I forgot to mention is if you use the files I uploaded, you need to make sure the My Changes addon is active in your administration.

If the My Changes addon is active and you have uploaded the files, be sure to clear the cache.


Only on the TAB box is working. not the YELLOW ONE

Did you copy over the files I attached or did you make the changes yourself?

The files I attached are for the My Changes addon. If you don’t use the My Changes addon, jut modify the code like I have above. It’s not a big deal either way since it is only 2 lines of code. The My Changes addon will just make it easier for future upgrades.

Did you clear your cache (var/compiled/customer)?



Can you share the address for your site?


It’s working fine :slight_smile: Thanks so much - I really appreciate all your help I was basically not clearing my cache after I cleared them out everything is working.

Should this work with 2.105, Ive tried and double checked cleared cache but nothing?

My Changes is on.


No, the above files won’t work with 2.0.x.

I have attached the files needed to make this work on 2.0.x. The only thing I’m not in love with is the width of the color. Here is how it is with the code in the files:

I just don’t like the box being so narrow. If it were me I’d go for something like:

To do this, just change the style .colored-box from:

.colored-box {


.colored-box {

If you need any explanations of the code just let me know and I’ll do my best to spell it out on here. It’s just easier to upload the file.


Great Brandon, thx for your time spent on this.