box titles as images

[Guest blairnichols]

Hi all CC users!!

Just a quick question - I am modding a cc store for a customer and wish to style it with images instaed of text as the box titles.

IE remove the shop by category text and replace it with an image.

Any ideas how to do this quickly?? Or will I have to manually edit each tpl file??

[roban]

For the categories the easiest way would be to edit layout.css or create a new box with a new style.

To add a box with content either text or images do this in index.tpl positioned where you want it:

<div class="boxTitleRight">Your head-line</div>

<div class="boxContentLeft">

Use the code you wish to add

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

Assuming you know how to link to an image.

[Guest blairnichols]

Thanks Roban, but thats not what I meen.... I will try to explain it better.

I wish to make up images that are actually just pictures (.gif's) of text and replace each boxes title with this new title image so I would make up 7 images -

Shop by category

Search

Features product

Information

Mailing list

Shopping basket

Popular products

store them in the images folder, then link to them in the code that makes up each box - do you know where the code is that either controls or creates each box. Or is it dynamic code??

Cheers for your help :)

[convict]

Everything is in template files and CSS files.

Legend style Shop by category example:

skins/Legend/styleTemplates/boxes/categories.tpl

<!-- BEGIN: categories -->

<div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div>

<div class="boxContentLeft">

<ul>

<li class="bullet"><a href="index.php" class="txtDefault">{LANG_HOME}</a></li>

<!-- BEGIN: li -->

<li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li>

<!-- END: li -->

<!-- BEGIN: sale -->

<li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li>

<!-- END: sale -->

</ul>

</div>

<!-- END: categories -->

Red marked is the BOX header and this is the BOX name area. All you need is add a <img> HTML TAG here and/or play little bit with styles for this area.

Have look to appropriate skins/Legend/styleSheets/layout.css search for class boxTitleLeft

.boxTitleLeft, .boxTitleRight {

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

	font-size: 70%;

	color: #09347C;

	background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

	width: 155px;

	height: 15px;

	padding-left: 5px;

	padding-top: 1px;

}

You have to manage both file, box styles are common for another boxes or create unique style for your images header

If you want to use this feature as multilanguage option this is little bit more complicated but doable.