2011-10-28T13:48:52Z

Psi: Die Seite wurde neu angelegt: „Category:Extensions {{ExtInfo | DevSite=http://www.4wardmedia.de.de | ExtVersion=1.0.0 | Version=2.10.x | ERLink=http://www.contao.org/erweiterungsliste/view/…“

[[Category:Extensions]]
{{ExtInfo
| DevSite=http://www.4wardmedia.de.de
| ExtVersion=1.0.0
| Version=2.10.x
| ERLink=http://www.contao.org/erweiterungsliste/view/autocompleterTextfield.html
| TrackerLink=http://contao-forge.org/projects/autocompleterTextfield/issues
}}

[[Datei:AutocompleterTextfield.png]]

Autocompleting für ein Textfeld anhand von ''options'', ''options_callback'' oder ''foreignKey''. \\
Über die Eval-Option ''storeId'' kann die ID bzw. der Array-Key anstatt der Textwert gespeichert werden.

==Einfaches Textfeld, Vervollständigung anhand der tl_page, Speicherung der tl_page.id==

<source lang="php">
'myPage' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_tmp']['myPage'],
'inputType' => 'autocompleterTextfield',
'foreignKey' => 'tl_page.title',
'eval' => array('storeId'=>true)
),
</source>

==Einfaches Textfeld, Vervollständigung anhand von ''options''==

<source lang="php">
'myPage' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_tmp']['myPage'],
'inputType' => 'autocompleterTextfield',
'options' => array('Erster Eintrag','Zweiter Eintrag','Dritter Eintrag')
),
</source>

==Verwendung im [[MultiColumnWizard]]==

<source lang="php">
'einFeld' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_asd']['einFeld'],
'inputType' => 'multiColumnWizard',
'eval' => array(
'columnFields' => array
(
'myTxt' => array
(
'label' => array('label','desc'),
'inputType' => 'autocompleterTextfield',
'options' => array('Erster Eintrag','Zweiter Eintrag','Dritter Eintrag'),
'eval' => array('style'=>'width:180px')
),
'myTxt2' => array
(
'label' => array('label','desc'),
'inputType' => 'autocompleterTextfield',
'options_callback' => array('myClass','myCallback'),
'eval' => array('style'=>'width:180px')
),
)
),
),
</source>

Datei:AutocompleterTextfield.png

2011-10-28T13:47:24Z

Psi:

Futuretable

2011-09-06T20:51:00Z

Psi: /* Funktional */

=Wir haben und wollen behalten=

* Übersichtliches einfaches Backend
* Strukturierte Inhalte
* Frontend Themes aus Modulen, Layouts usw.

=Wir haben und können eventuell drauf verzichten (zu Gunsten von etwas besserem)=

* Einfaches Caching
* Einfache Request Klasse
* Session Handling für Logins etc.
* Browser Detection
* Class Loader
* File-Handling
* Übersetzungen für statischen Text
* Validatoren pro Widget

=Ein Muss für die Zukunft=

==Technisch==

* PHP 5.3 Namespaces
* Database Abstraction Layer (DBAL) - Mögliche Frameworks: Doctrine DBAL
* Objective-Relational-Mapping (ORM) - Mögliche Frameworks: Doctrine ORM
* Umfangreiches Caching [Was ist hiermit gemeint? Was den FECache angeht, wäre es super, wenn wir das über die htaccess ziehen könnten, ähnlich wie das bei WP das Supercache Modul mach (backbone)]
* HTTP Request Handler [Was ist hiermit gemeint? (backbone) Klassen die mit HTTP-Requests umgehen (Toflar); Immer noch net genau genug? Klassen die mit dem derzeitigen Request umgehen? Da hat Symfony die Request/Response Klassen die man auch separat ohne das ganze FW nutzen könnte. Oder klassen die einen HTTP-Request ausführen können? (backbone);]
* Virtual File System, VFS
* Access Control List (ACL) (via Permissions) + Role Based (+ multiple Identities, also Trennung von Anmelde- und Benutzerinformationen)
* Globale Validatoren (damit Widgets, die identisch validieren, den gleichen Validator nutzen)
* Inhalts-Übersetzungen auch auf DB-Ebene [Würde das nicht auf DB-Ebene zwingen, lieber einen Übersetzungsdatei-Editor (backbone) Das meinte ich nicht, ich meine Datensätze für verschiedene Sprachen editierbar zu machen. Sowas gehört garantiert nicht in ein File ;-) (Toflar); hab mal das konkretisiert in im Stichpunkt (backbone)]
* Versionierung von Inhalten nicht über separate Tabelle, sondern in die Inhaltstabellen integriert
* Verbesserte relationale Baumstrukturen

==Funktional==

* Template Engine (Twig, Smarty)
* Ein neues, richtig geiles Extension Repository
* Gut Dokumentiert
* Einfach zu handhaben
* Auslagern von Standardkomponenten (Nachrichten, Events, Newsletter usw.) in Erweiterungen (die eventuell bei einer Standardinstallation mitgeliefert werden).
* Besseren Formulargenerator
** Subpaletten, wie gehabt
** bessere Widgets mit mehr Javascript
** Widgets alla MultiTextWizard zur Pflege von Kinddatensätzen, hier ggf. auch Subformulare (dcawizard)
** Formulare über mehrere Seiten
** abgekoppelt vom Speicherort

=Nice to have=

* Updatefähig (Contao 2 -> Contao 3) [auch ein Muss, aber wenn die Erweiterungen nicht kompatibel sind, stelle ich mir das schwer vor (Glen) Naja, der Core muss sich ja updaten können und ich denke da geht es vor allem um Content, nicht um Settings oder Dinge von Erweiterungen (Toflar)]
* Ein neues Backend-Theme, mehr Javascript/Ajax für den User wie z.B. Drag n' Drop etc. Dinge die uns HTML5 bringt - Dinge die nicht dazu erfunden wurden, um links liegen gelassen zu werden! [würde ich als Muss, bezeichnen (backbone)]
* WebDAV Access auf die Dateiverwaltung
* Zuordnung von Inhalten/Seiten zu Publication-Sets, welche von einer Publication verwendet werden um für einen bestimmten Zeitraum den Zustand der Seite zu representieren. Also sozusagen, ein integriertes Dev -> Stage -> Live System.
* Jeder Inhalt, der eine eigene Seite erfordert (Newseinträge), bekommt auch einen Eintrag in der Seitenstruktur, damit die Seitenstruktur die komplette URL-Struktur representiert.
* INSERT-only Prinzip für Inhalts-/Seiten-Tabellen (und DELETE von alten/ungenutzen Datensätzen)
* Dualer Datenbank Zugriff, Möglichkeit für 2 verschiedene Datenbankaccounts: Einer der alles außer GRANT darf und einer der nur DML darf. Somit kann sichergestellt werden das DDL nur nach expliziter Erlaubnis des Users möglich ist. (Der Code der DDL ausführen möchte, muss eine Art "Systemcall" durchführen, der checkt, ob der BE-Benutzer überhaupt die Permission für DDL hat, wenn ja wird der Nutzer explizit gefragt. Bei Bestätigung wird die DDL-Query ausgeführt und anschließend mit einem Callback im "Usercode" weitergemacht)

