[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:
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:
Nun wird im Theme ein neues .html Dokument erstellt mit folgendem Inhalt:
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):
Ü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:
Im Code oben überprüfen wird zuerst überprüft ob 2 Spalten (Blockpositionen) sichtbar sind und erstellen dafür eine variable $bottomcolumns_layout:
dann wenn eine Spalte sichbar ist dann:
und sonst sind dann alle 3 sichtbar:
Am Schluss werden nur die Blockpositionen welche im Theme erstellt wurden um eine class="" erweitern:
Die css Zeilen muss noch etwas umgeschrieben werden:
Fertig. Jetzt ändert sich die class der Blockpositionen je nachdem wie viele Blockpositionen sichbar sind.
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.