[HomePage :: Erste Schritte :: Alle Einstellungen :: Das System (Einstellungen und Konfiguration) :: Block Position :: Dieser Seite]  

Blockbreite: 1, 2 oder 3 Blockpositionen

Mit Impresscms ist es jetzt möglich eigene Blockpositionen zu definieren. Für Theme-Designer eigentlich eine super Sache. Bei dem neuen Theme natural-bloom wurden beispielsweise 3 neue Blockpositionen verwendet. Direkt über dem Fußbereich sind die 3 neuen Blöcke zu sehen. Die 3 Blöcke habe eine Breite von 33% und deshalb können sie auch neben einander stehen. Wie ist es aber wenn man nur 2 der 3 Blöcke anzeigen möchte? Dann haben sie weiterhin die Breite von 33% und füllen insgesamt nicht die volle Breite aus. Die 2 Blöcke sollten aber dann eine Breite von jeweils 50% haben.
In diesem Tutorial wird gezeigt wie man erkennt ob nur ein, zwei oder drei Blöcke eingeschaltet sind und dem entsprechen die Breite auf 100%, 50% oder 30% verändert wird.

Zunächst werden 3 neue Blockpositionen angelegt. Nennen wir sie mal "footerLinks", "footerRechts", "footerMitte". Im theme.html an der Stelle wo die neuen Blöcke angezeigt werden sollen, legt man folgenden Code hinzu:

/span>div id="footerlinks"
/span>{if $xoBlocks.footerLinks }
   /span>{foreach from=$xoBlocks.footerLinks item=block}
      /span>{includeq file="$theme_name/neueBlockPosition.html"}
   /span>{/foreach}
/span>{/if}
div>
/span>div id="footermitte"
/span>{if $xoBlocks.footerMitte }
   /span>{foreach from=$xoBlocks. footerMitte item=block}
        /span>{includeq file="$theme_name/neueBlockPosition.html"}
   /span>{/foreach}
/span>{/if}
div>
/span>div id="footerrechts"
/span>{if $xoBlocks.footerRechts }
   /span>{foreach from=$xoBlocks. footerRechts item=block}
        /span>{includeq file="$theme_name/neueBlockPosition.html"}
   /span>{/foreach}
/span>{/if}
div>




Somit sind im Theme die neuen 3 Blockpositionen definiert. Damit sie aber angezeigt werden, wird noch ein Template für diese 3 Blöcke benötigt. Über die folgenden Codezeile wird das Template aufgerufen:

/span>{includeq file="$theme_name/neueBlockPosition.html"}




Nun wird im Theme ein neues .html Dokument erstellt mit folgendem Inhalt:

/span>{if $block.title}
      /span>{$block.title}
/span>{/if}
/span>{$block.content}




Hier wird der Titel und Inhalt des Blocks angezeigt. Jetzt noch ein bisschen CSS damit die Blöcke nebeneinander stehen (das kann auch in die style.css eingetragen werden):

# footerlinks, footermitte {width: 33%, float: left;}
# footerrechts {width: 33%, float: right}




Über Administration werden die neuen 3 Blockpositionen erstellen (footerLinks, footerRechts, footerMitte) und schon können diese verwendet werden.

Die 3 Blöcke haben aber jetzt immer eine Breite von 33%. Das heißt, auch wenn nur ein Block von den 3 angezeigt wird, dann füllt er nicht die ganze Breite, sondern nur 1/3. Das sieht nicht schön aus und soll geändert werden.
Zunächst muss überprüfen wie viele von den 3 Blockposition überhaupt eingeschaltet sind. Dazu legt man in der theme.html direkt unter den body-tag folgendes an:

/span>{if ($xoBlocks.footerLinks and $xoBlocks.footerMitte and !$xoBlocks.footerRechts) ||
($xoBlocks.footerLinks and !$xoBlocks.footerMitte and $xoBlocks.footerRechts) ||
(!$xoBlocks.footerLinks and $xoBlocks.footerMitte and $xoBlocks.footerRechts)}
    /span>{assign var=bottomcolumns_layout value='twocolumn-layout'}

/span>{elseif ($xoBlocks.footerLinks and !$xoBlocks.bottomcenter and !$xoBlocks.footerRechts) ||
(!$xoBlocks.footerLinks and $xoBlocks.footerMitte and !$xoBlocks.footerRechts) ||
(!$xoBlocks.footerLinks and !$xoBlocks.footerMitte and $xoBlocks.footerRechts)}
    /span>{assign var=bottomcolumns_layout value='onecolumn-layout'}

/span>{elseif $xoBlocks.footerLinks and $xoBlocks.footerMitte and $xoBlocks.footerRechts }
    /span>{assign var=bottomcolumns_layout value='threecolumn-layout'}
/span>{/if}




Im Code oben überprüfen wird zuerst überprüft ob 2 Spalten (Blockpositionen) sichtbar sind und erstellen dafür eine variable $bottomcolumns_layout:

/span>{assign var=bottomcolumns_layout value='twocolumn-layout'}




dann wenn eine Spalte sichbar ist dann:

/span>{assign var=bottomcolumns_layout value='onecolumn-layout'}




und sonst sind dann alle 3 sichtbar:

/span>{assign var=bottomcolumns_layout value='threecolumn-layout'}




Am Schluss werden nur die Blockpositionen welche im Theme erstellt wurden um eine class="" erweitern:

/span>div id="footerlinks" class="<{$bottomcolumns_layout}">
/span>{if $xoBlocks.footerLinks }
        /span>{foreach from=$xoBlocks.footerLinks item=block}
                /span>{includeq file="$theme_name/neueBlockPosition.html"}
        /span>{/foreach}
/span>{/if}
div>
/span>div id="footermitte" class="<{$bottomcolumns_layout}">
/span>{if $xoBlocks.footerMitte }
        /span>{foreach from=$xoBlocks. footerMitte item=block}
                /span>{includeq file="$theme_name/neueBlockPosition.html"}
        /span>{/foreach}
/span>{/if}
div>
/span>div id="footerrechts" class="<{$bottomcolumns_layout}">
/span>{if $xoBlocks.footerRechts }
        /span>{foreach from=$xoBlocks. footerRechts item=block}
                /span>{includeq file="$theme_name/neueBlockPosition.html"}
        /span>{/foreach}
/span>{/if}
div>




Die css Zeilen muss noch etwas umgeschrieben werden:

# footerlinks, footermitte {float: left;}
# footerrechts {float: right}

. onecolumn-layout{width: 100%}
. twocolumn-layout{width: 49%}
. threecolumn-layout{width: 33%}




Fertig. Jetzt ändert sich die class der Blockpositionen je nachdem wie viele Blockpositionen sichbar sind.
Diese Seite wurde 1 Mal geändert
Aktualisierung 22.02.2012 von sato-san
Diese Seite wurde erstellt am 02.12.2011 von lotus
Diese Seite wurde 332 Mal angesehen

Kommentar
Die hier veröffentlichten Artikel und Kommentare stehen uneingeschränkt im alleinigen Verantwortungsbereich des jeweiligen Autors.