Backboneit navigation

2011-08-09T14:47:26Z

Psi: /* Navigation per Hook erweitern */

[[Category:Extensions]]
{{ExtInfo
| Dev=Oliver Hoff
| DevSite=http://www.hofff.com/
| ExtVersion=1.0.0
| Version=ab 2.9
| TLVersion=2.7.0 - 2.8.4
| TrackerLink=http://www.contao-forge.org/projects/backboneitnavigation/issues
| ERLink=http://www.contao.org/erweiterungsliste/view/backboneit_navigation.10000009.de.html
}}

= backboneit_navigation =

Erweiterung bestehend aus einer Sammlung von Navigationselementen (vorerst nur ein erweitertes Navigationsmodul).

Anmerkungen zum Bestimmen der Sichtbarkeit einer Seite:
* Der Veröffentlichungsstatus gilt ausschließlich für eine Seite selbst. Das heißt zum Beispiel, dass eine Navigation durchaus dargestellt wird, selbst wenn die Referenzseite nicht veröffentlicht ist.
* Der Seitenschutz für bestimmte Mitgliedergruppen vererbt sich auf alle Unterseiten, außer denjenigen die selbst explizit einen Seitenschutz für Mitgliedergruppen definieren und deren Unterseiten.
* Die Einstellung "Nur Gästen anzeigen" gilt nur für die Seite selbst. Tatsächlich ist die Seite für angemeldete Benutzer auch noch verfügbar, soll nur in keiner Navigation angezeigt werden. (Anders als zum Beispiel Artikel, die nur Gästen angezeigt werden. Diese werden gar nicht mehr gerendert.)
* "Im Menü verstecken" gilt nur für die Seite selbst.

== Navigationsmenü ==

Ein Multitalent: Es ist alles möglich was mit einem Navigationsmenü oder einer Individuellen Navigation möglich ist, Kombinationen aus beiden und noch einiges mehr. Einfach ausprobieren.

