How to add colored box - PLEASE HELP

Store Builder Questions
1

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



Thanks.

2

3

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?

4

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 {
color:#232323;
font-size:85%;
margin:0;
padding:7px 0 2px;
}



Just add:


background-color:#c4dcfc;



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?



Brandon

5

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



This is how I wanted…





Product Detailed Description







Product Short Description

6

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

as in 2012 here



[url]http://www.elitesportswear.co.uk/stanno-junior-climatec-t-shirt-baselayer-short-sleeves-446101.html[/url]



but in 2.15 is like this(is not good)

[url]http://www.hivis.co.uk/immortal-waistcoat-2-body-bands-and-braces.html[/url]



John

7

Is this what you want:







and:







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`"}
{$smarty.capture.$form_open}


{if !$no_images}

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

{/if}


{$product.product|unescape}



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

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

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

{/if}

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

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

{$smarty.capture.$discount_label}

{/if}


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

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

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

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

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

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

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

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

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

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

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



{assign var="form_close" value="form_close_`$obj_id`"}
{$smarty.capture.$form_close}
{/if}



Basically I added:






After


{$product.product|unescape}





and






After


{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 {
background-color:#FFC;
padding:10px;
}
.cm-tabs-content {
background-color:#CFF;
}



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.



Brandon

colored_boxes.zip

8

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

9

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.

10

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.



Brandon

11

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

12

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)?



or



[url]https://www.your-domain.com/your-admin.php?dispatch=categories.manage&cc[/url]



Can you share the address for your site?



Brandon

13

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.

14

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

My Changes is on.



JOhn

15

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 {
background-color:#FFFFCC;
padding:10px;
}



To:


.colored-box {
background-color:#FFFFCC;
padding:10px;
width:95%;
}



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.



Brandon

colored_boxes2_0_x.zip

16

Great Brandon, thx for your time spent on this.





John