<div id="order_step">
{if !$oneclick}
<ul>
{if $bestellschritt[1] == 1}
<li><span class="step_active">1.</span><span class="step_active_text">{#BillingAdress#}</span></li>
{elseif $bestellschritt[1] == 2}
<li><a href="bestellvorgang.php?editRechnungsadresse=1&{$SID}" class="linko"><span class="step">1.</span>{#BillingAdress#}</a></li>
{elseif $bestellschritt[1] == 3}
<li><span class="step">1.</span>{#BillingAdress#}</li>
{/if}
{if $bestellschritt[2] == 1}
<li><span class="step_active">2.</span><span class="step_active_text">{#ShippingAdress#}</span></li>
{elseif $bestellschritt[2] == 2}
<li><a href="bestellvorgang.php?editLieferadresse=1&{$SID}" class="linko"><span class="step">2.</span>{#ShippingAdress#}</a></li>
{elseif $bestellschritt[2] == 3}
<li><span class="step">2.</span>{#ShippingAdress#}</li>
{/if}
{if $bestellschritt[3] == 1}
<li><span class="step_active">3.</span><span class="step_active_text">{#ShippingOption#}</span></li>
{elseif $bestellschritt[3] == 2}
<li><a href="bestellvorgang.php?editVersandart=1&{$SID}" class="linko"><span class="step">3.</span>{#ShippingOption#}</a></li>
{elseif $bestellschritt[3] == 3}
<li><span class="step">3.</span>{#ShippingOption#}</li>
{/if}
{if $bestellschritt[4] == 1}
<li><span class="step_active">4.</span><span class="step_active_text">{#PaymentOption#}</span></li>
{elseif $bestellschritt[4] == 2}
<li><a href="bestellvorgang.php?editZahlungsart=1&{$SID}" class="linko"><span class="step">4.</span>{#PaymentOption#}</a></li>
{elseif $bestellschritt[4] == 3}
<li><span class="step">4.</span>{#PaymentOption#}</li>
{/if}
{if $bestellschritt[5] == 1}
<li><span class="step_active">5.</span><span class="step_active_text">{#summary#}</span></li>
{elseif $bestellschritt[5] == 2}
<li><span class="step">5.</span>{#summary#}</li>
{elseif $bestellschritt[5] == 3}
<li><span class="step">5.</span>{#summary#}</li>
{/if}
</ul>
{elseif $oneclick}
<ul style="margin:0 auto;padding:0;width:456px;">
{if $bestellschritt[1] == 1}
<li><span class="step_active">1.</span><span class="step_active_text">{#BillingAdress#}</span></li>
{elseif $bestellschritt[1] == 2}
<li><a href="bestellvorgang.php?editRechnungsadresse=1&{$SID}" class="linko"><span class="step">1.</span>{#BillingAdress#}</a></li>
{elseif $bestellschritt[1] == 3}
<li><span class="step">1.</span>{#BillingAdress#}</li>
{/if}
{if $bestellschritt[2] == 1}
<li><span class="step_active">2.</span><span class="step_active_text">{#OrderOptions#}</span></li>
{elseif $bestellschritt[2] == 2}
<li><a href="bestellvorgang.php?editLieferadresse=1&{$SID}" class="linko"><span class="step">2.</span>{#OrderOptions#}</a></li>
{elseif $bestellschritt[2] == 3}
<li><span class="step">2.</span>{#OrderOptions#}</li>
{/if}
{if $bestellschritt[3] == 1}
<li><span class="step_active">3.</span><span class="step_active_text">{#summary#}</span></li>
{elseif $bestellschritt[3] == 2}
<li><span class="step">3.</span>{#summary#}</li>
{elseif $bestellschritt[3] == 3}
<li><span class="step">3.</span>{#summary#}</li>
{/if}
</ul>
{/if}
</div>
#order_step {
height: 58px;
width: 760px;
margin: 6px 0 14px 0;
padding: 0 2px;
}
#order_step ul{
margin: 0;
padding: 0;
}
#order_step ul li{
font-family: Arial, Sans-serif;
font-size: 12px;
list-style-type: none;
display: inline;
color: #E962D0;
width: 152px;
text-align: center;
float:left;
}
#order_step li a{
display: inline-block;
color: #aa008b;
text-align: center;
font-weight: normal;
display: block;
margin: 21px 0 0;
}
.step {
font-size: 16px;
display: block;
margin: 20px 0 0;
}
.step_active {
color: #aa008b;
font-size: 30px;
display: block;
}
.step_active_text {
color: #aa008b;
font-size: 16px;
}
/*CHECKOUT BUTTONS ORDERSTEP */
#order_step {
height: 58px;
width: 530px; /*Breite ans Layout anpassen*/
background-image:url(../gfx/top_head.png);
margin: 6px 0 14px 0;
padding: 0 2px;
}
#order_step ul{
margin: 0;
padding: 0;
}
#order_step ul li{
font-size: 12px;
list-style-type: none;
display: block;
color: #ffffff;
width: 152px;
height: 46px;
background:url(../gfx/order_step_grey.gif) center center no-repeat;
text-align: center;
float:left;
}
#order_step li a{
display: block;
color: #fff;
text-align: center;
font-weight: normal;
height: 46px;
/* margin: 20px 0;
padding: 20px 0;*/
}
#order_step li a:hover{
background:url(../gfx/order_step.gif) center center no-repeat;
text-decoration: none;
}
.step {
font-size: 16px;
display: block;
margin: 0;
}
.step_active {
color: #ffffff;
background:url(../gfx/order_step.gif) center center no-repeat;
font-size: 30px;
display: block;
margin: 0;
padding: 4px 0;
}
.step_active_text {
color: #fff;
font-size: 16px;
}
/*----------------------------*/
Also der Code wird nur bedingt recycelbar sein:
Im Template:
Code:<div id="order_step"> {if !$oneclick} <ul> {if $bestellschritt[1] == 1} <li><span class="step_active">1.</span><span class="step_active_text">{#BillingAdress#}</span></li> {elseif $bestellschritt[1] == 2} <li><a href="bestellvorgang.php?editRechnungsadresse=1&{$SID}" class="linko"><span class="step">1.</span>{#BillingAdress#}</a></li> {elseif $bestellschritt[1] == 3} <li><span class="step">1.</span>{#BillingAdress#}</li> {/if} {if $bestellschritt[2] == 1} <li><span class="step_active">2.</span><span class="step_active_text">{#ShippingAdress#}</span></li> {elseif $bestellschritt[2] == 2} <li><a href="bestellvorgang.php?editLieferadresse=1&{$SID}" class="linko"><span class="step">2.</span>{#ShippingAdress#}</a></li> {elseif $bestellschritt[2] == 3} <li><span class="step">2.</span>{#ShippingAdress#}</li> {/if} {if $bestellschritt[3] == 1} <li><span class="step_active">3.</span><span class="step_active_text">{#ShippingOption#}</span></li> {elseif $bestellschritt[3] == 2} <li><a href="bestellvorgang.php?editVersandart=1&{$SID}" class="linko"><span class="step">3.</span>{#ShippingOption#}</a></li> {elseif $bestellschritt[3] == 3} <li><span class="step">3.</span>{#ShippingOption#}</li> {/if} {if $bestellschritt[4] == 1} <li><span class="step_active">4.</span><span class="step_active_text">{#PaymentOption#}</span></li> {elseif $bestellschritt[4] == 2} <li><a href="bestellvorgang.php?editZahlungsart=1&{$SID}" class="linko"><span class="step">4.</span>{#PaymentOption#}</a></li> {elseif $bestellschritt[4] == 3} <li><span class="step">4.</span>{#PaymentOption#}</li> {/if} {if $bestellschritt[5] == 1} <li><span class="step_active">5.</span><span class="step_active_text">{#summary#}</span></li> {elseif $bestellschritt[5] == 2} <li><span class="step">5.</span>{#summary#}</li> {elseif $bestellschritt[5] == 3} <li><span class="step">5.</span>{#summary#}</li> {/if} </ul> {elseif $oneclick} <ul style="margin:0 auto;padding:0;width:456px;"> {if $bestellschritt[1] == 1} <li><span class="step_active">1.</span><span class="step_active_text">{#BillingAdress#}</span></li> {elseif $bestellschritt[1] == 2} <li><a href="bestellvorgang.php?editRechnungsadresse=1&{$SID}" class="linko"><span class="step">1.</span>{#BillingAdress#}</a></li> {elseif $bestellschritt[1] == 3} <li><span class="step">1.</span>{#BillingAdress#}</li> {/if} {if $bestellschritt[2] == 1} <li><span class="step_active">2.</span><span class="step_active_text">{#OrderOptions#}</span></li> {elseif $bestellschritt[2] == 2} <li><a href="bestellvorgang.php?editLieferadresse=1&{$SID}" class="linko"><span class="step">2.</span>{#OrderOptions#}</a></li> {elseif $bestellschritt[2] == 3} <li><span class="step">2.</span>{#OrderOptions#}</li> {/if} {if $bestellschritt[3] == 1} <li><span class="step_active">3.</span><span class="step_active_text">{#summary#}</span></li> {elseif $bestellschritt[3] == 2} <li><span class="step">3.</span>{#summary#}</li> {elseif $bestellschritt[3] == 3} <li><span class="step">3.</span>{#summary#}</li> {/if} </ul> {/if} </div>
^^wo genau muss das denn rein?
<div id="content_head_bestell">
<img alt="" src="{$currentTemplateDir}gfx/{$lang}/bestellschritte/bestellvorgang_step1_{$bestellschritt[1]}.png">
<img alt="" src="{$currentTemplateDir}gfx/{$lang}/bestellschritte/bestellvorgang_step2_{$bestellschritt[2]}.png">
<img alt="" src="{$currentTemplateDir}gfx/{$lang}/bestellschritte/bestellvorgang_step3_{$bestellschritt[3]}.png">
<img alt="" src="{$currentTemplateDir}gfx/{$lang}/bestellschritte/bestellvorgang_step4_{$bestellschritt[4]}.png">
<img alt="" src="{$currentTemplateDir}gfx/{$lang}/bestellschritte/bestellvorgang_step5_{$bestellschritt[5]}.png">
</div>