Funktionen:
* Kompatibel zu den Templates für das Standard-Navigationsmenü (einziger Unterschied ist, das Seiten die CSS-Klasse "submenu" tatsächlich auch nur dann bekommen, wenn dieses Untermenü gerendert wird)
* Mehrere Referenzseiten (Wurzeln der Navigation)
* Aktuelle Seite als Referenzseite
* Startebene wird relativ zu den Referenzseiten berechnet (negative Startebene möglich)
* Hardlimit flexibel (Anmerkung: Stopebene und Hardlimit beziehen sich relativ zur Startebene &endash; diessollte auch durch die geänderten Labels der Moduleinstellungen hervorgehen.
* Versteckte und geschützte Seiten anzeigen
* Als Sitemap verwendbar
* Optimierte Algorithmen: Zum Beispiel wird pro Navigationsebene nur noch eine Datenbankabfrage durchgeführt, was vorallem bei einer sehr verzweigten Navigation Vorteile bringen sollte.
* Erweiterbar per Hook

=== Navigation per Hook erweitern ===
config.php
<source>
$GLOBALS['TL_HOOKS']['backboneit_navigation_menu'][] = array('MyNavigationHook', 'hook');
</source>

MyNavigationHook.php
<source>
class MyNavigationHook {

// ... singleton dummy code ...

public function hook($objThis, $arrRoots) {
$intParentID = 1; // the ID of the parent node, were your new node should be appended/inserted to.

if(!isset($objThis->arrItems[$intParentID])) // test if the parent should be rendered (to avoid my hook, if it is not needed)
return;

$strMyNewNodeID = 'MyNavigationHook' . 1; // to avoid collision do not use plain numbers (reservered for tl_page dataset IDs)
// and prefix the ID with something specific to your hook

$objThis->varActiveID = $strMyNewNodeID; // set my new node as active navigation item

$objThis->arrSubpages[$intParentID][] = $strMyNewNodeID; // append the my new node to the end of $intParentIDs childs
$arrRoots[] = $strMyNewNodeID; // additionally add my new node to the end of the first level

$objThis->arrItems[$strMyNewNodeID] = array(
'class' => 'myclass',
'isTrail' => true, // whether this node is in the trail path of the active page
// ... more rendering information for the navigation template (see class AbstractNavigationMenu for all fields) ...
);

return $arrRoots; // return the modified first navigation level (not needed if unmodified)
}

}
</source>

=== Beispiel ===
Folgendes Beispiel fügt einen Level_1 Eintrag und dazu mehrere Level_2 Einträge zum aktuellen Level_0 Eintrag hinzu:

- Level_0<br>
-- Level_1 (wird eingefügt)<br>
--- Level_2.0 (wird eingefügt)<br>
--- Level_2.1 (wird eingefügt)<br>
--- Level_2.2 (wird eingefügt)<br>

<source>
<?php

/**
* Helperclass to insert navigation-items
* @author psi
*/
class Brands_BackboneNavi extends Controller
{

public function hook($objNav, $arrRoots)
{
$this->import('Database');

// Eine contao-seite enthält ein modul mit "virtuellen" unterseiten
// Bsp: http://example.com/module-page/item1.html
// Bsp2: http://example.com/module-page/item1/subitem1.html
// herrausschneiden von "item1"
if(!preg_match("~^".preg_quote($GLOBALS['objPage']->alias,'~')."/([a-z0-9_-]+).*\.html$~i",$this->Environment->request,$erg)) return;

// level_1 Eintrag anhand von "item1" einfügen
$objDesigner = $this->Database->prepare('SELECT id,title,alias FROM tl_brand WHERE alias=? AND published=?')->execute($erg[1],'1');
if(!$objDesigner->numRows) return;

// Seite in den Navigations-Pool hinzufügen
$objNav->arrItems[$objDesigner->alias.'-'.$objDesigner->id] = array
(
'link' => $objDesigner->title,
'href' => $this->generateFrontendUrl($GLOBALS['objPage']->row(),'/'.$objDesigner->alias),
// 'isTrail' => (preg_match("~".preg_quote($objDesigner->alias,'~')."\.html$~i",$this->Environment->request))
'isTrail' => true // wir zeigen ohnehin immer nur einen Eintrag des level_1 an, deshalb immer true
);

// als Unterseite von level_0 zuweisen
$objNav->arrSubpages[$GLOBALS['objPage']->id][] = $objDesigner->alias.'-'.$objDesigner->id;

// level_2 Einträge einfügen
$objCats = $this->Database->prepare('SELECT category,categoryAlias FROM tl_brand_product WHERE pid=? AND published=? GROUP BY category')->execute($objDesigner->id,'1');
while($objCats->next())
{
// Seite in den Navigations-Pool hinzufügen
$objNav->arrItems[$objDesigner->id.'-'.$objCats->categoryAlias] = array
(
'link' => $objCats->category,
'href' => $this->generateFrontendUrl($GLOBALS['objPage']->row(),'/'.$objDesigner->alias.'/'.$objCats->categoryAlias),
'isTrail' => (preg_match("~".preg_quote($objCats->categoryAlias,'~')."(/.+|.html)$~i",$this->Environment->request))
);
// Seite als Unterseite des level_1 Eitnrags zuweisen
$objNav->arrSubpages[$objDesigner->alias.'-'.$objDesigner->id][] = $objDesigner->id.'-'.$objCats->categoryAlias;
}

return $arrRoots;
}
}
?>
</source>

Stylepicker4ward

2011-06-29T15:05:08Z

Psi:

[[Kategorie:Extensions]]

= Stylepicker =

Wizard zur Auswahl von CSS-Klassennamen in Inhaltselementen und anderen Objekten. <br>
Die verfügbaren Klassennamen müssen zuvor im Theme als Vorlage eingetragen werden. <br>
Sie werden oft zur Designanpssung von einzelnen Elementen genutzt.
{{ExtInfo
| Dev=Christoph Wiechert ([[User:psi|psi]])
| DevSite=http://www.4wardmedia.de
| ExtVersion=1.0.0
| Version=2.9.5 - 2.9.10
| ERLink=http://www.contao.org/erweiterungsliste/view/Stylepicker4ward.de.html
}}

== Schrittweise Anleitung ==

Nachdem der Installation aus dem Repository müssen im Theme die Klassennamen-Vorlagen erstellt werden. <br>
Sie können neben dem Titel zusätzlich einen Beschreibungstext und ein Vorschaubild angeben.

[[Datei:Stylepicker Theme.png]]

[[Datei:Stylepicker edit.png]]

Datei:Stylepicker edit.png

2011-06-29T15:05:06Z

Psi:

Datei:Stylepicker Theme.png

2011-06-29T15:03:51Z

Psi:

Stylepicker4ward

2011-06-29T15:01:42Z

Psi: Die Seite wurde neu angelegt: „Kategorie:Extensions = Stylepicker = Wizard zur Auswahl von CSS-Klassennamen in Inhaltselementen und anderen Objekten. <br> Die verfügbaren Klassennamen m…“

DCA: Sortierung anhand einer Kindtabelle

2010-12-30T18:16:43Z

Psi:

[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo|Version=ab 2.9}}

Es gibt die Möglichkeit eine Tabelle anhand von Kinddatensätzen zu sortieren.
Ich habe dieses Verhalten benötigt, da ich alle Sprachattribute (und damit auch den Title) in einer untergeordnete Tabelle ausgelagert habe.

[[File:DCA_childsorting_schema.png|border|172x90px]]

Um den ListView von '''tl_main''' zur Sortierung nach '''tl_sub.title''' zu bringen kann man ein Subquery als Sortierfeld angeben:

<source lang="php">
<?php
...
'sorting' => array
(
'mode' => 1,
'fields' => array('(SELECT title FROM tl_sub WHERE tl_sub.pid = tl_main.id)'),
'flag' => 11,
'panelLayout' => 'filter;search,limit',
'disableGrouping' => true
),
...
?>
</source>

--[[Benutzer:Psi|Psi]]

2010-11-22T17:45:44Z

Psi: /* Funktionsweise und Methoden */

Klasse Formular

2010-11-22T17:45:15Z

Psi: /* Interaktion mit Erweiterungen */

[[Category:Module]]
{{stub}}

= Funktionsweise und Methoden =

Die Klasse ''Formular'' erstellt Formulare aus DCA-Arrays:

<source lang="php">
// Die DCA-Definition
$dca = array
(
'Kontaktdaten' => array
(
'label' => 'Ihre Kontaktdaten',
'inputType' => 'headline'
),
'vorname' => array
(
'label' => 'Vorname',
'inputType' => 'text',
'default' => 'vorname',
'eval' => array('mandatory'=>true,'helpmessage'=>'Ihr Vorname')
),
'nachname' => array
(
'label' => 'Nachname',
'inputType' => 'text',
'default' => 'nachname',
'eval' => array('mandatory'=>true,'helpmessage'=>'Ihr Nachname')
),
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('datepicker'=>$this->getDatePickerString(),'cleardefault'=>false)
),

'email' => array
(
'label' => 'E-Mail',
'inputType' => 'text',
'eval' => array('mandatory'=>true,'rgxp'=>'email')
),
'telefon' => array
(
'label' => 'Telefon',
'inputType' => 'text',
'eval' => array('mandatory'=>true)
),
'bemerkung' => array
(
'label' => 'Bemerkung',
'inputType' => 'textarea',
'eval' => array('rte'=>'tinyMCE')
),
'submit' => array
(
'label' => 'speichern',
'inputType' => 'submit'
)
);

// Instantiirung mit der FormularID meinKontaktformular
$frm = new Formular('meinKontaktformular');

// Übergabe des DCA-Arrays
$frm->setDCA($dca);

// Konfiguration
$frm->setConfig('generateFormat','<div>%label %field %error </div>');
$frm->setConfig('attributes',array('tableless'=>true));

