Benutzer-Werkzeuge

Webseiten-Werkzeuge


breedmaster:home-template

Dies ist eine alte Version des Dokuments!


Home-Template

Die Startseite, bzw. Home-Seite der Datenbank kann über ein HTML-Template fast vollständig umgestaltet werden. Dabei kann auf eine Reihe von vordefinierten Variablen zugegriffen werden. Diese sind durch geschweifte Klammern {} umschlossen.

Standard-Template

Nachfolgend ein Beispiel für eine Standardansicht, basierend auf Bootstrap:

<div class="container">
	<div class="row">
		<div id="links" class="col-md-3">
			{cms:mainmenu}
		</div>
		<div id="mitte" class="col-md-6">
			<p>{box:bemerkungen}</p>
			<p>{box:news}</p>
		</div>
		<div id="rechts" class="col-md-3">
			{box:schnellsuche}
			{box:zufallsbild} 
			{box:deckmeldungen} 
			{box:deckrueden} 
			{box:wuerfe} 
			{box:statistiken}
		</div>
	</div>
</div>

Zur Einteilung in Spalten wird das Grid-System von Bootstrap verwendet. Erkennbar an den CSS-Klassen mit den bezeichnungen col-md-x, wobei x die Breite der Spalte angibt. In Summe können in einer Zeile (row) maximal 12 Spalten genutzt werden.

2-Spaltiges Layout

Mit folgendem HTML-Code wird ein 2-spaltiges Layout genutzt, mit einer breiten linken Spalte.

<div class="container">
	<div class="row">
		<div id="links" class="col-md-8">
 
			{box:bemerkungen}
			{box:news}
		</div>
		<div id="rechts" class="col-md-4">
			{box:schnellsuche}
			{box:zufallsbild} 
			{cms:mainmenu}
			{box:deckmeldungen} 
			{box:deckrueden} 
			{box:wuerfe} 
			{box:statistiken}
		</div>
	</div>
</div>

Standard-Template (alt)

Folgendes Beispiel ist veraltet, aber nach wie vor funktionsfähig. Das Erscheinungsbild ist fast identisch mit obigen Beispiel:

	<div id="wrapper">
		<div class="custommenu" id="menubereich">
			<p>{cms:mainmenu}</p>
		</div>
		<div class="infotext" id="infobereich">
			<p>
			{box:schnellsuche}
			{box:zufallsbild}			
			{box:statistiken}
			{box:deckrueden}
			{box:wuerfe}
			{box:deckmeldungen}
			</p>
		</div>
		<div class="infotext" id="textbereich">
			<p>{box:bemerkungen}</p>
			<p>{box:news}</p>
		</div>
	</div>

Durch die vordefinierten CSS-Klassen wird ein 3-Spaltiger Seitenaufbau erreicht.

Es können beliebige Artikel des CMS eingebunden werden, hierzu wird eine Variable in der Form {cms:xxx} genutzt. Wobei xxx durch den Seitennamen der CMS-Seite ersetzt werden muss.

Darüber hinaus gibt es noch vordefinierte Blöcke/Boxen die über {box:xxx} genutzt werden können. Dabei darf xxx wie folgt lauten:

  • schnellsuche
  • zufallsbild
  • statistiken
  • deckrueden
  • wuerfe
  • deckmeldungen
  • paypal
  • bemerkungen
  • news

Zur einfacheren grafischen Gestaltung kann auf Standard Bootstrap-Klassen zurückgegriffen werden, wie z. B.

Zeigt einen Artikel in einer grünen Hinweisbox:

<div class="alert alert-success">{cms:xxx}</div>

Zeigt einen Artikel in einer roten Hinweisbox:

<div class="alert alert-danger">{cms:xxx}</div>

Zeigt einen Artikel in einer blauen Hinweisbox:

<div class="alert alert-info">{cms:xxx}</div>

Neben dem Template für die Home-Seite kann auch das Template für Showpage angepasst werden.

breedmaster/home-template.1529654628.txt.gz · Zuletzt geändert: 22.06.2018 08:03 von Manfred Link

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki