TIP: Better order-steps template

[spott]

Thanks for user Eihwaz from PrestaShop Forum for this contribution.Original link to thread is here.

See the image attached to see the difference between original and modified versions.
   
The markup and css used are based on Cody Lindley’s “CSS Step Menu” article, but I did my share of tweakings too smile
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:

PHP Code:

{* Assign a value to 'current_step' to display current style *}
<!-- Steps -->
<ul class="step" id="order_step">
    <li class="{if $current_step=='summary'}step_current{else}{if $current_step=='login'}step_last_done{elseif $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}step_done{else}step_todo{/if}{/if}">
        <span>
            {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address' || $current_step=='login'}
            <a href="{$base_dir_ssl}order.php">
                {l s='Summary'}
            </a>
            {else}
                {l s='Summary'}
            {/if}
        </span>
        <ins></ins>
    </li>
    <li class="{if $current_step=='login'}step_current{else}{if $current_step=='address'}step_last_done{elseif $current_step=='payment' || $current_step=='shipping'}step_done{else}step_todo{/if}{/if}">
        <span>
            {if $current_step=='payment' || $current_step=='shipping' || $current_step=='address'}
            <a href="{$base_dir_ssl}order.php?step=1">
                {l s='Login'}
            </a>
            {else}
                {l s='Login'}
            {/if}
        </span>
        <ins></ins>
    </li>
    <li class="{if $current_step=='address'}step_current{else}{if $current_step=='shipping'}step_last_done{elseif $current_step=='payment'}step_done{else}step_todo{/if}{/if}">
        <span>
            {if $current_step=='payment' || $current_step=='shipping'}
            <a href="{$base_dir_ssl}order.php?step=1">
                {l s='Address'}
            </a>
            {else}
                {l s='Address'}
            {/if}
        </span>
        <ins></ins>
    </li>
    <li class="{if $current_step=='shipping'}step_current{else}{if $current_step=='payment'}step_last_done{else}step_todo{/if}{/if}">
        <span>
            {if $current_step=='payment'}
            <a href="{$base_dir_ssl}order.php?step=2">
                {l s='Shipping'}
            </a>
            {else}
                {l s='Shipping'}
            {/if}
        </span>
        <ins></ins>
    </li>
    <li id="step_end">
        <span>{l s='Payment'}</span>
    </li>
  </ul>
<!-- /Steps --> 


Open your global.css file and find steps (like order step) comment (somewhere around 1200-1300 lines). Replace everything between the line I’ve mentioned above and Special style for block cart line with this:
global.css:

PHP Code:

/* 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{
    background-position: left -420px;
    background-color: #CCC30E;
}
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;
} 


Finally, put the stepsSpr.gif that I’ve attached to this post in your theme’s directory img folder.