// Formular wurde abgeschickt und ist korrekt
if($frm->isSubmitted() && $frm->validate())
{
var_dump($frm->getData());
}

// Ausgabe des Formulars
echo $frm->parse();
</source>

=Konfiguration=

=Interaktion mit Erweiterungen=

==cleardefault==

[http://www.contao.org/erweiterungsliste/view/cleardefault.de.html Cleardefault] löscht den Standardwert sobald das Textfeld den Fokus bekommt.
Ist die Erweiterung installiert werden alle Textfelder und Textareas mit diesem Verhalten versehen. Über das @eval@ Array kann es für ein
einzelnes Feld angepasst werden:

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('cleardefault'=>false)
)
);
</source>
''' 'cleardefault'=>false''' deaktiviert das Löschen des Standardwertes für das Feld '''datum'''.

==helpmessage==

[http://www.contao.org/erweiterungsliste/view/helpmessage.de.html Helpmessage] blendet per Javascript Hilfsnachrichten für das Feld ein.
Die Nachricht wird im '''eval''' Array hinterlegt. Falls über die Klasse '''FormularTL_DCA''' eine Tabelle gerendert wird, werden die Hilfstexte aus den Contao-Sprachdateien der Tabelle übernommen.

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('helpmessage'=>'Das Datum muss im Format DD.MM.YYYY sein')
)
);
</source>

==formcheck==

[http://www.contao.org/erweiterungsliste/view/formcheck.de.html Formcheck] validiert ein Formular per Javascript auf der Clientseite.
Falls die Erweiterung (ab Version 1.3!) installiert ist funktionierte diese ohne weitere Konfiguration.

Klasse Formular

2010-11-22T17:37:29Z

Psi: /* helpmessage */

[[Category:Module]]
{{stub}}

=Interaktion mit Erweiterungen=

==cleardefault==

[http://www.contao.org/erweiterungsliste/view/cleardefault.de.html Cleardefault] löscht den Standardwert sobald das Textfeld den Fokus bekommt.
Ist die Erweiterung installiert werden alle Textfelder und Textareas mit diesem Verhalten versehen. Über das @eval@ Array kann es für ein
einzelnes Feld angepasst werden:

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('cleardefault'=>false)
)
);
</source>
''' 'cleardefault'=>false''' deaktiviert das Löschen des Standardwertes für das Feld '''datum'''.

==helpmessage==

[http://www.contao.org/erweiterungsliste/view/helpmessage.de.html Helpmessage] blendet per Javascript Hilfsnachrichten für das Feld ein.
Die Nachricht wird im '''eval''' Array hinterlegt. Falls über die Klasse '''FormularTL_DCA''' eine Tabelle gerendert wird, werden die Hilfstexte aus den Contao-Sprachdateien der Tabelle übernommen.

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('helpmessage'=>'Das Datum muss im Format DD.MM.YYYY sein')
)
);
</source>

==formcheck==

[http://www.contao.org/erweiterungsliste/view/formcheck.de.html Formcheck] validiert ein Formular per Javascript auf der Clientseite.
Falls die Erweiterung (ab Version 1.3!) installiert ist funktionierte diese ohne weitere Konfiguration.

Klasse Formular

2010-11-22T17:31:57Z

Psi: /* cleardefault */

Klasse Formular

2010-11-22T17:31:01Z

Psi: /* helpmessage */

[[Category:Module]]
{{stub}}

=Interaktion mit Erweiterungen=

==cleardefault==

[http://www.contao.org/erweiterungsliste/view/cleardefault.de.html Cleardefault] löscht den Standardwert sobald das Textfeld den Fokus bekommt.
Ist die Erweiterung installiert werden alle Textfelder und Textareas mit diesem Verhalten versehen. Über das @eval@ Array kann es für ein
einzelnes Feld angepasst werden:

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('cleardefault'=>false)
)
);
</source>
''' 'cleardefault'=>false''' deaktiviert das Löschen des Standardwertes für das Feld '''datum'''.

-

==helpmessage==

[http://www.contao.org/erweiterungsliste/view/helpmessage.de.html Helpmessage] blendet per Javascript Hilfsnachrichten für das Feld ein.
Die Nachricht wird im '''eval''' Array hinterlegt. Falls über die Klasse '''FormularTL_DCA''' eine Tabelle gerendert wird, werden die Hilfstexte aus den Contao-Sprachdateien der Tabelle übernommen.

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('helpmessage'=>'Das Datum muss im Format DD.MM.YYYY sein')
)
);
</source>

Klasse Formular

2010-11-22T17:29:26Z

Psi: Die Seite wurde neu angelegt: „Category:Module {{stub}} =Interaktion mit Erweiterungen= ==cleardefault== [http://www.contao.org/erweiterungsliste/view/cleardefault.de.html Cleardefault]…“

[[Category:Module]]
{{stub}}

=Interaktion mit Erweiterungen=

==cleardefault==

[http://www.contao.org/erweiterungsliste/view/cleardefault.de.html Cleardefault] löscht den Standardwert sobald das Textfeld den Fokus bekommt.
Ist die Erweiterung installiert werden alle Textfelder und Textareas mit diesem Verhalten versehen. Über das @eval@ Array kann es für ein
einzelnes Feld angepasst werden:

<source lang="php">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('cleardefault'=>false)
)
);
</source>
''' 'cleardefault'=>false''' deaktiviert das Löschen des Standardwertes für das Feld '''datum'''.

-

==helpmessage==

"Helpmessage":http://www.contao.org/erweiterungsliste/view/helpmessage.de.html blender per Javascript Hilfsnachrichten für das Feld ein.
Die Nachricht wird im @eval@ Array hinterlegt. Falls über die Klasse @FormularTL_DCA@ eine Tabelle gerendert wird, werden die Hilfstexte aus den
Contao-Sprachdateien der Tabelle übernommen.

<pre><code class="ruby">
$dca = array(
'datum' => array
(
'label' => 'Datum',
'inputType' => 'text',
'default' => date('d.m.Y'),
'eval' => array('helpmessage'=>'Das Datum muss im Format DD.MM.YYYY sein')
)
);
</code></pre>

Xampp Multidomain

2010-06-24T16:56:01Z

Psi:

