Template “fhs-left-right-17x”
Dessen Pflege ist zumindest vorübergehend eingestellt (Mai 2025).
Responsive Template für CMSimple_XH ab Version 1.7.4 – sollte auch mit früheren Versionen kompatibel sein.
- Overlay-Menü (Menülevel1-9)
- 2 Newsboxen (leicht erweiterbar, siehe template.htm "Newsboxes", keine css-Anpassung notwendig)
- Links für Impressum und Datenschutz in der template.htm vorbereitet.
Schriften
Standard-Schriftart: "Open Sans Condensed" von Google-Fonts.
Schriftformate: font-style: normal (font-weight: 300 und 700) und font-style: italic (font-weight: 300).
Bilder
Hintergrundbild: unsplash.com
Lizenz
Für private und kommerzielle Seiten nutzbar, unter Einhaltung von GPLv3 verwendbar.
Die Rechte Dritter bleiben unberührt.
Template “fhs-left-right-17x” – Original-Design
So sehen die Bereiche im Original-Template aus:
Dieses Template veränderte ich und passte es an meine Vorstellungen an.
Template “fhs-left-right-17x” – Mein Umbau
Zuerst änderte ich es die einzelnen Bereich im Header:
Oben links fügte ich den ↓ Locator ein. Auf der anderen Seite (rechts) fügte ich die Searchbox ein ↓ und löschte
sie anschließend im Navigationsmenü.
Außerdem entfernte ich das Headerbild und das Logo. Stattdessen fügte ich einen Lauftext (marquee) ein.
Der Hamburger und das "i" für die Newsboxen werden im Template so aufgerufen:
<div class="sb-toggle-left toggle-id-1"><i class="white btn fa fa-bars fa-lg fa-fw"></i></div>
<div class="sb-toggle-right toggle-id-2"><i class="white btn fa fa-info-circle fa-lg fa-fw"></i></div>
Weil weitere Bereiche eingefügt werden sollten, definierte ich diese
<div class="sb-toggle-left-right toggle-id-3"><class="locator"><?=$tx['locator']['text'] . ' ' . locator();?></div>
<div class="sb-toggle-right toggle-id-4"><?=searchbox();?></div>
und fügte sie genau darunter ein mit der fortlaufenden ID ein.
Für die Klasse ID3 ergänzte ich im CSS des Templates diese Erweiterung:
.sb-toggle-left-right { /* damit es eine weitere Möglichkeit gibt, für den Locator die "Mitte" in der Zeile einzustellen */
float: left;
display: inline-block;
padding: .5em 0 1em 0; /* damit es einen Abstand von 0,5em zum oberen Rand gibt und der Locator in der "Mitte" der Zeile ist */
color: #fff;
margin: .25em .5em;
cursor: pointer;
}
Interessanterweise brauchte ich für die Klasse ID4 keine andere CSS-Definitionen; es genügte die von
.sb-toggle-right.
Für den Marquee-Lauftext fügte ich im template.htm dies an dieser Stelle ein:
<div id="header">
<div id="banner">
<div class="bannerBrand">
<?=$tx['template']['text1']?><div class="marquee">Nichtkommerzielle Website rund um CMSimple_XH von Michael Zajusch</div><!-- SLOGAN Text1 from language config -->
</div>
In der Sprachdatei (cmsimple → languages → de.php) muss diese Zeile
$tx['template']['text1']="Text 1 für entsprechend vorbereitete Templates"; in
$tx['template']['text1']=""; geändert werden.
Im CSS fügte ich am Ende dies ein:
/* Start: running text - marquee */
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
div.marquee {
width: 100%;
margin: 10px;
padding: 7px 0 7px 0;
overflow: hidden;
white-space: nowrap;
animation: marquee 20s linear infinite;
}
div.marquee:hover {
animation-play-state: paused;
cursor: not-allowed;
}
/* Ende: running text - marquee */
Um den Footerbereich kleinerzu machen, änderte ich bei stylesheet.css bei #footer dieses:
margin: 0; /* original 2em 0 0; */
padding: 0; /* original 1em 0; */
font: normal 1.1em PTsans-Narrow, Arial, Helvetica, sans-serif;
min-height: 5em; /* original 10em; */
