Blogix

Fügt man in TemplaVoila mehrere Elemente vom Typ “Content Elements” in ein “Page Template” oder “Flexible Content Element (FCE)” ein, so werden diese in der Seiten-Ansicht im Backend nebeneinander dargestellt. Für den Kunden ist es allerdings nicht intuitiv, wenn er Elemente aus beispielsweise dem Header links vom Inhalt, statt über dem Inhalt im Backend vorfindet. Übersichtlicher wäre es, wenn man im Backend die selbe Anordnung der Elemente festlegt, wie sie im Frontend ausgegeben werden.

Zuerst wechselt man zum Modul “Web > TemplaVoila” und im Seitenbaum (Pagetree) zum Ordner/SysFolder, in dem die “Data Structure (DS)” und “Template Object (TO)” gespeichert sind – üblicherweise nennt sich dieser Ordner “Storage Folder”. Dort bekommt man unter anderem die XML-Konfiguration zu sehen, wenn man die entsprechende DS editiert. In diesem XML fügt man im Bereich “<meta type=”array”>” den Abschnitt “<beLayout>” mit etwas HTML ein. Das XML sieht anschließend in etwa wie folgt aus:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
		<beLayout><![CDATA[
			<table border="0" cellpadding="2" cellspacing="2" width="100%">
				<tr>
					<td valign="top" width="100%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;" colspan="2">###field_headerads###</td>
				</tr>
				<tr>
					<td valign="top" width="50%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;">###field_content###</td>
					<td valign="top" width="50%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;">###field_rightsidebar###</td>
				</tr>
			</table>
              ]]></beLayout>
	</meta>
	<ROOT type="array">
		[...]
	</ROOT>
</T3DataStructure>

Der HTML-Code ist in diesem Fall zwar nicht sauber, entspricht aber der Standardausgabe von TemplaVoila mit ein paar Modifikationen. Platzhalter setzen sich aus dem Feldnamen und drei Raute-Zeichen davor und danach zusammen. Die Elemente field_headerads und field_content bzw. field_rightsidebar werden untereinander dargestellt, d.h. field_headerads in der ersten Zeile, field_content und field_rightsidebar in der zweiten Zeile.

Um einzelnen Inhaltselementen (Content Elements) ein unterschiedliches Aussehen verpassen zu können gibt es in TYPO3 die Eigenschaft “Rahmen” (“Border” im englischen Backend ). Diese können mit ein paar Zeilen TypoScript einfach hinzugefügt werden. Zuerst muss in der “TSconfig” (Web > Seite; “Seiteneigenschaften bearbeiten”; Registerkarte “Optionen”) der Hauptseite (Rootpage) der neue Rahmen definiert werden:

TCEFORM.tt_content.section_frame {
  removeItems = 1,5,6,10,11,12,20,21
  addItems {
    100 = Roter Teaser
    110 = Blauer Teaser
  }
}

Standardmäßig vorhandene Rahmen werden mit “removeItems” entfernt, neue mit “addItems” hinzugefügt – in diesem Fall werden ein “Roter Teaser” mit der ID 100 und ein “Blauer Teaser” mit der ID 110. Es empfiehlt sich IDs über 100 zu verwenden, damit es zu keinen Überschneidungen mit den vordefinierten Rahmen kommt, sollten diese auch verwendet/benötigt werden.

Als nächstes muss im “Setup” (Web > Template; “Setup bearbeiten”) der Hauptseite das nötige HTML mittels TypoScript hinzugefügt werden, damit das Inhaltselement mit dem ausgewählten “Rahmen” dargestellt werden kann:

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame
  
  100 = TEXT
  100.value = <div class="teaser-red"> | </div>
 
  110 = TEXT
  110.value = <div class="teaser-blue"> | </div>
}

Im CSS, das bereits eingebunden sein sollte, kann nun das Aussehen der beiden Teaser festgelegt werden:

div.teaser-red {
  border: 1px solid #ff0000;
  color: #ff0000;
}
div.teaser-blue {
  border: 1px solid #0000ff;
  color: #0000ff;
} 

Im Web findet man sehr oft kleine JavaScript-Snippets die beim Aktivieren eines Textfeldes den Standard-Wert entfernen und bei leerem Feld diesen wieder einfügen. Der Code dazu sieht in etwa wie folgt aus:

<input type="text" name="text" value="Standard"
  onfocus="if (this.value == 'Standard') { this.value = ''; };"
  onblur="if (this.value == '') { this.value = 'Standard'; };" />

Das hat meiner Meinung nach zwei sehr große Nachteile: Zum einen geht der Standard-Wert automatisch verloren und man kann diesen nicht bearbeiten (sollte man diesen brauchen), zum anderen ist es nicht möglich das Feld leer zu lassen, außer der onblur-Event wird nicht eingefügt.

Abhilfe schafft die JavaScript-Funktion select() die den Text des Eingabefeldes markiert – der Code sieht dann in der einfachsten Form wie folgt aus:

<input type="text name="test" value="Standard" 
  onfocus="this.select();" /> 

Möchte man den HTML-Code frei von JavaScript-Funktionen halten, so kann man dies für alle Textfelder sehr einfach, in diesem Fall mit MooTools realisiert, bewerkstelligen:

window.addEvent('domready', function() {
  $$('input[type=text]').addEvents({ 'focus': function() { this.select(); } });
});

Die Web Developer Toolbar von Chris Pederick ist unverzichtbar für jeden Webentwickler. Sie ist kostenlos erhältlich und lässt sich in die Browser Firefox, Flock und Seamonkey integrieren. Bei der Web Developer Toolbar handelt es sich um eine umfangreiche Sammlung von nützlichen Werkzeugen, für die zuvor einige Plug-Ins installiert werden mussten, um die selben Ergebnisse erreichen zu können. So ist es damit möglich einige Einstellungen (Cache, Java, JavaScript,…) auf die Schnelle zu (de-)aktivieren. Weiters nützlich bei der Verwaltung von Cookies, Entwicklung von CSS, Erstellung/Änderung von Formularen und Einbindung von Grafiken. Mit einigen Einstellungen lässt sich die Seite so darstellen, wie sie eine Suchmaschine, oder auf Text-Browser angewiesene Menschen sehen würden. Sonstige Funktionen sind die Darstellungen mit unterschiedlichen Bildschirmauflösungen, hervorheben von Elementen, Benutzung von Lupe und Lineal. Leider konnte ich nur einen kurzen Überblick geben, denn die Möglichkeiten sind praktisch unendlich.