[[Category:Admin_HOWTOS]]
[[Category:Installation_und_Updates]]
[[Category:Sonstiges]]
Dieses Tutorial beschreibt die Einrichtung einer lokalen Entwicklungsumgebung mit XAMPP für mehrere parallele oder mehrsprachige Contao Installationen.

=Einrichtung=
Bei dieser Anleitung wird mit einem portablen [http://www.apachefriends.org/de/xampp.html XAMPP] Zip-Paket in Windows gearbeitet (aktuelle Version: 1.7.3). XAMPP steht für Apache, MySQL, PHP und Pearl und stellt somit ein vorkonfiguriertes Webserver-Paket bereit. Neben den eigentlichen Servern bringt XAMPP auch ein paar nette Konfigurationstools wie den PhpMyAdmin oder einen Mailserver mit. Die Pakete gibt es für Windows, Linux sowie für den Mac.

Das Zip-Paket wird in C:\webdev entpackt, was auch ausdrücklich empfohlen wird. Gerade bei Verzeichnissen mit Leer- oder Sonderzeichen (z. B. C:\Program Files\xampp) könnte es später zu Problemen kommen. Nach dem Entpacken ruft man die Datei ''C:\webdev\xampp\setup_xampp.bat'', welche die Konfiguration von XAMPP übernimmt.

<gallery widths="200" heights="300"caption="XAMPP Setup Script">
Datei:xampp-setup-1.png|Setupscript Screen 1
Datei:xampp-setup-2.png|Setupscript Screen 2
Datei:xampp-setup-3.png|Setupscript Screen 3
Datei:xampp-setup-4.png|Setupscript Screen 4
Datei:xampp-setup-5.png|Setupscript Screen 5
Datei:xampp-setup-6.png|Setupscript Screen 6
</gallery>

Nach erfolgter Konfiguration wird das Setup-Script mit Eingabe eines ''x'' beendet.

Anschließend ruft man die Datei ''C:\webdev\xampp\xampp-contol.exe'' auf und startet die Module ''Apache'', ''MySQL'' und ''Mercury''.

[[Datei:xampp-controlpanel.png|Controlpanel]]

Wenn alle Module gestartet sind, wird dieser Status im Control Panel angezeigt.

[[Datei:xampp-controlpanelstarted.png|Controlpanel mit gestarteten Modulen]]

Ruft man jetzt die Adresse ''<nowiki>http://localhost</nowiki>'' im Browser auf, sollte man das XAMPP-Logo mit einer Sprachauswahl sehen. Nach Auswahl der entsprechenden Sprache erscheint die eigentliche XAMPP-Seite, bei der unter dem Menüpunkt ''Status'' Informationen über einzelne Module ausgegeben werden.

[[Datei:xampp-status.png|XAMPP Status]]

Wichtig ist hier nur, dass MySQL und PHP AKTIVIERT ist. Der Menüpunkt ''phpinfo()'' zeigt viele Informationen über die installierte PHP-Version und deren Module an; hier sollte eine Version ab 5.2 zu sehen sein.

Zum Schluss sollte man noch über die Seite ''<nowiki>http://localhost/security/xamppsecurity.php</nowiki>'' das ROOT-Passwort für den MySQL-Server setzen. Nebenbei kann man auch das XAMPP-Verzeichnis mit einem Passwortschutz versehen. Diese Aktionen sind zwar für die Funktionalität nicht zwingend nötig, aber aus Sicherheitsgründen zu empfehlen. ''"Paranoia is applied security"'' … Nach dem Ändern des Passwortes muss über das XAMPP Control Panel der MySQL-Server neu gestartet werden, damit die Passwortänderung wirksam wird.

=Installation einer Contao Umgebung=
Um Contao installieren zu können, muss zuerst ein Contao-Paket von der [http://www.contao.org/herunterladen.html Projekt-Homepage] heruntergeladen und in das Verzeichnis ''C:\webdev\xampp\htdocs\contao'' entpackt werden.<br />
Anschließend wird über die Adresse ''<nowiki>http://localhost/phpmyadmin/</nowiki>'' eine neue Datenbank inkl. neuen Datenbank-Benutzer angelegt. Aus Sicherheitsgründen sollte man für die Datenbank den ROOT-Benutzer nicht verwenden.<br />
Über den Reiter ''Rechte'' kommt man zur Benutzerübersicht. In dieser Übersicht findet man einen Button ''Neuen Benutzer hinzufügen''. Hier kann man sehr bequem einen Benutzer samt Datenbank anlegen. Als Host wählt man immer ''Lokal'', da Webserver und Datenbanksystem auf dem selben Rechner laufen.

[[Datei:xampp-newdbuser.png|Neuen Datenbank Benutzer inkl. Datenbank erstellen]]

Jetzt kann mit der [[Installation]] von Contao begonnen werden.

Im Grunde könnte man auf diese Art beliebig viele Contao-Umgebungen parallel betreiben, natürlich in jeweils verschiedenen Verzeichnissen. Hier bestehen aber zwei grundsätzliche Probleme:
*Contao ist in einem Unterverzeichnis installiert, was an einigen Stellen zu Problemen führen kann. Contao ist hier aber sehr kulant.
*Auf diese Art ist pro Contao-Umgebung nur eine Seite realisierbar.

=Ausbau auf verschiedene Hostnamen=
Um die oben genannten Probleme zu beheben, kann für jede Contao Umgebung ein eigener Hostnamen angelegt werden, also ein Alias zu ''localhost''. Hostnamen sind für den Menschen da und werden vom Betriebssystem automatisch zu einer IP-Adresse aufgelöst. Der ''localhost'' ist dabei voreingestellt und zeigt immer auf ''127.0.0.1'', was per Definition immer der Computer ist, auf dem die Auflösung statt findet. Diese Zuordnung macht sich der Webserver zu nutze und unterscheidet damit die verschiedenen Websites.

==hosts-Datei==
Es gibt verschieden Instanzen der Namensauflösung, der erste Schritt hierbei ist in jedem Fall die sogenannte hosts-Datei, welche in jedem System existiert und erst wenn hier keine Entsprechung gefunden werden konnten, werden weitere DNS-Server befragt.

Um nun eigene Hostnamen für die IP ''127.0.0.1'' einzurichten, öffnet man mit einem Editor die Datei hosts (ohne Endung), welche bei
*Windows unter C:\WINDOWS\system32\drivers\etc\
*Linux und Mac unter /etc/
zu finden ist. Um die Datei zu ändern, sind Administrator bzw. ROOT Rechte notwendig.

Für jede Hostnamen<->IP-Adresse-Kombination steht eine Zeile, wobei die Hostnamen eindeutig sein müssen. Es dürfen also keine zwei identische Hostnamen auf eine IP-Adresse zeigen.

[[Datei:xampp-hosts.png|Datei hosts bearbeiten]]

Öffnet man nun eine der neu angelegten Hostnamen im Browser, z.B. ''<nowiki>http://xampp</nowiki>'', dann sollte die gleiche Ausgabe wie bei Aufruf von ''<nowiki>http://localhost</nowiki>'' erscheinen. Bei der Wahl der Hostnamen sollte man darauf achten, dass keine Überschneidung mit reell existierenden Domains entstehen. Trägt man beispielsweise
<pre>127.0.0.1 www.contao.org</pre>
in die hosts-Datei ein, wird man von nun ab den lokalen Webserver unter der Adresse www.contao.org erreichen, und nicht mehr die Contao-Website.<br />
Es gibt einige spezielle hosts-Editoren, die das Editieren erleichtern sollen. Google weiß mehr darüber.

==vHost-Konfiguration==
Um die verschiedenen Hostnamen den unterschiedlichen Contao-Umgebungen zuzuweisen, muss der Webserver entsprechend konfiguriert werden. Über die sogenannten virtuellen Hosts pflegt der Apache die Unterscheidung zwischen den einzelnen Umgebungen.

Hierzu stellt XAMPP die Konfigurationsdatei ''C:\webdev\xampp\apache\conf\extra\httpd-vhosts.conf'' bereit, die ebenfalls per Editor bearbeitet wird.
Man kann hier die Gelegenheit nutzen, um das htdocs-Verzeichnis mit den Contao-Dateien an einen anderen Ort zu legen, z.B. ''C:\webdev\webfiles''. Die restlichen XAMPP-htdocs sollte man unberührt lassen.

Zuerst muss man den Apache anweisen, virtuelle Hosts über die Hostnamen aufzulösen. Dazu wird das Kommentarzeichen vor ''NameVirtualHost'' entfernt.
<pre>
#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
</pre>
Die Zugriffsrechte für das Web-Verzeichnis schränken wir entsprechend ein:
<pre>
# Zugriff auf das webfiles-Verzeichnis nur vom lokalen Rechner zulassen
<Directory C:/webdev/webfiles>
Order deny,allow
Allow from 127.0.0.1
AllowOverride All
</Directory>
</pre>
Jetzt erstellt man den ersten vHost-Eintrag. Diesen benutzt man für das normale ''localhost''-Verhalten. Es sollen also einfach alle Dateien aufgelistet werden. Da dies der erste vHost-Eintrag ist, erhält er auch eine Sonderstellung. Passt kein anderer vHost-Eintrag auf die Anfrage, wird dieser stellvertretend benutzt.

Ein weiteres Gimmik ist das Rewrite-Script. Es dient dazu, Subdomains auf Verzeichnisse abzubilden. Beispielweise wird die Anfrage ''<nowiki>http://verzeichnis.local/index.php</nowiki>'' auf die Datei ''C:\webdev\webfiles\*verzeichnis*\index.php'' abgebildet. Dies hat den großen Vorteil, dass ein neuer Subdomain-vHost ohne Anpassung der Serverkonfiguration erstellt werden kann. Es muss lediglich das Verzeichnis erstellt werden.
<pre>
### Default vHost
<VirtualHost *:80>
DocumentRoot C:/webdev/webfiles
ServerName localhost

<Directory C:/webdev/webfiles>
Options +Indexes
</Directory>

# Der vHost soll auch alle Anfragen annehmen, die mit ".local" enden.
ServerAlias *.local

# Script zur Umleitung in das Verzeichnis, welches über dem Präfix von ".local" referenziert wird
# Bsp.: neu.local nutzt als DocumentRoot C:/webdev/webfiles/neu
UseCanonicalName Off
RewriteEngine On
RewriteCond %{HTTP_HOST} ^[^.]+\.local$
RewriteCond %{REQUEST_URI} !^/icons
RewriteRule ^(.+) %{HTTP_HOST}$1 [C]
RewriteRule ^([^.]+)\.local(.*) C:/webdev/webfiles/$1$2
</VirtualHost>
</pre>
Nun wird ein vHost zum Zugriff auf die XAMPP-Weboberfläche erstellt:
<pre>
### XAMPP vHost
<VirtualHost *:80>
DocumentRoot c:/webdev/xampp/htdocs
ServerName xampp
</VirtualHost>
</pre>
Ein vHost zum Zugriff auf eine Contao-Umgebung:
<pre>
### contao vHost
<VirtualHost *:80>
DocumentRoot c:/webdev/webfiles/contao
ServerName contao
</VirtualHost>
</pre>
Diese vHost dient zum Zugriff auf das Verzeichnis multilang. Man achte auf den ServerAlias, welcher es ermöglicht, beliebige Subdomain-Hostnamen der Form xxx.multilang anzulagen (de.multilang, en.multilang,...).
<pre>
### multilang vHost
<VirtualHost *:80>
DocumentRoot c:/webdev/webfiles/multilang
ServerName multilang
ServerAlias *.multilang
</VirtualHost>
</pre>
Zusammenfassung der Syntax:
*Ein <VirtualHost *:80>-Block pro vHost
*''ServerName'' gibt den verwendeten Hostnamen an
*''ServerAlias'' gibt weitere Hostnamen an, für die dieser vHost gilt. Hier sind Wildcards erlaubt
*''DocumentRoot'' steht für das physische Verzeichnis der Dateien

Natürlich gibt es noch eine Vielzahl weiterer Konfigurationsoptionen, diese können in der [http://httpd.apache.org/docs/ Apache-Dokumentation] nachgelesen werden.

Nachdem die Datei angepasst wurde, wird der Syntax in der Eingabeaufforderung mit ''httpd.exe -S'' überprüft (unter C:\webdev\xampp\apache\bin). Sind keine Fehler aufgetreten, kann der Webserver über das XAMPP Control Panel neu gestartet werden.

Jetzt sollten folgende vHost aktiv sein:
*''<nowiki>http://localhost</nowiki>'' -> ''C:\webdev\webfiles'' - Mit Auflistung des Inhalts. Praktisch, wenn man für etwas Kleines keinen extra vHost anlegen möchte.
*''<nowiki>http://contao</nowiki>'' -> ''C:\webdev\webfiles\contao''
*''<nowiki>http://[ordner].local</nowiki>'' -> C:\webdev\webfiles\[ordner] - wobei [ordner] beliebig sein kann, es darf nur kein Punkt oder Sonderzeichen enthalten sein. Damit hat man praktisch einen Wildcard-vHost ohne wirklich die Serverkonfiguration ändern zu müssen. '''Wichtig:''' ''[ordner].local'' muss auch in der hosts-Datei notiert werden.
*''<nowiki>http://xampp</nowiki>'' -> ''C:\webdev\xampp\htdocs'' - Über diesen vHost kann man auf die XAMPP-Weboberfläche zugreifen.
*''<nowiki>http://*.multilang</nowiki>'' -> ''C:\webdev\webfiles\mutlilang'', auch hier kann man als Subdomain alles angeben, was man in der Hosts-Datei notiert hat. Besonderheit zum oberen Beispiel: Es wird immer das selbe Verzeichnis und damit die selbe Contao-Umgebung referenziert. Damit kann man also mehrsprachige oder mehrseitige Auftritte erstellen.

=Sicherheitseinstellungen - Apache=
Abschließend werden noch ein paar Einstellungen zur Sicherheit vorgenommen.

==Zugriff von außen sperren==
In der Datei ''C:\webdev\xampp\apache\conf\httpd.conf'' befindet sich ab der Zeile 42:
<pre>
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 0.0.0.0:80
#Listen [::]:80
Listen 80
</pre>
Hier ändert man den ''Listen''-Wert auf:
Listen 127.0.0.1:80
Das veranlasst den Apache nur noch Verbindungen über das ''localhost''-Interface anzunehmen und keine Verbindungen, die über das Netzwerk von anderen Computer kommen.

In der Datei ''C:\webdev\xampp\apache\conf\extra\httpd-ssl.conf'' steht die Einstellung für HTTPS, also verschlüsselte Seiten. Hier muss in Zeile 41
Listen 443
in
Listen 127.0.0.1:443
geändert werden.

=Sicherheitseinstellungen - MySQL=
Auch dem MySQL-Server verbietet man den Zugriff von außen. In die Datei ''C:\webdev\xampp\mysql\bin\my.ini'' fügt man folgenden Zeile unter der Sektion ''[mysqld]'' ein:
bind-address = 127.0.0.1
Damit sieht die Konfigurationsdatei ab Zeile 27 so aus:
<pre>
# The MySQL server
[mysqld]
basedir = "/webdev/xampp/mysql/"
datadir = "/webdev/xampp/mysql/data/"
port = 3306
socket = "MySQL"
skip-locking
key_buffer = 16M
max_allowed_packet = 1M
table_cache = 64
sort_buffer_size = 512K
net_buffer_length = 8K
read_buffer_size = 256K
read_rnd_buffer_size = 512K
myisam_sort_buffer_size = 8M
bind-address = 127.0.0.1

default-time-zone = "Europe/Paris"
</pre>
Ein Neustart des MySQL-Servers macht die Konfiguration aktiv.

=.htaccess=
Standardmässig ist die Datei ''.htaccess'' nicht in der Contao-Installation aktiv. Es liegt jedoch eine vorbereitete Datei bereit; sie lautet ''.htaccess.default''. Diese muss in ''.htaccess'' umbenannt werden. Die Datei ''.htaccess'' aus dem Basisverzeichnis der Contao-Installation dient hauptsächlich dazu, schönere URLs zu erzeugen. Damit das Rewriting von Webserver entsprechend ausgeführt werden kann, muss die Option ''RewriteBase'' angepasst werden. Sie besagt, in welchem Unterverzeichnis die Installation bezüglich der Domain liegt. Hat man das System in einem Unterverzeichnis installiert (''<nowiki>http://localhost/contao/</nowiki>''), dann muss die ''RewriteBase'' auf ''/contao/'' geändert werden. Die veränderte ''.htaccess'' sieht dann ab Zeile 39 wie folgt aus:
<pre>
# Uncomment the following line to set the RewriteBase.
##
RewriteBase /contao/
</pre>

=Mercury - Mailserver=
Damit man auch die Mailfunktionalität von Contao lokal testen kann, bedarf es einem Mailserver. Diesen bringt XAMPP in Form von Mercury-Mail mit.

Über das ''XAMPP Control Panel'' wird dei Mailserver gestartet und per klick auf ''Admin'' öffnet sich die Mercury-Verwaltungsoberfläche.
Da nur ein SMTP-Server (für den Mailversand) und ein POP3-Server (für den Mailempfang) benötigt werden, deaktiviert man alle anderen Dienste von Mercury. Das wird über den Button ''Configuration - Protocol modules'' erledigt, wo alle Haken bis auf SMTP und POP3 entfernt werden:
<gallery widths="300" heights="300"caption="Mercury Security Settings">
Datei:xampp-mercury.png|Mercury Admin Page
Datei:xampp-mercuryprotocolmodules.png|Mercury Protocol Modules
</gallery>
Nun den Mercury-Server über das ''XAMPP Control Panel'' neustarten.

Ähnlich wie für den Apache veranlasst man auch Mercury nur Verbindungen vom ''localhost'' anzunehmen. Über ''Configuration - Mercury SMTP Server'' erreicht man die Einstellungen und unter anderem das Feld ''IP Interface to use'', was auf 127.0.0.1 zu setzen ist:

[[Datei:xampp-mercurysmtp.png|Mercury SMTP Server]]

Analog für den POP3-Server unter ''Configuration - Mercury POP3 Server'':

[[Datei:xampp-mercurypop3.png|Mercury PPOP3 Server]]

Um nun Mails empfangen zu können muss noch ein Mailbenutzer in Mercury angelegt werden. Unter ''Configuration - Manage local users'' kann man beliebige Mailkonten anlegen, an welche man dann per Contao Mails schicken kann. Am besten ändert man hierfür den schon angelegten ''newuser'' ab.

Damit die E-Mails auch abgeholt werden, richtet man sich das neue E-Mail Konto in einem Mailclient ein, beispielsweise Outlook Express. Die Logindaten hierfür sind:
* POP3-Server: ''localhost''
* SMTP-Server: ''localhost''
* Benutzer: ''user@localhost''

Die XAMPP-Weboberfläche (<nowiki>http://xampp</nowiki>) bietet den Menüpunkt Mercury Mail, hier kann man sich über PHP eine E-Mail zustellen, um die Konfiguration zu testen.

=Umzug auf ein Live-System=
Der Umzug von Contao auf ein Livesystem gestaltet sich normalerweise sehr angenehm und ist nur mit wenigen Handgriffen zu bewerkstelligen:
#Unter Systemwartung den Cache löschen.
#Mit Hilfe der [[BackupDB|Backup-DB Erweiterung]] ein Website-Template erstellen
#Die ganze Website auf den Server laden (z.B. per FTP)
#Die .htaccess-Datei anpassen. Falls die Contao-Installation lokal in einem Unterverzeichnis lag, muss die RewriteBase wieder auf "/" gestellt werden.
#Nun über das Install-Tool die Contao-Seite installieren und am Ende das mit BackupDB erstellte Template in die Datenbank einfügen.

Das sollte es schon gewesen sein.

Da diese Anleitung auf einem portablen XAMPP-Server aufgebaut ist, ist es möglich, das komplette Verzeichnis (C:\webdev) auf einen USB-Stick zu betreiben. Dies erleichtert z.B. die Presentation bei Kunden. Es befindet sich alles in diesem Verzeichnis und bedarf keiner Installation. Lediglich die angepasste [[#hosts-Datei|hosts-Datei]] kann nicht übernommen werden.

=Credits=
Die Orginal-Anleitung wurde erstellt von [[Benutzer:Psi|Psi]] ([http://www.4wardmedia.de 4ward.media])<br />
Div. Modifikationen und Anpassungen an die aktuelle XAMPP-Version / Contao-Version durch manitougs

[[Datei:4ward signature.png|link=http://www.4wardmedia.de|4ward.media]]

Accordion extended

2010-06-24T16:54:59Z

Psi: /* Beispiel für eine CSS-Einstellung */

[[Category:Admin HOWTOS]]
{{AppliesTo|TLVersion=ab 2.8}}
=Accordion mit Active/Hover-Effekten=

Mit ein paar kleinen Tricks kann man das Accordion von Contao dazu bringen,
dass es je nach Status die CSS-Klassen ''hover'' und ''active'' setzt.
Damit können Beispielsweise Effekte beim Überfahren mit der Maus oder
verschiedene Ansichten für ein auf/zu geklapptes Akkordion realisiert werden.

[[Datei:Accordion extended.png]]

==Bearbeitung des Javascript-Templates '''''moo_accordion.tpl'''''==

<pre><script type="text/javascript">
<![CDATA[//><!]]>
</script></pre>

Durch dieses Template erhält das Toggler-Div zusätzlich:
* Die Klasse '''hover''' beim überfahren mit der Maus
* Die Klasse '''active''' wenn das Element ausgeklappt ist

==Beispiel für eine CSS-Einstellung==
<pre>
/* Style für den Akkordion Inhalt */
.ce_accordion div.accordion > div {
margin-bottom:2px;
padding-top:10px;
}

/* Style des zugeklappten Akkordion-Togglers */
.ce_accordion div.toggler {
margin-bottom:3px;
padding:0 10px;
background:#B7B7B7 url("tl_files/layout/accord_zugeklappt.png") right center no-repeat;
font-weight:bold;
color:#FFFFFF;
}

/* Style für das aufgeklappte Akkordion */
.ce_accordion div.active {
padding:0 10px;
background:#CA2130 url("tl_files/layout/accord_aufgeklappt.png") right center no-repeat;
font-weight:bold;
color:#FFFFFF;
}

/* Style für den Mouseover-Effekt */
.ce_accordion div.hover {
text-decoration:underline;
background:#CA2130 url("tl_files/layout/accord_mouseover.png") right center no-repeat;
cursor:pointer;
}

</pre>

----
erstellt von --[[Benutzer:Psi|Psi]], [http://www.4wardmedia.de 4ward.media]

[[Datei:4ward signature.png|link=http://www.4wardmedia.de|4ward.media]]

Accordion extended

2010-06-24T16:54:02Z

Psi:

Accordion extended

2010-06-24T16:53:36Z

Psi:

[[Category:Admin HOWTOS]]
{{AppliesTo|TLVersion=ab 2.8}}

=Accordion mit Active/Hover-Effekten=

Mit ein paar kleinen Tricks kann man das Accordion von Contao dazu bringen,
dass es je nach Status die CSS-Klassen ''hover'' und ''active'' setzt.
Damit können Beispielsweise Effekte beim Überfahren mit der Maus oder
verschiedene Ansichten für ein auf/zu geklapptes Akkordion realisiert werden.

[[Datei:Accordion extended.png]]

==Bearbeitung des Javascript-Templates '''''moo_accordion.tpl'''''==

<pre><script type="text/javascript">
<![CDATA[//><!]]>
</script></pre>

Durch dieses Template erhält das Toggler-Div zusätzlich:
* Die Klasse '''hover''' beim überfahren mit der Maus
* Die Klasse '''active''' wenn das Element ausgeklappt ist

==Beispiel für eine CSS-Einstellung==
<pre>
/* Style für den Akkordion Inhalt */
.ce_accordion div.accordion > div {
margin-bottom:2px;
padding-top:10px;
}

/* Style des zugeklappten Akkordion-Togglers */
.ce_accordion div.toggler {
margin-bottom:3px;
padding:0 10px;
background:#B7B7B7 url("tl_files/layout/accord_zugeklappt.png") right center no-repeat;
font-weight:bold;
color:#FFFFFF;
}

/* Style für das aufgeklappte Akkordion */
.ce_accordion div.active {
padding:0 10px;
background:#CA2130 url("tl_files/layout/accord_aufgeklappt.png") right center no-repeat;
font-weight:bold;
color:#FFFFFF;
}

/* Style für den Mouseover-Effekt */
.ce_accordion div.hover {
text-decoration:underline;
background:#CA2130 url("tl_files/layout/accord_mouseover.png") right center no-repeat;
cursor:pointer;
}

</pre>

----
erstellt von --[[Benutzer:Psi|Psi]], [http://www.4wardmedia.de 4ward.media]

[[Datei:4ward signature.png]]