X-Cart forums - Image for Category Description

I wanted to post how I was able to accomplish this for anyone else wanting to do it. Once I made these changes all I had to was create a banner for each main category and upload the banner in the respected category.

I'm using CDSEO Pro on the site and I have created another template named dialog_h1.tpl to pull all the information for the categories I want to show the banner for and have an if statement not to show on the cats I do not want a banner for. You should be able to get the idea from the code below if you are not using CDSEO Pro.

In your customer/main/subcategories.tpl look for

Code:

{include file="dialog.tpl" title=$current_category.category content=$smarty.capture.dialog extra='width="100%"'}

and I replace it with

Code:

{* WCM - CDSEO Pro - Use Page Title in dialog.tpl *}

{* include file="dialog_h1.tpl" title=$current_category.category content=$smarty.capture.dialog extra='width="100%"' *}

{include file="dialog_h1.tpl" title=$wcmcdseoCustomTitle content=$smarty.capture.dialog extra='width="100%"'}

{* / WCM - CDSEO Pro - Use Page Title in dialog.tpl *}

notice the dialog_h1.tpl is normally the dialog.tpl
which allows me to have more control over the title, you can find more information at https://www.websitecm.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticl eid=71

this is my dialog_h1.tpl with the if statement for what cats I want the banner to show

Code:

{if $current_category.categoryid eq 218 }

<div id="catheaders">

<div style="background-image:url({if $current_category.icon_url}{$current_category.icon_url}{else}{$xcart_web_dir}/image.php?id={$cat}&amp;type=C{/if}); height:140px ; background-repeat:no-repeat">

<div id="catheaderh1">

<h1 class="cats-h1">{$title}</h1></div>

<div id="catheaderh2"><h2 class="cats-h2">{$current_category.description}</h2></div></div>

<div class="DialogBox">{$content}</div>

{else}

<div>

<h1>{$title}</h1>{$current_category.description}</div>

<div class="DialogBox">{$content}</div>

{/if}

Here is the CSS that I put in the skin1.css you can modify it to your liking

Code:

/*

    Category Headers Banners

*/

#catheader {

    height:100px;

}

#catheaderh1 {

    line-height:30px;

    margin:0;

    padding:25px 0 0 14px;

}

.cats-h1{

    FONT-SIZE: 28px;

    color:#000000;

    margin:0;

    padding:0;

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

}

#catheaderh2{

    font-weight:normal;

    margin:0;

    padding:0 0 35px 15px;

    width:450px;

}

.cats-h2{

    FONT-SIZE: 17px;

    color:#000000;

    margin:0;

    padding:0;

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

}

/*

    Category Headers Banners End

*/

Hope this helps