0
The markup and css used are based on Cody Lindley's "CSS Step Menu" article, but I did my share of tweakings too :)
So, yeah, the advantages are:
Cross-browser compatible (I'm kind of guessing here, so don't take my word for it)
Uses sprites (one sprite, in fact, so your customer's browser will send one request versus 5.
Degrades nicely if images are disabled.
Here's what you should do to make it work:
Find your order-steps.tpl file in your shop's theme folder and completely replace it's markup with this:
order-steps.tpl:
{* Assign a value to 'current_step' to display current style *}
<!-- Steps -->
{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}
{l s='Summary'}
{else}
{l s='Summary'}
{/if}
{if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}
{l s='Login'}
{else}
{l s='Login'}
{/if}
{if $current_step=='payment' || $current_step=='shipping'}
{l s='Address'}
{else}
{l s='Address'}
{/if}
{if $current_step=='payment'}
{l s='Shipping'}
{else}
{l s='Shipping'}
{/if}
{l s='Payment'}
<!-- /Steps -->
Open your global.css file, find
/* steps (like order step) */
AND
/* Special style for block cart */
Replace css code between those two lines with the following:
/* steps (like order step) */
ul.step {
list-style: none;
width: 100%;
background-color: #fff;
height: 70px;
padding: 10px 0;
}
ul.step li{
position: relative;
height: 70px;
width: 20%;
list-style: none;
float: left;
background-image: url(../img/stepsSpr.gif);
background-repeat: repeat-x;
background-position: left -280px;
background-color: #0E96CC;
vertical-align: middle;
}
ul.step li ins {
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 26px;
height: 70px;
background-image: url(../img/stepsSpr.gif);
background-repeat: no-repeat;
background-position: right top;
}
ul.step li.step_current ins{
background-color: #CD3C0F;
background-position: right -70px;
}
ul.step li.step_last_done ins{
background-color: #CCC30E;
background-position: right -140px;
}
ul.step li.step_done ins{
background-color: #CCC30E;
background-position: right -210px;
}
ul.step li.step_current{
background-position: left -350px;
background-color: #CD3C0F;
}
ul.step li.step_last_done, ul.step li.step_done{
background-position: left -420px;
background-color: #CCC30E;
}
ul.step li span a {
color: #fff;
}
ul.step li span{
position: absolute;
width:120px;
display:block;
left:5px;
top: 30px;
font-weight:bold;
color: #fff;
}
/* Special style for block cart */
Finally, put the stepsSpr.gif that I've attached to this post in your theme's directory img folder.
Attached Files
-
ovsm.gif 20bytes
2840 downloads
-
stepsSpr.gif 6bytes
2340 downloads
Back to top
