Contao Community Documentation - Benutzerbeiträge [de]

Avatar

2013-05-23T14:35:07Z

KATgirl:

===Features===

* Adds an avatar to both, user and member settings
* Includes a module to let frontend members upload a personal avatar
* Avarars can be included anywhere with the {{avatar}} insert tag
* Simple usage and API for other extensions

===Manual Installation===

* Download the install package from here.
* Unzip the content of TL_ROOT to your TYPOlight base directory on your webserver.
* Unzip the content of TL_FILES to the file upload directory on your webserver.
* Point your browser to http://www.yourdomain.com/typolight/install.php
* Enter the installation password and click Login
* Scroll down to Update database tables and click on Update database

===Getting started===

You need to adjust some settings first. Login to the backend as administrator and scroll down to the avatar settings. :

Select the avatar file directory in the first input. In case you want to use another one than the default avatars directory, you need to move the existing files there manually.

In the user and member settings you will now find a section for the avatar:

===Frontend module for avatar upload===

The module has no special settings. However you should apply some CSS for the frontend to style it, here is a suggestion for a start:

/**
* Avatar frontend module
*/
.mod_avatar .checkbox_container * { vertical-align:middle; }
.mod_avatar .label_container { margin-top:10px; }
.mod_avatar .textlabel { font-weight:bold; }
.mod_avatar .error_message { color:red; }
.mod_avatar .hint { color:#888; margin-bottom:10px; }

===Using avatars by insert tag===

{{avatar}}

This will insert the avatar of the currently logged in frontend member as HTML IMG tag.
For not logged in guest, the tag will not insert anything.

{{avatar::123}}

Inserts the avatar of the frontend member with ID 123.

{{avatar::25::be}}

Inserts the avatar of the backend user with ID 25.

===API for using avatars in other extensions===

You will find the avatar image file path (relative to TL_ROOT) in the column avatar of the tables tl_member and tl_user. When this column is empty, the default avatar should be displayed. This simple logic is implemented in the Avatar::filename method, for example:

if (FE_USER_LOGGED_IN) {
$this->import('FrontendUser', 'User');
$avatarFile = Avatar::filename($this->User->avatar);
// avatarfile will be the filename of the avatar, relative to TL_ROOT
}

For even more convenience, you may use the method Avatar::img to create a IMG tag:

if (TL_MODE == 'BE') {
$this->import('BackendUser', 'User');
echo Avatar::img($this->User->avatar);
}

Avatar::img has some optional parameters for more fine control over the IMG tag:

public static function img(
$avatar, // the filename from tl_user.avatar or tl_member.avatar
$alt = 'Avatar', // The alt text
$classes = 'avatar', // The class(es) to assign
$attribs = '' // additional attributes, for example 'title="Your avatar"'
)

Avatar

2013-05-23T14:33:16Z

KATgirl: Die Seite wurde geleert.

Avatar

2013-05-23T14:32:45Z

KATgirl:

Avatar

2013-05-23T14:28:43Z

KATgirl: Die Seite wurde neu angelegt: „Avatar Features Adds an avatar to both, user and member settings Includes a module to let frontend members upload a personal avatar Avarars can be included anyw…“

Avatar

Features

Adds an avatar to both, user and member settings
Includes a module to let frontend members upload a personal avatar
Avarars can be included anywhere with the {{avatar}} insert tag
Simple usage and API for other extensions
Manual Installation

Download the install package from here.
Unzip the content of TL_ROOT to your TYPOlight base directory on your webserver.
Unzip the content of TL_FILES to the file upload directory on your webserver.
Point your browser to http://www.yourdomain.com/typolight/install.php
Enter the installation password and click Login
Scroll down to Update database tables and click on Update database
Getting started

You need to adjust some settings first. Login to the backend as administrator and scroll down to the avatar settings. :

Select the avatar file directory in the first input. In case you want to use another one than the default avatars directory, you need to move the existing files there manually.

In the user and member settings you will now find a section for the avatar:

Frontend module for avatar upload

The module has no special settings. However you should apply some CSS for the frontend to style it, here is a suggestion for a start:

/**
* Avatar frontend module
*/
.mod_avatar .checkbox_container * { vertical-align:middle; }
.mod_avatar .label_container { margin-top:10px; }
.mod_avatar .textlabel { font-weight:bold; }
.mod_avatar .error_message { color:red; }
.mod_avatar .hint { color:#888; margin-bottom:10px; }

Using avatars by insert tag

{{avatar}}

This will insert the avatar of the currently logged in frontend member as HTML IMG tag.
For not logged in guest, the tag will not insert anything.

{{avatar::123}}

Inserts the avatar of the frontend member with ID 123.

{{avatar::25::be}}

Inserts the avatar of the backend user with ID 25.

API for using avatars in other extensions

You will find the avatar image file path (relative to TL_ROOT) in the column avatar of the tables tl_member and tl_user. When this column is empty, the default avatar should be displayed. This simple logic is implemented in the Avatar::filename method, for example:

if (FE_USER_LOGGED_IN) {
$this->import('FrontendUser', 'User');
$avatarFile = Avatar::filename($this->User->avatar);
// avatarfile will be the filename of the avatar, relative to TL_ROOT
}

For even more convenience, you may use the method Avatar::img to create a IMG tag:

if (TL_MODE == 'BE') {
$this->import('BackendUser', 'User');
echo Avatar::img($this->User->avatar);
}

Avatar::img has some optional parameters for more fine control over the IMG tag:

public static function img(
$avatar, // the filename from tl_user.avatar or tl_member.avatar
$alt = 'Avatar', // The alt text
$classes = 'avatar', // The class(es) to assign
$attribs = '' // additional attributes, for example 'title="Your avatar"'
)

Z modulealias

2012-07-19T11:17:57Z

KATgirl: Die Seite wurde neu angelegt: „= Modul Alias = Unterschiedliche Module pro Seitenbaum in einem Seitenlayout verwenden. Dieses Modul ist insbesondere bei mehrsprachigen Webseiten sehr hilfreic…“

= Modul Alias =

Unterschiedliche Module pro Seitenbaum in einem Seitenlayout verwenden.

Dieses Modul ist insbesondere bei mehrsprachigen Webseiten sehr hilfreich. Weisen Sie Frontend-Module einem Seitenbaum zu, sodass nur die sprachlich passenden Module angezeigt werden.

== Konfiguration ==

Nachdem das Modul installiert ist, sehen sie in jedem Frontend-Modul eine neue Einstellung für die "Verknüpften Seiten".

Hier kann man wählen auf welcher Seite das Modul erscheinen soll. In den meisten Fällen ist hier nur die Root-Seiten zu wählen, die Auswahl wird im Baum nach unten vererbt.

So legt man sich dann verschiedene Module für die jeweiligen Seitenbäume an.

Am Beispiel der Suche mit individuellen Formular
- Search | de --> Seitenbaum de
- Search | fr --> Seitenbaum fr
- Search | en --> Seitenbaum en

Nachdem jetzt mehrere "identische" Module für die entsprechenden Root-Seiten angelegt wurden, erstellen man ein Modul vom Typ "Modul Alias" und markieren dort die entsprechenden Module.
Mit gedrückter STRG (CTRL) - Taste kann man mehrere Einträge selektieren.

Dieses Frontend-Modul nennt man dann z.B. Search. Dieses kann nun im Seitenlayout ausgewählt werden. Passend zur aktuellen Root-Seite wird eines der vorhandenen "individualisierten" Frontend-Module ausgegeben.

InKuerzeVerfuegbar

2012-07-19T11:08:35Z

KATgirl: /* Andreas Schempp */

[[Category:Development]]
[[Category:Extensions]]

Um zu vermeiden, dass parallele Entwicklung unnötige Ressourcen benötigt, können Entwickler hier Erweiterung eintragen, die "in Kürze verfügbar" sein sollen.

== ETES GmbH ==

Entwickler: Jan Theofel, Marc Schneider, Sebastian Leitz

Entwicklerkontakt: [mailto:contao@etes.de E-Mail] [http://www.etes.de/ Webseite]

* (Neues) Trackback-Modul für News (andere Features als das bestehende)
* (Neues) Gravatar-Modul (Gravatare auch für Kommentare etc.)
* Wordpress-Import (basiert auf den oberen beiden)
* htaccess-Erweiterung zur Konfiguration der zentralen .htaccess mit der Möglichkeit, dass Module dort per Hook eigene Definitionen einfügen können
* Erweiterungen für unsere Jobbörse (Onlinebewerbung/Bewertung von Bewerbern/Anbindung an Paymentsysteme)

== certo web & design GmbH ==

Entwickler: Yanick Witschi (aka Toflar)

Entwicklerkontakt: [mailto:yanick.witschi@certo-net.ch E-Mail] [http://www.certo-net.ch Webseite]

* Votebox, Prinzip der Votebox von Dropbox

== InfinitySoft - Innovative Softwarelösungen ==

Entwickler: Tristan Lins (aka tril)

Entwicklerkontakt: [mailto:tristan.lins@infinitysoft.de E-Mail] [http://www.infinitysoft.de Webseite]

* .htaccess Editor [https://github.com/InfinitySoft/contao-htaccess github] [http://www.contao.org/erweiterungsliste/view/htaccess.20000008.de.html ER]
Editor zum bequemen Einrichten der .htaccess Datei aus dem Backend heraus.
* Open ER2 Client [https://github.com/InfinitySoft/contao-open-er2-client github]
Client Library um Extensions innerhalb einer Contao Installation zu verwalten. Dies ist '''nur''' eine Library ohne grafische Oberfläche, die dazu genutzt werden kann einen neuen ER Client für das aktuelle Extension Repository zu entwickeln.

== BugBuster ==

Entwickler: Glen Langer

Entwicklerkontakt: [http://www.contao-community.de/ Forum] | [http://www.contao.Glen-Langer.de/ Webseite]

* Idee: moopeel - diese nette Ecke auf Mootoolsbasis (no Flash!)
* Idee: BotDetection Add-on: Suchmaschinen Statistik

== MEN AT WORK ==

Entwickler: Andreas Isaak, David Maack

Entwicklerkontakt: [mailto:cms@men-at-work.de E-Mail]

* recursiveDownload: Rekursive Downloads basierend auf dem Benutzerverzeichnis
* recursiveGallery: Rekursive Galerie basierend auf dem Benutzerverzeichnis
* [http://www.contao-forge.org/projects/language4translation/issues language4translation]: Exportierte Sprachtexte im Frontend übersetzen und später wieder via language2file importieren
* dashboard: Erweiterung der Dashboard Extension von Andreas Schempp
* [http://www.contao-forge.org/projects/backendfavourites backendFavourites] Favouriten/Sprungmarker für das Backend definieren

* [https://github.com/menatwork Übersicht all unserer Entwicklungen]

== Andreas Schempp ==

Entwickler: Andreas Schempp

Entwicklerkontakt: [mailto:andreas@schempp.ch andreas@schempp.ch]

* ajaxform: Formular per Ajax senden und Antwort per Ajax laden
* aliascompiler: Seitenalias aus Prefix und Postfix zusammenfügen (z.B. damit der Anwender nur Postfix bearbeiten kann)
* articlelanguage: Artikel in einer zweiten Sprache zur Verfügung stellen
* autocompletetextfield: Feld das Vorschläge für Eingabe (z.B. Tags) macht
* barcode: Generierung von QRcode und MS Tag Bildern
* blog: Umfangreiche Blog-Funktionen (ProofOfConcept)
* documentsearch: Dokumente (PDF, DOC, PPT, XLS) in die Contao-Suche aufnehmen (erfordert Server-Binaries)
* e2photogallery: Contao Extension für die [http://www.e2interactive.com/e2_photo_gallery/ e2 Photo Gallery]
* exams: Ein- oder mehrseitige Prüfungen mit Punkte-System und Resultat-Auswertung
* fancyavatar: Avatar mittels Ajax hochladen und zuschneiden
* folderpage: Ordner-Seiten zur Gruppierung der Seitenstruktur
* htmlpurifier: Integration des [http://htmlpurifier.org/ HTML Purifier] in Contao
* importoption: Options-Daten für Formularfelder (Select, Radio, Checkbox) aus CSV importieren
* joomlaboard_import: JoomlaBoard in Contao Helpdesk Erweiterung migrieren
* member_album: Fotoalbum für Mitglieder anlegen
* memberfiles: Zeigt im Backend die Dateien aus dem Benutzerverzeichnis zum Download an
* mobile_stylesheets: Stylesheet-Targeting für iPhone, iPad und Co
* news_loader: Lädt beim Scrollen der Seite automatisch die nächsten News nach
* newsalert: Automatische Newsletter aus News-Archiven
* newscategories: Kategorisierung und Auflistung von News-Beiträgen (über Archive hinweg)
* newsletter-article: Newsletter aus Artikel generieren
* openid-consumer: Anmelden bei Contao mittels OpenID (sehr altes Modul...)
* pagepdf: PDF aus Seite generieren, oder Seiten im Backend direkt als PDF ausgeben (via kostenpflichtigem [http://html2pdf.seven49.net/ HTML2PDF]
* previewdownload: Download-Datei mit Vorschau. Kann automatisch aus PDF ein Bild generieren, wenn imagemagick verfügbar ist.
* qtplayer: Quicktime-Video und -Audio Dateien einbinden
* rootsearch: Suche über mehrere Root-Seiten
* shibboleth: Anmeldung an Contao mittels [http://de.wikipedia.org/wiki/Shibboleth_(Internet) Shibboleth]
* singlegallery: Gibt das erste Galeriebild aus, erlaubt die Navigation in der lightbox/mediabox zu den restlichen Bildern
* siximages: Galerie-Modul von [http://www.soleil-royal.ch/lage.html Soleil Royal]
* zz_compressor: Automatische Komprimierung und Zusammeführung ALLER lokalen CSS- und JS-Dateien auf der Seite

== hofemich ==

Entwickler: Michael Hofer

Entwicklerkontakt: [http://www.contao-community.de/ Forum]

* isotope_request: Ermöglicht die Verknüpfung mit einem Formular, für Produkt-Anfragen

== Cliff Parnitzky ==

Entwickler: Cliff Parnitzky

Entwicklerkontakt: [mailto:contao@cliff-parnitzky.de contao@cliff-parnitzky.de]

* [http://www.contao.org/erweiterungsliste/view/BirthdayMailer.html BirthdayMailer]: fertig
* [http://www.contao.org/erweiterungsliste/view/EfgMemberSelectMailer.html EfgMemberSelectMailer]: fertig
* [http://www.contao.org/de/extension-list/view/CheckedEmail.html CheckedEmail]: fertig
* ConditionalInserttags: Inserttags für einfache Bedingungen
* MemberNumber: Mitgliedernummer automatisch hochzählen, ggf. mit Präfixauswahl
* EfgMemberSelectFieldConnector: Überträgt Werte vom selektierten Mitglied (EfgMemberSelect) auf andere Felder des Formulars ... Verbindet Mitgliederfelder mit Formularfelder
* ExtendedListing: Erweitert das Listing Modul um die Möglichkeit, Tabellen miteinander zu verknüpfen (SQL JOIN)

== IMS Internet Marketing Solutions Ltd. ==

Entwickler: Dominik Zogg

Entwicklerkontakt: [mailto:dz@erfolgreiche-internetseiten.ch E-Mail]

* [http://www.contao.org/erweiterungsliste/view/calendarextended.de.html calendarextended]: Erweiterung des Standardkalenders, von einer Kontaktperson bis hin zu einer Registrierung ist alles dabei
* [http://www.contao.org/erweiterungsliste/view/gist.de.html gist]: Erweiterung welche aus einem gist Inserttag den jeweiligen Javascript Code lädt

Gleich hohe DIV Container

2012-05-24T08:33:07Z

KATgirl:

Um ein dreispaltiges Layout mit drei gleich hohen DIV-Container zu erzeugen ist es Möglich dieses per JS zu machen.

Wenn man z.B. eine solche Struktur hat:

<source lang=html4strict>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8">
<title></title>

</head>
<body>

<div id="wrapper">
<div id="container">
<div id="left"> </div>

<div id="main"> </div>

<div id="right"> </div>

<div class="clear"></div>
</div>
</div>

</body>
</html>
</source>

Kann man mit folgendem Code im Seitenlayouts (eigner JS-Code)

<source lang=javascript>

<script type="text/javascript">

var HeightContainer = $('container').getSize().y;

if ($('left')) { $('left').height(HeightContainer); }
if ($('main')) { $('main').height(HeightContainer); }
if ($('right')) { $('right').height(HeightContainer); }

</script>

</source>

Die Höhe aller DIVs an die Höhe des umschließenden DIVs Container anpassen.

'''ACHTUNG''': Mootools muss aktive sein.

[[Category:Dev HOWTOS]] [[Category:Dev Snippets]]

Gleich hohe DIV Container

2012-05-24T08:31:57Z

KATgirl: Die Seite wurde neu angelegt: „Um ein dreispaltiges Layout mit drei gleich hohen DIV-Container zu erzeugen ist es Möglich dieses per JS zu machen. Wenn man z.B. eine solche Struktur hat: <so…“

Suckerfishalternative

2010-09-25T09:51:28Z

KATgirl: /* Endergebnis */

== Einleitung ==
Das Tutorial [http://dev.contao.org/projects/typolight/wiki/TutorialsSuckerfish|Horizontal Suckerfish-like navigation] beschreibt, wie man ein Menü erstellt. Allerdings wird dazu JAVAScript verwendet, was nicht immer funktioniert.
Dazu kommt, dass die Anleitung auch schon ein paar Tage auf dem Rücken hat. In diesem Tutorial soll nun mal gezeigt werden, wie man ganz leicht mit CSS und den Contao-Hausmitteln ein solches Menü erzeugt.

Als Grundlage für das Design, hat das Menü auf der Contao-Hompage gedient. Da sich sicher alle dieses schon mal angeschaut haben, bedarf es keine große Erklärung.

== Vorraussetzung ==
Dieses Tutorial wurde auf Basis von Contao 2.9.1 erstellt. Dabei handelt es sich um eine neue Installation aus den Quellen ohne jegliche Anpassungen.

Daher sollte es auch für Anfänger möglich sein diese Anleitung nachzuvollziehen, vorausgesetzt sie können die Grundfunktionen von Contao bedienen.

Was nicht schlecht wäre, wären natürlich Grundkenntnisse zu CSS. Wer die nicht hat, kann auf Seiten wie [http://www.css4you.de CSS4YOU] die Sachen nachschlagen oder fragt in der [http://www.contao-community.de/ Community] nach.

== Vorbereitung ==
Es wurde ein neuer Startpunkt der Seite definiert und folgende Seitenstruktur erstellt.
[[Datei:Suckerfishalternative_Seitenstruktur.png]]

Jetzt muss das ganze noch ausgegeben werden. Dazu wird ein neues Themes angelegt.

In dem Themes werden nun folgende Schritte vorgenommen:
# Erstellen eines Modules für die Navigation
# Erstellen einer CSS für das Aussehen
# Erstellen eines Seitenlayouts zur Anzeige

=== Themes - Module ===
Es wird ein neues Module erstellt vom Typ Navigationsmenü.
Dieses hat keine besonderen Einstellungen, daher wird dem Module nur ein Name gegeben.
[[Datei:Suckerfishalternative_navigationsmenue.png]]

=== Themes - CSS ===
Nun wird die CSS angelegt, bleibt aber vorerst noch leer. Sie bekommt nur einen Namen und anschließend wird ihr mitgeteilt, dass sie für alle Medientypen gelten soll.
[[Datei:Suckerfishalternative_css.png]]

=== Themes - Seitenlayouts ===
Abschließend wird das Layout angelegt. Da kein Kopf und kein Fuß benötigt wird, kann man das ganz einfach machen:
* Titel eingeben
* Spalten wählen
* CSS einharken
* Module einbinden
[[Datei:Suckerfishalternative_seitenlayout.png]]

== ToDo ==
Jetzt sollte wenn man sich die Seite im Frontend anschaut, folgende Ansicht erscheinen.

[[Datei:Suckerfishalternative_ausgangssituation.png]]

Das ist aber nicht das Ergebnis welches angestrebt wird. Also muss noch was getan werden und zwar muss das Design den Vorstellungen hin angepasst werden. Dieses wird über die CSS gesteuert.

=== CSS Inhalt ===
Darum muss jetzt die CSS bearbeitet werden, dazu werden folgende Definitionen eingefügt:

.mod_navigation ul.level_1 span.active{
text-align:center;
display:block;
}

.mod_navigation ul.level_1 span.active:hover,
.mod_navigation ul.level_1 span.active:focus,
.mod_navigation ul.level_1 span.active:active{
color:#FFFFFF;
}

.mod_navigation ul.level_1 li{
float:left;
display:block;
margin:0 4px 3px;
padding:5px 10px;
}

.mod_navigation ul li:hover,
.mod_navigation ul li:active,
.mod_navigation ul li:focus{
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color: #AE5500;
}

.mod_navigation ul li:hover ul.level_2,
.mod_navigation ul li:active ul.level_2,
.mod_navigation ul li:focus ul.level_2{
margin:5px 0 0 -10px;
}

.mod_navigation ul.level_1 li a{
display:block;
color:#000000;
text-decoration:none;
text-align:center;
}

.mod_navigation ul.level_1 li:hover a,
.mod_navigation ul.level_1 li:active a,
.mod_navigation ul.level_1 li:focus a{
color:#FFFFFF;
}

.mod_navigation ul.level_2{
width:120px;
position:absolute;
display:block;
margin-left:-99999px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color:#A3A3A3;
padding:4px;
}

.mod_navigation ul.level_2 span.active{
text-align:left;
display:block;
padding: 3px 0 3px 5px;
color:#FFFFFF;
}

.mod_navigation ul.level_2 span.active:hover,
.mod_navigation ul.level_2 span.active:focus,
.mod_navigation ul.level_2 span.active:active{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li{
margin:0;
background-color:#A3A3A3;
padding:2px 0;
width:100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li a{
display:block;
color:#FFFFFF;
text-align:left;
padding: 3px 0 3px 5px;
}

.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li a:active,
.mod_navigation ul.level_2 li a:focus{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

TIPP: mit der Extention [http://www.contao.org/erweiterungsliste/view/csseditor.20050059.de.html csseditor] kann man die Zeilen einfach kopieren.

Nun sollte die CSS wie folgt aussehen:

[[Datei:Suckerfishalternative_css-gefuellt.png]]

==== Hintergrund zur CSS ====
Die CSS ist nicht optimiert und die Rundungen werden auch nicht von allen Browsern unterstützt. Wenn man das aber für alle Browser gleich darstellen will, muss man noch mit Hintergrundbildern arbeiten, darauf wurde hier aber bewusst verzichtet.

=== Endergebnis ===
Das Ergebnis sieht nun wie folgt aus:

[[Datei:Suckerfishalternative_endergebniss.png]]

Datei:Suckerfishalternative endergebniss.png

2010-09-25T09:51:16Z

KATgirl:

Suckerfishalternative

2010-09-25T09:50:57Z

KATgirl: /* CSS Inhalt */

Suckerfishalternative

2010-09-25T09:50:31Z

KATgirl: /* ToDo */

== Einleitung ==
Das Tutorial [http://dev.contao.org/projects/typolight/wiki/TutorialsSuckerfish|Horizontal Suckerfish-like navigation] beschreibt, wie man ein Menü erstellt. Allerdings wird dazu JAVAScript verwendet, was nicht immer funktioniert.
Dazu kommt, dass die Anleitung auch schon ein paar Tage auf dem Rücken hat. In diesem Tutorial soll nun mal gezeigt werden, wie man ganz leicht mit CSS und den Contao-Hausmitteln ein solches Menü erzeugt.

Als Grundlage für das Design, hat das Menü auf der Contao-Hompage gedient. Da sich sicher alle dieses schon mal angeschaut haben, bedarf es keine große Erklärung.

== Vorraussetzung ==
Dieses Tutorial wurde auf Basis von Contao 2.9.1 erstellt. Dabei handelt es sich um eine neue Installation aus den Quellen ohne jegliche Anpassungen.

Daher sollte es auch für Anfänger möglich sein diese Anleitung nachzuvollziehen, vorausgesetzt sie können die Grundfunktionen von Contao bedienen.

Was nicht schlecht wäre, wären natürlich Grundkenntnisse zu CSS. Wer die nicht hat, kann auf Seiten wie [http://www.css4you.de CSS4YOU] die Sachen nachschlagen oder fragt in der [http://www.contao-community.de/ Community] nach.

== Vorbereitung ==
Es wurde ein neuer Startpunkt der Seite definiert und folgende Seitenstruktur erstellt.
[[Datei:Suckerfishalternative_Seitenstruktur.png]]

Jetzt muss das ganze noch ausgegeben werden. Dazu wird ein neues Themes angelegt.

In dem Themes werden nun folgende Schritte vorgenommen:
# Erstellen eines Modules für die Navigation
# Erstellen einer CSS für das Aussehen
# Erstellen eines Seitenlayouts zur Anzeige

=== Themes - Module ===
Es wird ein neues Module erstellt vom Typ Navigationsmenü.
Dieses hat keine besonderen Einstellungen, daher wird dem Module nur ein Name gegeben.
[[Datei:Suckerfishalternative_navigationsmenue.png]]

=== Themes - CSS ===
Nun wird die CSS angelegt, bleibt aber vorerst noch leer. Sie bekommt nur einen Namen und anschließend wird ihr mitgeteilt, dass sie für alle Medientypen gelten soll.
[[Datei:Suckerfishalternative_css.png]]

=== Themes - Seitenlayouts ===
Abschließend wird das Layout angelegt. Da kein Kopf und kein Fuß benötigt wird, kann man das ganz einfach machen:
* Titel eingeben
* Spalten wählen
* CSS einharken
* Module einbinden
[[Datei:Suckerfishalternative_seitenlayout.png]]

== ToDo ==
Jetzt sollte wenn man sich die Seite im Frontend anschaut, folgende Ansicht erscheinen.

[[Datei:Suckerfishalternative_ausgangssituation.png]]

Das ist aber nicht das Ergebnis welches angestrebt wird. Also muss noch was getan werden und zwar muss das Design den Vorstellungen hin angepasst werden. Dieses wird über die CSS gesteuert.

=== CSS Inhalt ===
Darum muss jetzt die CSS bearbeitet werden, dazu werden folgende Definitionen eingefügt:

.mod_navigation ul.level_1 span.active{
text-align:center;
display:block;
}

.mod_navigation ul.level_1 span.active:hover,
.mod_navigation ul.level_1 span.active:focus,
.mod_navigation ul.level_1 span.active:active{
color:#FFFFFF;
}

.mod_navigation ul.level_1 li{
float:left;
display:block;
margin:0 4px 3px;
padding:5px 10px;
}

.mod_navigation ul li:hover,
.mod_navigation ul li:active,
.mod_navigation ul li:focus{
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color: #AE5500;
}

.mod_navigation ul li:hover ul.level_2,
.mod_navigation ul li:active ul.level_2,
.mod_navigation ul li:focus ul.level_2{
margin:5px 0 0 -10px;
}

.mod_navigation ul.level_1 li a{
display:block;
color:#000000;
text-decoration:none;
text-align:center;
}

.mod_navigation ul.level_1 li:hover a,
.mod_navigation ul.level_1 li:active a,
.mod_navigation ul.level_1 li:focus a{
color:#FFFFFF;
}

.mod_navigation ul.level_2{
width:120px;
position:absolute;
display:block;
margin-left:-99999px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color:#A3A3A3;
padding:4px;
}

.mod_navigation ul.level_2 span.active{
text-align:left;
display:block;
padding: 3px 0 3px 5px;
color:#FFFFFF;
}

.mod_navigation ul.level_2 span.active:hover,
.mod_navigation ul.level_2 span.active:focus,
.mod_navigation ul.level_2 span.active:active{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li{
margin:0;
background-color:#A3A3A3;
padding:2px 0;
width:100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li a{
display:block;
color:#FFFFFF;
text-align:left;
padding: 3px 0 3px 5px;
}

.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li a:active,
.mod_navigation ul.level_2 li a:focus{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

TIPP: mit der Extention [http://www.contao.org/erweiterungsliste/view/csseditor.20050059.de.html csseditor] kann man die Zeilen einfach kopieren.

Nun sollte die CSS wie folgt aussehen:
[[Datei:Suckerfishalternative_css-gefuellt.png]]

==== Hintergrund zur CSS ====
Die CSS ist nicht optimiert und die Rundungen werden auch nicht von allen Browsern unterstützt. Wenn man das aber für alle Browser gleich darstellen will, muss man noch mit Hintergrundbildern arbeiten, darauf wurde hier aber bewusst verzichtet.

=== Endergebnis ===
Das Ergebnis sieht nun wie folgt aus:
[[Datei:Suckerfishalternative_endergebniss.png]]

Datei:Suckerfishalternative ausgangssituation.png

2010-09-25T09:50:12Z

KATgirl:

Datei:Suckerfishalternative css-gefuellt.png

2010-09-25T09:49:52Z

KATgirl:

Suckerfishalternative

2010-09-25T09:49:31Z

KATgirl:

== Einleitung ==
Das Tutorial [http://dev.contao.org/projects/typolight/wiki/TutorialsSuckerfish|Horizontal Suckerfish-like navigation] beschreibt, wie man ein Menü erstellt. Allerdings wird dazu JAVAScript verwendet, was nicht immer funktioniert.
Dazu kommt, dass die Anleitung auch schon ein paar Tage auf dem Rücken hat. In diesem Tutorial soll nun mal gezeigt werden, wie man ganz leicht mit CSS und den Contao-Hausmitteln ein solches Menü erzeugt.

Als Grundlage für das Design, hat das Menü auf der Contao-Hompage gedient. Da sich sicher alle dieses schon mal angeschaut haben, bedarf es keine große Erklärung.

== Vorraussetzung ==
Dieses Tutorial wurde auf Basis von Contao 2.9.1 erstellt. Dabei handelt es sich um eine neue Installation aus den Quellen ohne jegliche Anpassungen.

Daher sollte es auch für Anfänger möglich sein diese Anleitung nachzuvollziehen, vorausgesetzt sie können die Grundfunktionen von Contao bedienen.

Was nicht schlecht wäre, wären natürlich Grundkenntnisse zu CSS. Wer die nicht hat, kann auf Seiten wie [http://www.css4you.de CSS4YOU] die Sachen nachschlagen oder fragt in der [http://www.contao-community.de/ Community] nach.

== Vorbereitung ==
Es wurde ein neuer Startpunkt der Seite definiert und folgende Seitenstruktur erstellt.
[[Datei:Suckerfishalternative_Seitenstruktur.png]]

Jetzt muss das ganze noch ausgegeben werden. Dazu wird ein neues Themes angelegt.

In dem Themes werden nun folgende Schritte vorgenommen:
# Erstellen eines Modules für die Navigation
# Erstellen einer CSS für das Aussehen
# Erstellen eines Seitenlayouts zur Anzeige

=== Themes - Module ===
Es wird ein neues Module erstellt vom Typ Navigationsmenü.
Dieses hat keine besonderen Einstellungen, daher wird dem Module nur ein Name gegeben.
[[Datei:Suckerfishalternative_navigationsmenue.png]]

=== Themes - CSS ===
Nun wird die CSS angelegt, bleibt aber vorerst noch leer. Sie bekommt nur einen Namen und anschließend wird ihr mitgeteilt, dass sie für alle Medientypen gelten soll.
[[Datei:Suckerfishalternative_css.png]]

=== Themes - Seitenlayouts ===
Abschließend wird das Layout angelegt. Da kein Kopf und kein Fuß benötigt wird, kann man das ganz einfach machen:
* Titel eingeben
* Spalten wählen
* CSS einharken
* Module einbinden
[[Datei:Suckerfishalternative_seitenlayout.png]]

== ToDo ==
Jetzt sollte wenn man sich die Seite im Frontend anschaut, folgende Ansicht erscheinen.
[[Datei:Suckerfishalternative_ausgangssituation.png]]

Das ist aber nicht das Ergebnis welches angestrebt wird. Also muss noch was getan werden und zwar muss das Design den Vorstellungen hin angepasst werden. Dieses wird über die CSS gesteuert.

=== CSS Inhalt ===
Darum muss jetzt die CSS bearbeitet werden, dazu werden folgende Definitionen eingefügt:

.mod_navigation ul.level_1 span.active{
text-align:center;
display:block;
}

.mod_navigation ul.level_1 span.active:hover,
.mod_navigation ul.level_1 span.active:focus,
.mod_navigation ul.level_1 span.active:active{
color:#FFFFFF;
}

.mod_navigation ul.level_1 li{
float:left;
display:block;
margin:0 4px 3px;
padding:5px 10px;
}

.mod_navigation ul li:hover,
.mod_navigation ul li:active,
.mod_navigation ul li:focus{
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color: #AE5500;
}

.mod_navigation ul li:hover ul.level_2,
.mod_navigation ul li:active ul.level_2,
.mod_navigation ul li:focus ul.level_2{
margin:5px 0 0 -10px;
}

.mod_navigation ul.level_1 li a{
display:block;
color:#000000;
text-decoration:none;
text-align:center;
}

.mod_navigation ul.level_1 li:hover a,
.mod_navigation ul.level_1 li:active a,
.mod_navigation ul.level_1 li:focus a{
color:#FFFFFF;
}

.mod_navigation ul.level_2{
width:120px;
position:absolute;
display:block;
margin-left:-99999px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
background-color:#A3A3A3;
padding:4px;
}

.mod_navigation ul.level_2 span.active{
text-align:left;
display:block;
padding: 3px 0 3px 5px;
color:#FFFFFF;
}

.mod_navigation ul.level_2 span.active:hover,
.mod_navigation ul.level_2 span.active:focus,
.mod_navigation ul.level_2 span.active:active{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li{
margin:0;
background-color:#A3A3A3;
padding:2px 0;
width:100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.mod_navigation ul.level_2 li a{
display:block;
color:#FFFFFF;
text-align:left;
padding: 3px 0 3px 5px;
}

.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li a:active,
.mod_navigation ul.level_2 li a:focus{
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

TIPP: mit der Extention [http://www.contao.org/erweiterungsliste/view/csseditor.20050059.de.html csseditor] kann man die Zeilen einfach kopieren.

Nun sollte die CSS wie folgt aussehen:
[[Datei:Suckerfishalternative_css-gefuellt.png]]

==== Hintergrund zur CSS ====
Die CSS ist nicht optimiert und die Rundungen werden auch nicht von allen Browsern unterstützt. Wenn man das aber für alle Browser gleich darstellen will, muss man noch mit Hintergrundbildern arbeiten, darauf wurde hier aber bewusst verzichtet.

=== Endergebnis ===
Das Ergebnis sieht nun wie folgt aus:
[[Datei:Suckerfishalternative_endergebniss.png]]

Suckerfishalternative

2010-09-25T09:34:22Z

KATgirl: /* ToDo */

Suckerfishalternative

2010-09-25T09:25:53Z

KATgirl: /* CSS */

Datei:Suckerfishalternative seitenlayout.png

2010-09-25T09:24:30Z

KATgirl:

Datei:Suckerfishalternative css.png

2010-09-25T09:23:59Z

KATgirl:

Datei:Suckerfishalternative navigationsmenue.png

2010-09-25T09:23:29Z

KATgirl:

Suckerfishalternative

2010-09-25T09:22:13Z

KATgirl: /* Vorbereitung */

Suckerfishalternative

2010-09-25T08:57:04Z

KATgirl: /* Vorbereitung */

Suckerfishalternative

2010-09-25T08:50:41Z

KATgirl: /* Vorraussetzung */

Suckerfishalternative

2010-09-25T08:50:00Z

KATgirl: /* Tutorial */

Suckerfishalternative

2010-09-25T08:47:14Z

KATgirl: /* Vorbereitung */

=== Tutorial ===
Das Tutorial [http://dev.contao.org/projects/typolight/wiki/TutorialsSuckerfish|Horizontal Suckerfish-like navigation] beschreibt, wie man ein Menü erstellt. Allerdings wird dazu JAVAScript verwendet, was nicht immer funktioniert.
Dazu kommt, dass die Anleitung auch schon ein paar Tage auf dem Rücken hat. In diesem Tutorial soll nun mal gezeigt werden, wie man ganz leicht mit CSS und den Contao-Hausmitteln ein solches Menü erzeugt.

Als Grundlage für das Design, hat das Menü auf der Contao-Hompage gedient. Da sich sicher alle dieses schon mal angeschaut haben, bedarf es keine große Erklärung.

== Vorraussetzung ==
Dieses Tutorial wurde auf Basis von Contao 2.9.1 erstellt. Dabei handelt es sich um eine neue Installation aus den Quellen ohne jegliche Anpassungen.

Daher sollte es auch für Anfänger möglich sein diese Anleitung nachzuvollziehen, vorausgesetzt sie können die Grundfunktionen von Contao bedienen.

Was nicht schlecht wäre, wären natürlich Grundkenntnisse zu CSS. Wer die nicht hat, kann auf Seiten wie [http://www.css4you.de|CSS4YOU] die Sachen nachschlagen oder fragt in der [http://www.contao-community.de/|Community] nach.

== Vorbereitung ==
Es wurde ein neuer Startpunkt der Seite definiert und folgende Seitenstruktur erstellt.
[[Datei:Suckerfishalternative_Seitenstruktur.png]]

== CSS ==

Datei:Suckerfishalternative Seitenstruktur.png

2010-09-25T08:46:52Z

KATgirl:

Suckerfishalternative

2010-09-25T08:45:18Z

KATgirl: Die Seite wurde neu angelegt: „=== Tutorial === Das Tutorial [http://dev.contao.org/projects/typolight/wiki/TutorialsSuckerfish|Horizontal Suckerfish-like navigation] beschreibt, wie man ein Me…“