EyeCandy-Template 3-spaltig machen

[KlausK]

Mit einem Tipp vom Steffen (indiv-style.de) lässt sich das EyeCandy-Template mit 2 Handgriffen dreispaltig machen.

Datei: /templates/EyeCandy/index.html
Das suchen:

    <div id="main" class="clearfix">
        {if $BANNER}<div id="shop_top_banner">{$BANNER}</div>{/if}
        <div id="main_inside">
            {$IMGSLIDER}
            {$main_content}
        </div>
    </div>

    <div id="left" class="clearfix">
        {gm_menuboxes first=1 last=100 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
        {gm_menuboxes first=101 last=200 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
    </div> 

Ersetzen durch:

    <div id="dreiright" class="clearfix">
        {gm_menuboxes first=101 last=200 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
    </div>
    <div id="main" class="clearfix">
        {if $BANNER}<div id="shop_top_banner">{$BANNER}</div>{/if}
        <div id="main_inside">
            {$IMGSLIDER}
            {$main_content}
        </div>
    </div>
    <div id="left" class="clearfix">
        {gm_menuboxes first=1 last=100 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
    </div> 

Neue Datei anlegen: dreispaltig.css‎
Datei mit folgendem Inhalt füllen:

/* 
    Document   : dreispaltig
    Created on : 06.01.2013, 12:24:26
    Author     : www.indiv-style.de
    Description:
        Purpose of the stylesheet follows.
*/


#main {
    float: right;
    margin-left: 10px;
    margin-top: 10px;
    width: 570px;
}


#dreiright {
    float: right;
    margin: 10px 0;
    position: relative;
    width: 200px;
}

.article-list.cols .article-list-item {
    width: 183px;
}

.shopping_cart, .account, .article-list .article-list-item-right, .future_products{
    width: 550px;
}

.order_payment, .order_shipping, .checkout_paypal, .order_confirm, .order_thanks, .checkout_paypal {
    width: 550px;
}

.order_payment textarea.withdrawal_textarea, .order_payment textarea.agb_textarea, .order_payment #comments_textarea, .checkout_paypal #comments_textarea {

    width: 486px;
}

.order_payment .accept_box
{
    width: 490px;
}

.cols2 .col {
    width: 270px;
    margin-right: 10px;
}

Die Datei speichern und hochladen in /templates/EyeCandy/usermod/css/

Cache leeren nicht vergessen!