X-Cart forums

[Cyber Matrix]

I have seen cart sites using an background image on category pages and I'm looking for a way to place a background image for each main category and have the title and text show up on top.

Does any one have any suggestions as to how to do this? I have attached an example for an idea of what I'm looking to achieve.

[cflsystems]

You can add these images as category images for each category. Then in subcategories.tpl you can set style to use as a background the image of this category

[gb2world]

This thread describes something that might be similar to what you are trying to do

[Cyber Matrix]

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

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

and I replace it with

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

{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

/*
    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

[Cyber Matrix]

Here is an example of what it looks like