Cart Progress Images

[Guest xceejayx]

hi, does anyone know how to replace "Basket » Address » Payment » Complete" with images, and also if for instance you were on step 1 then the Address, Payment and Complete would fade out like the text does?!

thank you!!

[Robsta]

You will need to edit the templates directly... look in "skins/skin_name/styleTemplates/content/". Look through the templates for the relevant progress bar code.

[Guest kaskudoo]

and post if you are successful

this sounds good and i might think of using that method too ... maybe an image with text underneath it or so

[markscarts]

hmmm, tricky one

from skins/xx/styleTemplates/content/cart.tpl

				<div class="cartProgress">

				<span {CLASS_STEP2}>{LANG_CART}</span> &raquo; <span {CLASS_STEP3}>{LANG_ADDRESS}</span> &raquo; {LANG_PAYMENT} &raquo; {LANG_COMPLETE}

				</div>

from includes/content/cart.inc.php

if($_GET['act']=="cart"){

	$view_cart->assign("CLASS_STEP2","class='txtcartProgressCurrent'");

	$view_cart->assign("CONT_VAL","cart.php?act=step1");



} elseif($_GET['act']=="step2"){

	

	$view_cart->assign("CLASS_STEP2","class='txtcartProgressCurrent'");

	$view_cart->assign("CONT_VAL","cart.php?act=step3");



} elseif($_GET['act']=="step3" OR $_GET['act']=="step4"){



	$view_cart->assign("CLASS_STEP3","class='txtcartProgressCurrent'");

from skins/Legend/styleSheets/style.css

.cartProgress {

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

font-weight: normal;

color: #666666;

padding: 4px;

border: 1px solid #CCCCCC;

width: 350px;

margin: auto;

}

.txtcartProgressCurrent {

color: #61A2DF;

font-weight: bold;

}

There is the pertinent code that makes it what it is out of the box, doing what you want done is a little tricky. An interesting little thing to do when the design calls for it and someone has a little time to do it.

Will watch for your progress.

From a glance, I'd say that perhaps an easy way out is to make two button images, and set them as backgrounds in the stylesheet - a full-color button and a faded button - and allow the text to be made by CC as it presently is done. You would also have to use height an width settings for the buttons and paddings to get the text to sit right in the buttons, and you'd probably want to remove the & r a q u o ;'s >> symbols from the code above, etc.