Schulhomepage mit Typo3 erstellen - Tutorial-Teil 2: Eine Sidebar schafft mehr Platz

2. Teil der Anleitung Schulhomepage mit Typo3 erstellen: Eine Sidebar schafft mehr Platz.
Anzeige

Schritt 2: Eine Sidebar schafft mehr Platz

In dem ursprünglichen Design ist gar keine Sidebar vorgesehen — trotzdem fügen wir diese jetzt nachträglich hinzu, denn wir brauchen sie auf jeden Fall, um später ein Untermenü anzuzeigen. Außerdem können wir hier später beispielsweise einen Kalender oder sonstige Inhalte anzeigen, die wir auf der ganzen Internetseite darstellen wollen.

Als erstes bearbeiten wir das Template. Dazu öffnen wir die Dateien »\fileadmin\templates\main\index.html« und »\fileadmin\templates\main\css\style.css«.

In der Datei »index.html« müssen wir ein neues Div für die Sidebar hinzufügen.

 

 <div id="columns"> 				<div id="mainColumn"> 					<h1>###HEADING###</h1> 					###CONTENT### 				</div> 				<div id="sidebarColumn"> 					###SIDEBAR### 				</div> 			</div>

 

Außerhalb des Divs »columns« habe ich nichts verändert, kopieren Sie den Code einfach in das Template und ersetzen Sie damit das alte Div.

Jetzt müssen wir noch die Datei »style.css« anpassen, hier müssen wir folgende Zeilen hinzufügen:

 

#sidebarColumn { 	margin-right: 600px; 	padding-top: 5px; } #mainColumn { 	float: right; 	width: 560px; } h1 { 	margin: 35px 0px 15px; 	 	font-size: 1.7em; 	font-family: TitilliumText22LLight, Verdana, Geneva, sans-serif; 	font-weight: normal; } h2 { 	margin: 30px 0px 10px; 	 	font-size: 1.3em; 	font-family: TitilliumText22LLight, Verdana, Geneva, sans-serif; 	font-weight: normal; 	 	overflow: hidden; 	white-space: nowrap; } h2:before { 	content: ""; 	display: inline-block; 	 	width: 5px; 	height: 0.6em; 	 	vertical-align: top; 	 	margin-right: 8px; 	 	border-bottom: 1px solid #dedbdc; } h2:after { 	content: ""; 	display: inline-block; 	 	width: 100%; 	height: 0.6em; 	 	vertical-align: top; 	 	margin-left: 8px; 	 	border-bottom: 1px solid #dedbdc; } h3 { 	margin: 15px 0px 0px; 	 	font-size: 1em; 	font-weight: bold; }

 

Wo ich schonmal dabei war, habe ich direkt das Aussehen von Überschriften etwas angepasst, denn diese werden wir noch brauchen.

Öffnen wir jetzt die Seite, sehen wir in der Sidebar nichts weiter als den Platzhalter ###SIDEBAR### in der Sidebar. Das müssen wir jetzt in unserem TypoScript-Template ändern. Dazu wählen wir im Typo3-Backend das Modul »Template« und wählen die Seite »Testseite« aus, anschließend klicken wir auf das Edit-Icon vor »Setup«.

Vor der Zeile temp.docBody = TEMPLATE fügen wir folgendes TypoScript hinzu:

 

temp.sidebar = COA temp.sidebar {   20 < styles.content.getLeft   20.slide = -1 }

 

Außerdem fügen wir vor der Zeile NAVIGATION_ITEMS < temp.mainMenu eine neue Zeile mit dem Inhalt SIDEBAR < temp.sidebar hinzu.

Auf der Seite sehen wir, dass der Platzhalter ###SIDEBAR### verschwunden ist, aber es wir noch keine Sidebar angezeigt — wir habe ja auch noch überhaupt keinen Inhalt für die Sidebar definiert.

Erstmal können wir aber nicht benötigte Spalten im Backend ausblenden, das macht später das Pflegen des Inhaltes einfacher. Dazu bearbeiten wir die Eigenschaften der Seite »Testseite« und fügen unter »Resources« in das Feld »TypoScript Configuration« den Inhalt mod.SHARED.colPos_list = 1,0 ein. Damit definieren wir, das beim Bearbeiten dieser Seite und aller Unterseiten nur die Spalten »Normal« und »Left« verfügbar sein sollen.

Übrigens funktioniert auch der RSS-Feed jetzt schon, denn die Sidebar wird schon angezeigt. Jedes mal wenn irgendeine Seite angezeigt wird, wird der RSS-Feed der Seite aktualisiert. Wenn wir auf dem Webserver schauen, finden wir eine neue Datei »rssfeed.xml«, wir müssen nur dem Browser sagen, dass dies der RSS-Feed der Seite ist. Dazu öffnen wir die Datei »\fileadmin\templates\main\index.html« und ändern sie etwas.

 

	<!-- ###DOCUMENT_HEADER### begin --> 	<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 	<link type="text/css" href="/fileadmin/templates/main/css/style.css" rel="stylesheet"> 	<link rel="alternate" type="application/rss+xml" title="News" href="rssfeed.xml" /> 	<!-- ###DOCUMENT_HEADER### end -->

 

Ich habe wieder nur diesen Abschnitt verändert, der Rest ist gleich geblieben. Nun ist im Browser das Abonnieren des RSS-Feeds möglich.