checkout progress bar

[feemish]

Hi,

Actinic v10

Does anyone know why my checkout progress bar is appearing like this?



The progress bar isnt wide enough for the text.. and the curved images look like they are in the wrong places.

I havent edited anything to do with the checkout.. its all standard v10.
The only thing I have done is change the style shet on line 644...
changed from background color to white.. so I could see the text.

table.CheckoutProgress td.cpi-inactive{
background-image: url("cpi-main-mid.gif");
<!-- color: <actinic:variable name="BGColor" />; -->
color: white;
}

Thanks for reading.

[Steve G Griggs]

Hi Mark.
I think it's safe to say that the progress bar is not well designed - I am currently working with the images and CSS to correct the rubbish layout.
It needs a complete re-think I feel.

[fergusw]

For a short term measure you could install one of our free progress indicators that we made some time ago:


Examples:
http://www.teclan.net/demo1/acatalog/order00.html
http://www.teclan.net/demo1/acatalog/order01.html
http://www.teclan.net/demo1/acatalog/order02.html

[Duncan Rounding]

Here's what I have used recently for the default one. You can just modify to suit.

Checkout Progress Indicator Layout:

<actinic:block if="%3cactinic%3avariable%20name%3d%22CheckoutProgressIndicator%22%20%2f%3e%20%3d%3d%20%22Yes%22" >
		<table class="CheckoutProgress">
			<tr>
				<td class="cpi-start" title="">&nbsp;</td>
				<td class="cpi-spacer" title="">&nbsp;</td>
				
				<td 
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27">
					class="cpi-active" 
				</actinic:block>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%200%27" >
					class="cpi-inactive" 
				</actinic:block>
					title="Enter your address details">Addresses</td>
				
				<td 
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%201%27" >
					class="cpi-active" 
				</actinic:block>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%201%27" >
					class="cpi-inactive" 
				</actinic:block>
					title="Select your shipping method and exempt from tax if applicable">Shipping &amp; Tax</td>
				
				<td 
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >
					class="cpi-active" 
				</actinic:block>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%202%27" >
					class="cpi-inactive" 
				</actinic:block>
					title="Review you order and make payment if you are happy with it">Confirmation &amp; Payment</td>
				
				<td 
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Receipt%27" >
					class="cpi-active" 
				</actinic:block>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Receipt%27" >
					class="cpi-inactive" 
				</actinic:block>
					title="Print your receipt and receive and email confirmation">Receipt &amp; Email</td>
				
				<td class="cpi-spacer" title="">&nbsp;</td>
				<td class="cpi-end">&nbsp;</td>
			</tr>
		</table>
</actinic:block>

And the CSS:

table#idCheckoutProgress {
    margin-bottom: 10px;
}
table#idCheckoutProgress td {
    background-color: transparent;
    background-repeat: repeat-x;
    border: 0 none;
    height: 19px;
    padding: 0;
    text-align: center;
}
table#idCheckoutProgress td.cpi-left {
    background-image: url("../cpi-main.gif");
    color: white;
    width: 160px;
}
table#idCheckoutProgress td.cpi-complete {
    background-image: url("../cpi-main-mid.gif");
    color: white;
    width: 160px;
}
table#idCheckoutProgress td.cpi-incomplete {
    background-image: url("../cpi-background.gif");
    color: black;
    width: 160px;
}
table.CheckoutProgress {
    border-collapse: collapse;
    margin-bottom: 10px;
    width: 678px;
}
table.CheckoutProgress td {
    background-color: transparent;
    background-repeat: repeat-x;
    height: 19px;
    padding: 0;
    text-align: center;
    width: 160px;
}
table.CheckoutProgress td.cpi-start {
    background-image: url("../cpi-main.gif");
    width: 8px;
}
table.CheckoutProgress td.cpi-inactive {
    background-image: url("../cpi-main-mid.gif");
    color: #FFFFFF;
}
table.CheckoutProgress td.cpi-active {
    background-image: url("../cpi-background.gif");
    color: #000000;
    font-weight: bold;
}
table.CheckoutProgress td.cpi-end {
    background-image: url("../cpi-end.gif");
    width: 8px;
}
table.CheckoutProgress td.cpi-spacer {
    background-image: url("../cpi-main-mid.gif");
    width: auto;
}

Background images as attached.

[feemish]

Thanks Steve, Fergus and Duncan,

I'll try out the options you've given.

Cheers.