Here is a summary of the workshops held at the third TYPOlight user meeting in Essen, May 2010.
by Leo Unglaub (Friday, 09:00 - 10:00)
attachment:ProfessionellesWebhosting.pdf
by Christian de la Haye and Markus Peltzer (Friday, 10:15 - 11:15)
attachment:TLUT2010-Fallstudien.pdf
by Markus Milkereit (Friday, 11:30 - 12:30)
- No documents available yet -
by Harry Boldt (Friday, 14:30 - 15:30)
attachment:tl-training-public.pdf
by Christian Schiffler and Marc Reimann (Friday, 15:45 - 16:45)
http://catalogdemo.dasprojekt.org
by Andreas Schempp (Friday, 17:00 - 18:00)
http://www.isotopeecommerce.com
by Thomas Weitzel (Saturday, 09:00 - 10:00)
http://www.tl-usertreffen.weitzeldesign.com
by Guido Pelzer (Saturday, 10:15 - 11:15)
attachment:TL-Usertreffen-2010-SEO-p3consult.pdf
by Jan Theofel (Saturday, 11:30 - 12:30)
http://www.typolight-anleitungen.de/post/items/typolight-erweiterungen-seo.html
by Peter Müller (Saturday, 14:30 - 15:30)
http://www.slideshare.net/pmmueller/typolight-und-css-4117484
by Leo Feyer (Saturday, 15:45 - 16:45)
Die Vorstellung der neuen Features erfolgte als Live-Demo, die eventuell demnächst als Screencast verfügbar ist.
Das Gruppenfoto wurde mit freundlicher Genehmigung von Thomas Weitzel veröffentlicht.
PageOutline(1-4, Table of Contents)
Just copied the old description, text has to be rewritten for the new Extension repository.
With this module you can create content-articles and connect them to one or more pages.
In TYPOlight you normally have the page structure and you create articles which belong to a specific page.
With this module your can do it the other way round. First create an article and then choose on which pages it should appear. You can use this module to make page-specific content in the left or right columns which should appear on every or some pages. Examples are your contact-address, newsletter-subscription and so on.
This module makes it possible to reuse the same content on one or more pages. If you change this content-element the changes will appear on every page to which the box is connected.
Difference between the Content-Box-Module and the Alias?
In contradiction to the Alias-Module you don't have to create an article in the page-structure first. The contents of the box-module are completely independent of the page-structure an do not appear in the page-structure in the backend.
Download ZIP-File and unzip it.
Copy the "boxes"-Directory in to the 'system/modules' directory of your TYPOlight installation so that you have an directory: "/system/modules/boxes/".
After this, run the TYPOlight installer tool to update your database. Box-Module is now installed.
1 Since version 1.1 the module has got some more features and there has been some major modifications, so you will find more options and maybe the names of the fields has changed. But the way to install the tool and the main-functions are already existent. So do not wonder if you see something different, maybe we can update the screenshots and instructions sometimes
It is possible to have one or more box-sections. This means, you can manage for example one box-section (with several boxes inside) on the left-column and another box-section on the right-column.
Follow these instructions to learn how it works.
First create a new module and choose "Content-Box" as Module-Type.
Please use the field Module Alignment to define on which column the module should appear.
As you can see, the module is named "Box left". Therefore choose the Left Column for this example.
After you created this module, please create another module and give it the name "Box main" and choose the Main Column in the field Module Alignment
Now you have created two Modules:
1. Box left
2. Box main
Now go to "page layouts" and choose the layout you use for your website. Scroll down to the section Included Modules and add at the end the two Modules you have just created in the first step.
Image(tl_boxes_pagelayout.jpg)
Please be careful that you choose the same column which you chose for the module in step 1.
This means: Module "Box left" should be connected to column left and Module "Box main" should be connected to the main column.
1 This sounds a little bit complicated in some way. But if you are more familiar with this module you will see that you have complete flexibility to change the section on which your boxes should appear. for example: instead of name the box-module "Box left" you can name it "Box Contact". Then you can freely and quickly choose where the box should appear. Perhaps after a website rework you want to have the contact-boxes on the left side you dont have to edit each box separately - you just have to change the assigned column in this page-layout options.
Save your changes.
Now you can create the box-content-elements.
Click on the Content-Box Module and then "create new box".
You can see now the following screen:
Title
This is the title of the box.
Position/Order
This is for sorting the boxes.
Type in a number. The ordering is ascending.
ORDER BY position ASC.
Connect to Module
As you know we have just created two Modules and linked them each to a specific column.
Here you can now choose on which Box-Module (which means in which column) the box should appear.
Content
This is for the content.
You can use InsertTags or/and HTML.
Pages
Here you can select one or more pages from the pagetree in which the box should appear. This is the main-feature of this module. Instead of using an Alias which you must insert on each page manually, you are able to select the pages on which the content should appear in a simple way by selecting the pages in the page-tree.
for example: if you have some pages with downloads, you can make a box with general information and a link to a pdf-reader-software. You can now choose these pages which includes the downloads and the download-infobox will appear on all these pages.
Now click "save and close"
To understand how the module works, please create two other boxes.
For the 2. Box type in the following:
Title: "Second Box left"
Position: "2"
Connect to Module: "Box left"
Pages: choose one or more pages
Create a 3. box:
Title: "First Box main"
*Position: "*1"
Connect to Module: "Box main"
Pages: choose one or more pages
Now you can see the following screen:
The boxes are sorted by the connected Module and then by its position.
As you can see there are now the two boxes in the left column and one box in the main column.
If you want you can now create another box-module called "box-footer" for example, connect it to the footer-section in the page-layout and use it for contact-information or copyright-information.
you can also use this module to display text or images in the header of your page and so on.
Please feel free to add more information or inform me about mistakes in phrasing.
PageOutline(1-4, Table of Contents)
Die Installation ist über die "Erweiterungsverwaltung" möglich. Da sich das Modul zur Zeit noch im Betastatus befindet, muss nach dem Wählen von "Erweiterung installieren/aktualisieren" der Punkt "Beta" in der Auswahlliste mit ausgewählt werden. Danach kann aus der Auswahlliste "browser_update" gewählt werden. Den weiteren Schritten des Installers folgen.
- Neues Modul anlegen unter "Module" und "Neues Modul"
- Titel eingeben (z.B. "Browser Update Hinweis")
- Modultyp auf "Browser Update" einstellen (unter Verschiedenes fast am Ende der Liste)
- Benachrichtungen einstellen. Empfehlenswert ist zum Test den Hinweis immer einzublenden. (Sonst seht ihr den Hinweis mit einem aktuellen Browser natürlich nicht und wisst nicht, ob die Einbindung erfolgreich war.)
- Modul speichern
- In die Seitenlayouts wechseln. Pro Seitenlayout, bei dem der Hinweis eingeblendet werden soll, unter "Eingebundene Module" das neue Modul an beliebiger Stelle ergänzen. (Der Javascript-Code wird ohnehin im Seitenkopf eingebunden.)
- Auf die Seite gehen zum Testen.
- Nach erfolgreichem Test im Modul die Benachrichtigungen einstellen. Ich empfehle eine manuelle Konfiguration, die auch den Internet Explorer 6 umfasst.PageOutline(1-4, Table of Contents)
You can install the extension like every other one using the extension repository. Follow the instructions as usual.
- Create a new module
- Enter a title (e.g. 'browser update notice')
- Choose the module type 'Browser Update' (see category miscellaneous)
- Configure notices. It's recommended that you display the notice in every browser first while testing the extension. This way you (and you're hopefully using the current version of your browser) are able to see the notice as well.
- Save the module
- Go to the page layouts. In the section 'Included modules' you can now include your module wherever you want to. It doesn't matter whether you choose the 'header' or the 'Left column' because JavaScript-Code is included in your page header anyway.
- Switch to the frontend view to test
- After a successful test go back to the module to change your notice settings. I suggest using the manual configuration which includes Internet Explorer 6 as well.Tutorial created by [http://www.typolight.org/mitgliederliste.html?show=3517 ETES":http://www.browser-update.org]
_Tutorial translated by Toflar
PageOutline(1-4, Table of Contents)
1 The Catalog and Catalog Extension modules are advanced modules and will require intermediate knowledge of PHP, HTML/CSS in order to create catalog that displays the way you really need it. To create advanced displays, you will need to understand PHP array structures provided in the TPL files.
2 *NOTE: This is not a module for beginners*.
1 The Catalog module is a simple stop-gap to assist beginners with quickly getting up a custom application without having to write any code. However, the Catalog module is obviously NOT capable of working for all situations, at some point you have to get yourself dirty with PHP programming and just write your own TL applicationa, which is a bit of work and a lot of files, but easier than you might think.
The Catalog System is currently divided into two modules (which will merge in the next release). You will have to install both catalog and catalogext to get all the features.
The Catalog (main) module allows user to define and manage catalogs of items. The CatalogExt adds features and allows you to build powerful front-end modules to display and arrange the data in your catalog.
Imagine you want to show to visitors of your site a list of your games. You may have many games, but all share certain attributes, like title, author, genre, console formats, release date, etc. You want to save all this information and later present it to visitors, let them show only games in the driving games genre, or games with price above a certain amount, only games that are available, etc. This module allows you to do just that.
In this documentation we will create a catalog of computer and console games.
Install both packages from the Repository or download the ZIP and install files in their relative folders.
The first step is to create the catalog of items. Click Catalog in the left menu and then click New catalog in the top action menu.
The catalog list shows the name, item count and optionally the image thumbnail if set.
Now fill the form as seen on image bellow. Name is only for your orientation, it is displayed in item types list. More important is Table name. It is the name of the table which will store your catalog data. Use only letters, numbers and underscore, but make sure table name does not start with number. Also some names are reserved, so you may obtain an error when creating item type. It is a good idea to add prefix to your tables like cat_, so that you know they belong to catalog, e.g. cat_mycatalogname
1 If you prefix your catalog instead with @tl_@ the TYPOlight Database update tool thinks this is an application table without matching application files anywhere, so you will be asked to "Drop existing table". This will happen every time you install/uninstall an extension or perform an installation update. If you "Drop existing table" you will lose all your Catalog data. So its probably best to use the @cat_@ prefix that TL doesn't recognise as an internal system table.
Leave the format title string empty for now, we get to that in a later section.
You can also add an image and set its preview size (as in picture above). This will be displayed below the name of the catalog when you return to the catalog list.
Further down (installed by the Catalog Extension module), you will find additional parameters to set.
Catalog Extension - additional catalog fields
Now click Save and close. Don't click Save and edit, because we need to define fields, before we can add our items. (As a matter of fact you can add items now, but they won't contain any useful information).
Next to the catalog you just created, click the Define fields button (shown on the image bellow).
After that the list of item type fields is displayed. It is currently empty. So go ahead and create new by clicking the New field button.
After that the field definition dialog appears. You need to enter Label, Description and Column name. The rules for column name are the same as for the table name, so use only letters, numbers and underscore.
Next you need to specify the type of item. Type tells what may user put into the field. For example if you want to store book title, you will choose field type text. If you want to store number of pages, use type number. If you want to add longer description, use longtext. After selecting type, you may further customize the field. I believe you will be able to figure out what type best serves what purpose.
published or archived (use as filter or hide sections when selected as controlling checkbox)You can also set various visual options like: insert break (field separation line), title field (shown in items list), filter (in BE), search (in BE), sort (in BE), grouping mode (in BE) and controlling checkbox (hides field below this checkbox).
Then there are also other control options like: mandatory (field is then required), unique, default value and format (string, number, money, date formats supported).
Now click Save and we have our first item field. Create as many fields as you want. The examples created the following fields:
Image(catalog-field-list2.jpg)
In order to create a quick reference for options like genres or formats you can simply create these in a tree within the taxonomy module and use them as input reference for a select or tags field type.
Here is the Taxonomy module's configuration for this Games Catalog example:
To use the Taxonomy as a reference in Select and Tags field types, you have to choose the tl_taxonomy table as your reference.
Image(catalog-select-taxonomy.jpg)
Help on [%s":http://php.net/sprintf] => Help on [Space Invaders]
2 => 1,524.31
Y-m-d H:i => 2009-03-02 17:34
We have successfully defined fields for our catalog. Now it is time to create few catalog items.
Select Catalog module again and you will see a list of item types defined. Click the Manage items button to add, delete and edit items.
[[Image(catalog-items-btn.jpg)":http://php.net/date]]
Now create a new item by clicking the New item button in the header area. You see that the new item contains all the fields we defined and you may fill it in a very convenient way, just like in many other modules in TYPOlight.
You can now also customize your catalog entries using a new feature in version 0.3.0. In the back-end you can define the format string in the catalog type definition (see using Catalog Module). Although values are already formatted using the catalog definition (format string), this format string additionally allows you to create thumbnails, wrap values in bold, italic. Actually any HTML is allowed.
1 Ensure that all fields you want to use in the Back-end display with this *format title string*, have been selected as *@[x] Title field@* in their individual field definitions.
Below is an example of what you can achieve.
First, enter the code in the Catalog Type definition of Format title string:
<strong>{{title}}</strong> - {{price}} <em>[{{releasedate}}]</em> {{archived::src=all.gif}} {{archived}}<br />
{{image::w=60&h=80}}
h2. Catalog Permissions
The Catalog application is integrated into the TYPOlight user permissions system and will allow you to set permissions for editing items within User and User Groups (for Back-end). You will be able to restrict who can edit which Catalog.
<code class="div">
Only the Administrator can create, edit or modify field types, so you cannot give a User permissions to change the catalog's table structures.
</code>
Catalog Extension modules:
You may continue configuring your catalog using the documentation for the [ExtensionsCatalogExt Catalog Extension] module to create the front-end modules listed above.
PageOutline(1-4, Table of Contents)
1 This is not a substitute for proper tracking, but provides a means for TL users to add items.
PageOutline(1-4, Table of Contents)
1 The Catalog and Catalog Extension modules are advanced modules and will require intermediate knowledge of PHP, HTML/CSS in order to create catalog that displays the way you really need it. To create advanced displays, you will need to understand PHP array structures provided in the TPL files.
2
3 *NOTE: This is not a module for beginners*.
1 The Catalog module is a simple stop-gap to assist beginners with quickly getting up a custom application without having to write any code. However, the Catalog module is obviously NOT capable of working for all situations, at some point you have to get yourself dirty with PHP programming and just write your own TL applicationa, which is a bit of work and a lot of files, but easier than you might think.
The documentation below only explains how to configure the CatalogExt Front-End modules (see reference links below).
Once you've setup a Catalog in the back-end, you can use the Catalog Extension to add more features and to build the front-end with the following modules:
To better understand the Front-End (FE) Modules, the following two diagrams will illustrate the two-page approach.
Catalog List Page
Catalog Reader Page
Image(catalog-reader-usage.jpg)
In the Front-End, this is what it looks like:
This module provides a way to (randomly) list items with similar specification/fields to the currently viewed catalog item. Example: View other "Action Adventure" games where this related [genre] field matched.
1 This module is intended to be used on a Catalog Reader Page.
This module provides a way to (randomly) list child table items where a selected field matches the currently viewed parent catalog item. Example: List all items from the (child) Games Catalog where the currently viewed reference (parent) Region Catalog item matches on the selected reference field [region].
1 This module is intended to be used on a Catalog Reader Page.
You can also use the [#CatalogInsertTags Catalog InsertTags] as specified above in Catalog Related.
Its also possible to add custom parameters retrieved from the current catalog item as Catalog InsertTags in the custom condition (WHERE) and ordering (ORDER) boxes. See the image below for a more complete example using a price bracket and using date calculations compared to the current date. The general format to use the currently viewed catalog item's values is:
{{catalog::fieldname}} will return the field's value
Several tips and tricks are listed below.
You can set-up complex custom conditions using the [#CatalogInsertTags Catalog InsertTags] above as well as regular [EnglishInserttags TL InsertTags]. This will allow you to filter the current Catalog module by variables like date, time, and when placed on a Catalog Reader page, you can use the current items information to further filter the Featured, Related, Reference, etc. items.
Image(catalog-conditionorder.jpg)
You can also enter custom ordering clauses (Featured requires you to enable it first) to allow you to order the items in your own way. Here are some suggestions.
tstamp DESC
MD5(CONCAT(CURDATE(),id))
PageOutline(1-4, Table of Contents)
The Catalog Mailer adds the ability to mail catalog items to a predefined mail setup. This is ideal for sending an property or product update e-mail to a head-office or group e-mail on a regular basis.
1 This module requires the installation of the [ExtensionsCatalog Catalog Module] and [ExtensionsCatalogExt Catalog Extension Module].
This module adds the ability to mail Catalog items to the Catalog/Catalog Extension modules. You can set-up a pre-defined query with limit numbers and then the mailer will allow individual item selection before mailing.
The backend allows setting up the subject, sender address, pre-defined recipient list, mail_xx and catalog_xx templates, field list to display in mailer application, filter condition and default sort order, and number of items.
Image(catalog_mailer-config.jpg)
Once enabled, the Catalog Mailer creates a mail button for each catalog. The mailer application allows you to add custom recipients, a custom message and to select the catalog items to add to the mail. You can then preview or mail the catalog items.
Image(catalog_mailer-mail.jpg)
Versand von personalisierten Bestätigungs-Mails bei Eingang von Daten aus Frontend-Formularen;
Speichern der Daten aus Formularen in Backend-Modulen/-Tabellen und/oder Formular-Generator nutzen, um Backend-Module zu erstellen;
Auflistung und optional Bearbeitung der Daten im Frontend;
Formular-Felder des Typs select/radio/checkbox mit Werten aus Datenbank-Tabelle
Sending personalized conformation mails after receiving data from frontend forms;
store data from forms in backend modules and/or use form generator to create backend modules;
list and optional edit formdata in frontend;
form fields of types select/radio/checkbox taking values from database table
Installation per Erweiterungskatalog oder Erweiterungsverwaltung im Backend
oder
manuelle Installation:Installation per Extension catalog or Extension manager in backend
or
manual installation:PageOutline(1-4, Inhaltsverzeichnis)
EFG stellt im Formular-Generator eine zusätzliche Option zur Verfügung:
Daten im Modul "Formular-Daten" speichern.
Image(efg_form_options2_de.png)
Wenn diese Option aktiviert ist, werden über das Frontend-Formular übermittelte Daten in der Datenbank gespeichert und können im Backend verwaltet werden.
1 Nach Ergänzung oder Änderung von Formular-Feldern muß das Formular erneut gespeichert werden, oder aber diese Option erst nach Anlegen aller benötigten Formular-Felder gewählt werden.
Sobald für mindestens ein Formular die Speicherung der "Formular-Daten" aktiviert ist, erscheint ein neuer Bereich in der Backend-Navigation, benannt als "Formular-Daten".
Jedes "daten-speichernde" Formular erzeugt darunter einen weiteren Eintrag (die Bezeichnung entspricht dabei dem Titel des Formulars). Hier können die Daten bearbeitet/verändert und gelöscht werden. Auch Neuanlegen von Datensätzen, sowie Export der Daten im CSV-Format ist im Backend möglich. Zusätzlich bietet der Navigations-Eintrag "Feedback" den gleichzeitigen Zugriff auf die aus verschiedenen Formularen gespeicherten Daten. Dies kann genutzt werden, wenn z.B. mehrere unterschiedliche "Anfrage"-Formulare im Einsatz sind. (Ein Neuanlegen von Daten ist allerdings nur in den formularspezifischen Listen-Ansichten möglich.)
Image(efg_be_formdata_edit_de.png)
Jeder Datensatz umfaßt zusätzlich zu den per Formularfeld definierten folgende Basis-/Metadaten:
- das Datum der Erstellung/Übermittlung des Datensatzes (Feldname "date") *1
- die IP-Adresse des Benutzers (Feldname "ip") *1
- eine Checkbox "Veröffentlicht" (Feldname: "published", Vorgabewert: nicht veröffentlicht, kann wie bei Artikeln z.B. in Verbindung mit Auflistung-Modul als Kriterium für Anzeige im Frontend dienen) *2
- ein Textfeld "Bemerkung" (Feldname: "be_notes") *2
*1 - diese Felder sind im Frontend-Formular nicht verfügbar; sie werden sowohl per Frontend-Formular als auch bei Daten-Erfassung im Backend automatisch befüllt
*2 - diese Felder sind im Frontend-Formular nicht verfügbar, können aber z.B. in Verbindung mit Auflistungs-Modul Verwendung finden
Zur Ausgabe der "Formular-Daten" im Frontend steht ein Ausgabe-Modul "Auflistung Fomular-Daten" zur Verfügung. Die Anwendung und Funktionsweise entspricht dem Modul "Auflistung".
Optional kann die Bearbeitung, das Löschen sowie CSV-Export der Daten im Frontend ermöglicht werden (wahlweise öffentlich, nur Daten der eigenen Mitglieder-Gruppe oder nur eigene Daten).
Image(efg-be_formdatalisting_de.png)
Anstelle von Datenbank-Feldnamen wird bei den Angaben "Felder", "Bedingung", "Sortieren nach", "Durchsuchbare Felder" und "Felder der Detailseite" der im Formular-Generator für das jeweilige Formularfeld eingetragene "Feldname" verwendet.
----
zurück
EFG steht für Extended Form Generator und erweitert den TYPOlight Formular-Generator um die folgenden Features.
TYPOlight bietet die Möglichkeit, nach Absenden eines Formulars im Frontend auf eine "Danke-Seite" weiterzuleiten, sowie eine Email mit den übermittelten Daten an eine definierte Email-Adresse zu versenden. Diese kann optional als Kopie auch an den Absender des Formulars geschickt werden.
EFG bietet darüberhinaus die Möglichkeit, eine Email mit beliebigem Text-Inhalt an den Formular-Absender zu senden. Der Text und Betreff kann durch den Einsatz von "Insert-Tags" personalisiert werden.
Ab v1.8 können die "Insert-Tags" (wie in der Bestätigungs-Mail) auch auf der Bestätigungs-Seite verwendet werden.
EFG bietet im Formular-Generator eine weitere Option "Daten im Backend-Modul speichern".
Bei gewählter Option werden Backend-Module erzeugt, in denen die aus Frontend-Formularen eingehenden Daten
verwaltet werden können.
Es ist ebenso möglich, neue Datensätze direkt im Backend anzulegen - auch ohne veröffentlichtes Frontend-Formular. Dadurch können nahezu beliebige Backend-Module/-Tabellen erstellt werden, einfach durch Anlegen eines Fomulars mit den benötigten Feldern. Manuelles Anlegen von Datenbank-Tabellen ist nicht erforderlich.
Zur Ausgabe der "Formular-Daten" im Frontend steht letztlich noch ein spezielles Listing-Modul zur Verfügung. Dies erlaubt die Ausgabe der "Formulardaten" im Frontend, mit Listen- und Detailansicht. Bearbeitung, Löschen und CSV-Export im Frontend können optional aktiviert werden, mit wählbaren Berechtigungs-Einschränkungen.
EFG stellt im Formular-Generator weitere Feld-Typen bereit:
"*Select-Menü (DB)*", "*Radio-Button-Menü (DB)*" und "*Checkbox-Menü (DB)*"
Die im Frontend-Formular verfügbaren Optionen dieser Formular-Elemente werden aus beliebigen TL-Datenbank-Tabellen generiert (Angabe der Tabelle, des anzuzeigenden Feldes sowie optionaler Einschränkung zur Filterung der Werte)
"*Bild-Auswahl-Menü*"
Dieser Feld-Typ erzeugt im Frontend-Formular eine Bilder-Galerie, ergänzt um Radio-Buttons zur Auswahl eines Bildes.
----
zurück
Wenn die Erweiterung EFG gemeinsam mit der Erweiterung Ordner-URL [folderurl] installiert ist, kann es ohne zusätzliche Einstellungen beim Aufruf einer Detailseite im Frontend zu der Fehlermeldung "Page not found" kommen. Grund hierfür ist eine fehlende Einstellung im Backend.
Bei der Frontendausgabe kennt das Modul Ordner-URL nicht die Variable für die Detailseite.
Die Variable wird bei den Einstellungen für das EFG-Modul zur Frontendausgabe mit angeben. Der Vorgabewert ist hier "details". Diese Einstellung kann für die Frontendausgabe nach eigenen Wünschen angepasst werden.
Image(URL-Fragment_der_Detailseite.jpg)
Nachdem klar ist, welche Variable für diese Detailseite eingegeben ist, muss dies nun der Erweiterung Ordner-URL mitgeteilt werden.
Hierzu muss in den TYPOlight-Einstellungen die Variable für die Detailseite eingegeben werden.
Unter System -> Einstellungen befindet sich ein Feld "URL Schlüsselworte". Wird die Standardvorgabe "details" verwendet, muss der Wert "details" eingetragen werden. Bei der Verwendung einer anderen Variablen muss diese eingetragen werden. Mehrere Variablen können kommasepariert eingetragen werden.
Image(URL_Schluesselworte.jpg)
Nach diesen Einstellungen wird die Detailseite der Frontendformulare angezeigt und die Module EFG und Ordner-URL können gemeinsam verwendet werden.
----
zurück
Hierfür stehen im Formular-Generator die im folgenden dargestellten Felder zur Verfügung.
Bestätigung per Email versenden: Nur wenn diese Option gewählt ist, wird eine Bestätigungs-Email versendet und es stehen die weiteren Felder zur Verfügung:
Formularfeld der Empfänger-Emailadresse: Hier muß das Formularfeld gewählt werden, das die Email-Adresse des Frontend-Benutzers/Seitenbesuchers enthält
Absender: Die Email-Adresse, die als Absender der Bestätigungs-Mail verwendet wird
Verwendung von Insert-Tags möglich, siehe "Text der Bestätigungs-Email"
Betreff: Die Betreffzeile der Bestätigungs-Mail
Verwendung von Insert-Tags möglich, siehe "Text der Bestätigungs-Email"
Text der Bestätigungs-Email: Der eigentliche Text (Mail-Body) der Bestätigungs-Email.
Es können die allgemeinen "Insert-Tags" (siehe http://dev.typolight.org/wiki/GermanInserttags) zur Ausgabe von Datum o.ä. eingesetzt werden. Weiterhin können die per Formular übermittelten Daten mit Insert-Tags der Form {{form::FELDNAME}} im Text eingesetzt werden. FELDNAME steht hierbei für den "Feldname", der im Formular-Generator für das jeweilige Formularfeld eingetragen wurde. Enthält das Formular z.B. ein Feld mit Feldname "user_name", so wird das Insert Tag {{form::user_name}} im Text der Email durch den vom Formular-Absender angegebenen Namen ersetzt.
Datei-Uploads können als Anhang der Bestätigungs-Mail versendet werden, durch Einfügen von Insert-Tags der Form {{form::FELDNAME?attachment=true}}
HTML-Vorlage für die Bestätigungs-Email: Falls die Bestätigungs-Email als HTML-Mail (bzw. als Multipart, sowohl Text- als auch HTML-Version) versendet werden soll, kann hier aus dem Dateisystem eine HTML-Datei gewählt werden. Mit der Installation dieser Extension wird im Ordner "example_confirmation_mail" ein einfaches Beispiel für Testzwecke bereitgestellt. Die Verwendung der Insert-Tags ist auch in der HTML-Vorlage möglich.
Image(efg_form_options1_de.png)
----
zurück
PageOutline(1-4, Table of Contents)
This module provides a new type of event which links a registration form, a last registration date, show Free remaining (for count validation) and provides a module that displays the event with these new additional options.
Image(eventsattend-options2.jpg)
Event Front-end
mod_eventsattend.tpl now only contains the appended registration information (the original modules mod_event.tpl and event_xxx.tpl need to be modified to change their output accordingly)
1 Use this module INSTEAD of your regular Event Reader module. If the event you are viewing is a default event (no registration) it will display as a normal TL event using the default TL templates as described above (without any additional info).
PageOutline(1-4, Table of Contents)
The Form Auto Module adds a new form type called Automatic Form, which allows you to store the form values into an auto-managed table (as you modify form name and form fields), adds filter, unique and count/total validation and also adds a confirmation e-mail using HTML template with tags.
The package consists of 3 parts:[Automatic Form]
1 REMEMBER, as the form stores data for itself, you will need a SEPARATE form for EVERY event. You can easily duplicate a form and include in a new event (usually the confirmation e-mail and thank you can be made once per site, so no other changes needed).
While adding fields, the database table will be automatically managed. Warnings will be presented if you try to create certain system columns as field names.
Go back and edit the form again. Now go down to the 3 validation types and add them using the guide below.
Select a Filter field from the drop-down that will be used as a filter for validation, e.g. venue or city.
Select a Unique field from the drop-down that must be unique (no duplicates), e.g. email
Select one or more Count fields from the checkbox list to add counter fields. Use the radio/select/checkbox if you want them to book multiple choice or several sessions or breakout sessions.
Enter the count maximum values using the guide below:
|) ;) ,)Using the Image below as an Example:
Filter:
Count Fields:
Now you can enter Count Maximum Values like this:
[* 15,12,10; 30,12,10 | 10,10,10; 20,10,10 | 50,20,20; 50,30,25 *]
or in words --
| Breakout1: A=15,B=12,C=10 ; Breakout 2: A=30,B=12,C=10| Breakout1: A=10,B=10,C=10 ; Breakout 2: A=20,B=10,C=10| Breakout1: A=50,B=20,C=20 ; Breakout 2: A=50,B=30,C=25Select a field from the drop-down to use as a value to count with, instead of just 1. Use this to allow the user to choose how many guests they will bring to the session (e.g. 1: just me, 2: me + partner, 3: family of 3, 4: family of 4, etc.). Here you can ONLY choose a SELECT/RADIO drop-down, as you don't want the user to type this in (to restrict his maximum).
Select to show the free count appended to the label (text field label, or option label in select, checkbox or radio fields)
Image(formauto-validation.jpg)
Name [name@domain.com] {{form::firstname}} or to save some effort, you can include 1 tag called {{formauto::all}} which will create a table and add all the fields to the e-mail (useful if you want to set-up 1 standard confirmation e-mail per site)Image(formauto-confirmation.jpg)
This support module has no real parameters and it is used on a Thank You page to display the processed form data in readable format to the end-user, as confirmation of their form submission (as used above).
This support module asks for the FORM and will show a table with all the free seats available.
This support module asks for the FORM, instead of the tablename. The module works just like the listing module, but with CSV formatted export -- if you use the list_formauto.tpl template.
PageOutline(1-4, Table of Contents)
The Gallery module allows you to manage image galleries grouped by gallery archives, outside of an Article. This Module works similar to the Gallery CE, but its uses its own separate database and uses modules (similar to news) to create a gallery list, viewer and single gallery.
You can create and edit new Gallery Archives, e.g. Wallpapers, Nature, Travel, Modern. These will then contain many galleries creating a theme grouping.
Image(gallery-archive-edit.jpg)
Inside a Gallery archive, create several galleries, each with its own settings.
When you've added a few galleries, this is what they will look like in the item list.
The gallery list module (with gallery_short.tpl) shows all the galleries in an archive each with a small 1-line image preview, clicks through to gallery viewer below.
1 Use the @gallery_short.tpl@ template for the gallery list, and either @gallery_fullscreen.tpl@ to support the slimbox fullscreen effect checkbox in the gallery, or @gallery_default.tpl@ to disable the fullscreen, but still suppoty @meta.txt@ links (as per regular gallery)
Image(gallery-module-list.jpg)
A gallery viewer (like news reader) module to view a single gallery using the id/alias as parameter.
Image(gallery-module-viewer.jpg)
Gallery Single Module looks identical to this but does not require an ID/alias in the URL, as this is predefined in the module. This can then be used in a news item, event, or added to an article.
PageOutline(1-4, Table of Contents)
This module allows you to manage HTML invitations groups, sent from your designer, to send in bulk to a recipient list. This Module works similar to the Newsletter module, except the recipient list is configured in a selectable file, the input is also a selectable HTML file (from the e-vite designer) and a text-alternate version is auto-generated (extracted from the HTML).
The option to send to a list of predefined e-mail addresses for preview is also built into the system.
You can create an invitation group first. I design hundreds of invitations for client groups, so I create a group for each Event Company. That way i can assign permissions to each back-end user based on Invitation group. Then that Event Company can only see their invitation designs.
Image(invitation-group-edit.jpg)
tl_files/events/launch/* 1. Applikation HIER herunterladen und nach /system/modules/psishop entpacken2. Die Datei /system/modules/psishop/ModuleArticle.php nach /system/modules/frontend/ModuleArticle.php verschieben. Dies ist nur für die Version 2.6.1 nötig, in der Version >=2.6.2 ist der entsprechende HOOK fest eingebaut.Für die aktuelle Psishop Version ist dies trotzdem nötig, da diese noch nicht auf den neuen HOOK umgeschrieben wurde.3. Das Install-Tool aufrufen und die Datenbank aktualisieren.1. Über den Button Shopsysteme ein neues Shopsystem anlegen.2. Über die Icons Versandoptionen, Zahlarten, Verfügbarkeiten und Steuersätze anlegen.3. Das Shopsystem wird über eine Seite des Typs "Startpunkt einer neuen Website" der eigentlichen Internetseite zugeordnet. Hier im DropDown das gewünschte Shopsystem auswählen.4. Ein Modul Kasse anlegen und in einen Artikel einfügen.5. Ein Modul Warenkorb anlegen und in das Seitenlayout einbinden. Die Jump-To Page sollte auf die Seite mit dem Kassen-Modul zeigen.Ein Produkt ist lediglich ein Inhaltselement. Es kann wie gewohnt ein Artikel angelegt werden, der dann ein oder mehrere Produkt-Elemente enthält. Die Zuordnung zum Shopsystem geschieht hier automatisch durch die ROOT (Startpunkt) Seite.
Es gibt allerdings einige unterschiedliche Anzeigemöglichkeiten für die Produkt-Elemente:Hier wird das Produkt-Element wie gewohnt über ein Template ausgegeben.Über dieses Template wird nur das entsprechende Formular erzeugt, welches nötig ist, um das Produkt in den Warenkorb zu legen.
Die Gestaltung und Präsentation des Produktes wird hier über andere Inhaltselemente im Artikel erledigt.
Hier werden alle Produktelemente in einer kurzen, tabellarischen Darstellung angezeigt. Erst nach dem klick auf DETAILS wird
der komplette Artikel (bzw. das Produkt) ausgegeben. Diese Einstellung wird in den Artikel-Eigenschaften aktiviert (analog "Teaser anzeigen")
Einstellung Detailansicht auf das Inhaltselement beschränken: Der Details-Link kann entweder die Anzeige des entsprechenden Artikels aufrufen oder nur ein einzelnes Produkt-Element anzeigen. So kann wahlweise ein Artikel viele Produkte enthalten oder jeweils ein Artikel pro Produktdarstellung genutzt werden.
PageOutline(1-4, Table of Contents)
This module allows you to set-up multiple polls in TYPOlight - each with their own Title, Description, Show Until date and Options -- options are the "answers" you want the user to choose from with a radio button group.
The user is required to make a a choice on the form (with error if not) and when you submit the form, your vote is added to the database and the results of the poll are displayed in graphic format. The stop date closes the poll for voting, so only results are displayed.
You are able to customize the look using different width algorithms and using CSS classes to change colors.
1 This Module allows you to create multiple polls at the same time, each with its own set of parameters.
Click on the Image(icon.gif) QuickPoll icon in the Back-end Left Navigation Menu. You will see an sorted list of all your Quick Polls here - most likely, your screen will be empty. We'll add a new Quick Poll by clicking on (+) new Quick Poll icon at the top.
1 From v1.2 you can also reset the poll with the reset button - only visible to *Administrators*. This will also clear session and cookie values on the Admin machine. Cookies will have to be manually deleted on machines that would like to vote again after the reset.
Image(quickpoll-list.jpg)
Here you enter the Title, e.g. Console Quick Poll -- the Description, where you ask the question for the poll, e.g. What is your favourite gaming console? -- the Show Until Date, which is your voting cut-off date (voting is disabled) and the Show Results Link which forces the display of a results link below the form. Finally your Options, which is just a list of answers the user can vote for in the poll, e.g. Sony Playstation 3, Microsoft XBOX 360, Nintendo Wii, etc...
1 You enter 1 Option/Answer per line.
Go to the Modules Menu and then create a new Module, give it a Module Name, select Quick Poll as the Module Type and choose the QuickPoll Name you created above, by clicking on the correct radio button.
You can then also choose the display template, e.g. qpoll_xxxxx.tpl. You can copy and create your own templates, by placing them in the (tl_root)/templates folder.
As above, but instead select Quick Polls List in the Module Type. You can select how many items to show, e.g. 2 will show the 2 most recent completed poll results. You can also choose the display template as above, but one template will be used for all the polls in the archive list.
I'll show the first Article option in the screen below.
1 Remember to first create a Page in the Structure, then create a blank Article and then add the QuickPoll Module to the Article as a Content Element (CE)
When displayed in the front end, the Title, Description are listed with the options as a radio button group. If you selected the show results options, the results link will appear directly below the form.
You will be able to select ONLY 1 value. If you don't select a value an error will be displayed when you try to submit the form.
This is what the CSS-unformatted view will look like, but you can always pretty-it-up using your own CSS styles.
1 The Submit button contains the value: *Vote! * -- this is configurable in the language files.
Once you have voted (clicked submit), the system stores the result into the QuickPoll Database and displays a graphical view with percentages of the results. The total number of votes is also displayed. Each bar also has its percentage of the total in text, over the colored background bar. This is again very basic and CSS-unformatted. You can use CSS with colors to make it blend with your site.
Here is a sample from the included quickpoll.css file, which you can copy/paste/modify into your site's css file.
.mod_quickpoll .graph .results .color1 { color:#FFFFFF; background-color:#333333; text-align:center;}
.mod_quickpoll .graph .results .color2 { color:#000000; background-color:#99CC33; text-align:center;}
.mod_quickpoll .graph .results .color3 { color:#000000; background-color:#99CCFF; text-align:center;}
.mod_quickpoll .graph .results .color4 { color:#000000; background-color:#FFFFCC; text-align:center;}
.mod_quickpoll .graph .results .color5 { color:#000000; background-color:#FFCCCC; text-align:center;}
You can also link the quickpoll.css file into your existing file, but I suggest you copy it before you import it, so that updates, don't overwrite changes you've made. Import CSS example:
@import "quickpoll.css";
1 The lines *Poll end date: 2007-09-19* and *Total votes = 303* - are both configurable in the language files using the format: @Text %s Text@.
To prevent automated polls, the system stores _SESSION and _COOKIE values that prevent multiple votes. Nothing stops you from closing the browser, deleting the cookies and voting again. I do not store any per-vote data, e.g. IP addresses. Also IP's can be spoofed, by simply logging off from your wireless or ADSL session and then you get a new IP when you re-connect.
*Happy Quick Poll! *
PageOutline(1-4, Table of Contents)
This module allows you to upload a ZIP file (once enabled) and then use a button in the TL File Manager to unzip the file and its contents.
1 This extension can be made compatible with TL 2.5.9 and below, by copying a file from TL 2.6 /system/library/ZipReader.php to your older installation in the same location. This has been tested to work.
Install extension from the TL Repository back-end or download and unzip it to your _typolight/system/modules/ _ directory in your TYPOlight installation.
Firstly, enable ZIP as an extension in your TYPOlight settings in the back-end, so the file manager will allow ZIP files to be uploaded.
1 You need to enable ZIP files in your TYPOlight settings for uploads, otherwise your back-end users cannot upload zip files, e.g. for Image galleries of large quantities like 50 or more files.
Look for your ZIP file in the File Manager Tree View, then click on the Unzip icon Image(iconrar.gif) to unzip your archive. Only archives (.zip) files will have this extra icon.
Once you click the button, a new screen will all you to select a specific file or all files in the zip file. You will receive a confirmation that your files were extracted. Then you can click to go back to the File Manager list, where you will see the files extracted.
Der Vortrag richtete sich vor allem an TYPOlight-Webagenturen die sich bisher mit dem Thema der Barrierefreiheit kaum beschäftigt haben. Anhand konkreter Beispiele werden einfache Schritte zu einer barrierefreien Internetseite gezeigt.
In Kürze werden detailliertere Beispiele zur weiteren Verbesserung der Barrierefreiheit veröffentlicht, die über diesen Vortrag hinausgehen bzw. die genannten Ansätze klarer vorstellen.
Download der Folie als PDF [132 KB]
Here is a summary of the workshops held at the second TYPOlight user meeting in Frankfurt, May 2009.
by Leo Feyer (Friday, 10:45 - 12:45)
by Thomas Weitzel and Thomas Kuhn (Friday, 14:00 - 15:00)
by Harry Boldt (Friday, 15:00 - 16:00)
by Christian de la Haye (Saturday, 08:30 - 10:30)
by Leo Feyer (Saturday, 10:45 - 11:45)
by Nina Gerling (Saturday, 11:45 - 12:45)
by fruitMEDIA (Saturday, 14:00 - 15:30)
The presentation was about how to extend the existing TYPOlight CSS framework so it becomes an alternative to external frameworks like YAML. Detailed information and downloads will be available soon on the main project website.
attachment:Das-TYPOlight-CSS-Framework.pdf (Foliensatz deutsch)
attachment:The-TYPOlight-CSS-framework.pdf (English slides)
http://www.typolight.org/download.html#css
--- Leo Feyer, 2009-05-24 16:08
Anhand von 6 Anwendungsbeispielen zeigt der Workshop die flexiblen Einsatzmöglichkeiten der Erweiterung EFG.
Dazu finden Sie eine für den Workshop erstellte Website unter: http://www.tl-usertreffen.weitzeldesign.com
The presentation was about the undocumented parts of the PHP framework that TYPOlight is built on. The information will most likely be added to the online documentation as well as the next edition of the TYPOlight book.
attachment:Inside-TYPOlight.pdf (Foliensatz deutsch)
attachment:Inside-TYPOlight-en.pdf (English slides)
Thanks a lot to Clemens Hackl for proofreading.
--- Leo Feyer, 2009-05-24 16:18
Ziel war es, dem Einsteiger einen Leitfaden an die Hand zu geben, mit dem er strukturiert ein eigenes TL-Modul entwickeln kann. Das Ganze findet - nach einem Theorieblock - am Beispiel eines konkreten Moduls für den FlowPlayer statt, wobei man die Erläuterungen so mit dem konkreten Quelltext vergleichen kann.
Der Workshop beinhaltet einen Satz Folien im Open-Office-Format mit zwei kleinen Videos. Wer mit dem OO-Format nichts anfangen kann, nutzt die PDF-Version, wobei dort natürlich die Videos nicht integriert sind.
Folien [OpenOffice]
Video Modul-Generator
Video Frontend-Modul
Folien [PDF]
Beim Thema TYPOlight-Schulungen ging es darum, welche Arten von Schulungen man anbieten kann und woran man denken sollte, wenn man Schulungen durchführen möchte. Der Beitrag richtete sich an diejenigen, die TYPOlight-Schulungen bereits anbieten oder dies beabsichtigen.
Zum besseren Verständnis habe ich die Folien nachträglich noch um ein paar Texte, die nur auf der "Tonspur" standen, erweitert. Außerdem habe ich noch ein zehntes Beispiel in der Rubrik "Tu's und Lass's" hinzugefügt. Natürlich ließe sich die Liste noch gehörig erweitern.
Ausschreibung auf meiner Webseite
Download der Folien als PDF
Folien als Film
Basierend auf dem TYPOlight Open Source CMS hat die Internetagentur fruitMEDIA eine webShop-Lösung geschaffen, die sich hundertprozentig im CMS integriert.
Die bei vielen anderen Shoplösungen anfallende doppelte Pflege von z.B. Zugangsdaten für das CMS und den Shop entfällt ebenso, wie die Programmierung von zwei Systemen mit zwei Layouts und vielem mehr.
Agenturen und Anwender, die bereits Erfahrung mit TYPOlight gesammelt haben, werden mit den beiden webShop Editionen schnell zurecht kommen. Sämtliche Strukturen, Module und Inhaltselemente sind analog zu TYPOlight entwickelt und umgesetzt worden.
Der TYPOlight webShop wird in einer kostenfreien Community Edition sowie in einer kostenpflichtigen Business Edition angeboten.
PPT-Präsentation
Infoseite
Demo-Shop
Ever been to a website and seen that the copyright at the bottom is a year or more out of date? It's a little detail that often gets overlooked after the initial creation of a website. Ensure that this never happens to you again by utilizing TYPOlight's powerful built in tags.
This tip uses TYPOlight's built-in tags. Find out more about them here: http://www.typolight.org/insert-tags.html
Insert this code wherever your copyright is:
©{{date::Y}} - Your Company Name
The output will be the copyright symbol followed by the current year. That's it! You're done. You never have to think about your copyright date again. It will always be the current year.
If your website's existence spans more than a year, you might want to put the starting year before the TYPOlight insert tag:
© 2007–{{date::Y}} - Your Company Name
--- Tutorial created by Logan
No one likes to fill out online forms. Help your members by automatically filling out forms for them. How? By utilizing TYPOlight's powerful built in tags, of course.
This tip uses TYPOlight's built-in tags. Find out more about them here: http://www.typolight.org/insert-tags.html
You can use this trick on any form you want. For this example we will create a contact form. Create your form by adding the fields you wish the user to fill out. For this example we will make six fields:
Give each form your desired field name. It's usually good to give them a field name that is similar to their field label. E.g. the field that you want people to put their first names in, should have the field name "first_name" and a field label "First name". This makes it easier to organize and recognize each field.
Once you have created each field and given them each an appropriate field name and label, save the form.
TYPOlight has built in "insert tags" that will automatically be replaced by certain information. In this case we are going to use the {{user::property}} tags.
Go to your form that you have created, and click to edit the "First name" field. Once editing the field, scroll down to the option "Field value" and in the blank field insert this tag: {{user::firstname}}. This will automatically populate the field with the member or user's first name.
Do this for all the applicable fields:
| Field | Insert tag |
| First name | {{user::firstname}} |
| Last name | {{user::lastname}} |
| Company | {{user::company}} |
| {{user::email}} |
The {{user::property}} insert tags only work if the user has provided that information through the registration module or the [EnglishModules#ModulePersonalData personal data module], and the user or member is logged in. If the user is not logged in, the text fields will simply be blank.
Now when a member is logged in, the contact form will already have their first and last names, their company, and their email address filled in. The only thing left for them to fill in is their message and the security question.
Just one more way TYPOlight helps you give people the best experience on your website.
--- Tutorial created by Logan
Mit dem Inhaltselement "Galerie" lassen sich einfach und effektiv Bildergalerien erstellen. Durch den kreativen Einsatz der Einstellungen und der CSS-Definitionen lassen sich mehrere Galerien platzsparend auf einer Seite unterbringen. Zuerst wird in der Seitenstruktur der Seite, die später die Bildergalerien beinhaltet, die CSS-Klasse vergeben, hier: "portfolio".
Diese Seite wird dann mit der CSS-Definition "body.portfolio" angesprochen. Dadurch lässt sich mit den CSS-Definitionen exakt diese Seite ansprechen und die Einstellungen wirken sich nur auf diese Seite aus; andere Bildergalerien, die möglicherweise noch verwendet werden, bleiben dadurch unabhängig in ihrer Darstellung. Im nächsten Schritt wird das Inhaltselement "Galerie" im Artikel "Portfolio" eingefügt.
Als erstes wird der Ordner ausgewählt, der die Bilder für die Galerie beinhaltet. Dann wird die Breite und Höhe für die Bilder angegeben; im Beispiel eine Breite von 400 Pixel und eine Höhe von 300 Pixel. Für den Bildabstand wird für oben, rechts, unten und links kein Abstand vergeben: 0 Pixel. Die Anzahl der Vorschaubilder wird auf 1 gesetzt. Dann wird noch die Option "Großansicht" aktiviert, um ein Blättern der Galeriebilder zu ermöglichen.
Das Inhaltselement ".ce_gallery" wird als "Container" für alle Bilder verwendet.
/* Definition Inhaltselement Galerie */
body.portfolio #main .ce_gallery
{
margin:0;
padding:0;
width:402px;
height:302px;
overflow:hidden;
}
/* Definition Bild innerhalb Inhaltselement Galerie */
body.portfolio #main .ce_gallery .image_container
{
margin:0;
padding:0;
border:1px solid #666;
}
Mit "body.portfolio .ce_gallery" wird nur auf der Seite "Portfolio" (body.portfolio) das Inhaltselement "Galerie" (.ce_gallery) in der Hauptspalte (#main) angesprochen. Mit der Eigenschaft "overflow:hidden;" werden die Scrollbalken im Internet Explorer 6 abgeschaltet. Für das Bild wird noch ein Rand von einem Pixel Breite definiert. Durch das Setzen des Randes muss noch die Breite des Inhaltselements "Bildgalerie (.ce_gallery) angepasst werden: Da der Rand umlaufend ist, wird die Breite auf: 400 Pixel + 1 Pixel linker Rand + 1 Pixel rechter Rand = 402 Pixel gesetzt. Entsprechend die Höhe: 300 Pixel + 1 Pixel oberer Rand + 1 Pixel unterer Rand = 302 Pixel.
Wird die Größe des Randes anders eingestellt sind die Werte entsprechend anzupassen!
Durch die Definition der Breite und der Höhe für das Inhaltselement "Galerie" wird erreicht, dass nur ein Bild aus der Bildergalerie angezeigt wird. Die weiteren Bilder werden durch diese Definition "ausgeblendet".
Wenn nun auf das Bild geklickt wird, wird die Großansicht aktiv und das erste Bild der Bildergalerie angezeigt. Nun lässt sich durch die Bildergalerie blättern.
!Bildergalerie_Grossansicht.jpg
So können platzsparend Bildergalerien eingesetzt werden, z.B. auch in einer linken oder rechten Spalte.
Auch mehrere Inhaltselemente "Galerie" lassen sich so einsetzen. Es werden weitere Inhaltselemente "Galerie" in den Artikel eingesetzt. Für jede Bildgalerie werden dann unterschiedliche Quellordner ausgewählt - alle weiteren Einstellung im Inhaltselement "Galerie" bleiben unverändert. Zunächst werden nun alle weiteren Bildergalerien untereinander im Frontend angezeigt. Wenn gewünscht ist z. B. zwei Galerien nebeneinander darzustellen, dann wird die CSS-Definition für das Inhaltselement "Galerie" (.ce_gallery) abgeändert:
body.portfolio #main .ce_gallery
{
margin:5px;
padding:0;
float:left;
width:402px;
height:302px;
overflow:hidden;
}
Ein äußerer Rand (margin:5px;) wurde gesetzt, um einen Abstand zwischen den einzelnen Bildergalerien zu erreichen. Mit der Eigenschaft "float:left;" wird nun die zweite Bildergalerie rechts neben die erste Bildergalerie geschoben. Folgen nun weitere Galerien werden diese wieder unterhalb von links nach rechts platziert.
Wichtig: Die Breite der Hauptspalte ist immer breiter als zwei Bildergalerien breit sind.
Definitionen eines Inhaltselements "Galerie": Breite: 402 Pixel, Höhe: 302 Pixel. Daraus ergibt sich:
Ist die Breite der Hauptspalte geringer als die benötigte Breite der Bildergalerien, werden die einzelnen Galerien untereinander angezeigt.
--- Tutoral erstellt von planepix, 11.06.2009, Bilder von planepix.de (urheberrechtlich geschützt)
The Catalog and Catalog Extension modules are advanced modules and will require intermediate knowledge of PHP, HTML/CSS in order to create catalog that displays the way you really need it. To create advanced displays, you will need to understand PHP array structures provided in the TPL files.
This is not a module for beginners.
This tutorial is intended to assist beginners with the complex setup of the Catalog Module after many user requests for assistance. After completing part 1 of this tutorial you will have a very basic catalog setup using only the default templates. After part 2 (using PHP programming) you will also have a basic understanding of how to customize the default templates to suit your own layout needs.
First ensure that you have installed and configured the catalog module (catalog and catalog_ext) using the installation and set-up guides found below:
For this entire tutorial, we will be using the Games Catalog as created in the installation and set-up guides. You will only need to set-up 2 basic pages and 2 modules. Once you're comfortable you can then add the Catalog Filter, but this is not needed initially.
Below is a typical unformatted layout of our item in Catalog List view.
Now the basic testing is done and your catalog is fully operational. Let's move onto customizing the template a bit more.
Now let's move on to looking at the data array structure. This is where things get a bit more complex. You will need PHP skills to proceed beyond this point: understanding of Arrays() and the usage of foreach(), if() and other conditional and loop functions.
Even though the the output above looks like we can format it with only CSS, you will most likely fall short of your expectations. Therefore we need to understand the basic structure of the $this->entries array inside the catalog_xxx.tpl template set.
To see the array structure you can add the following line in the catalog_simple.tpl template (add this to the 2nd line, after the first if)
1 <?php print_r($this->entries); ?>If we then refresh the catalog list page, we'll see lots of additional code printed. We can inspect this by looking at the page source (view source). As you can see, its really complex and has a lot of information.
1 Array
2 (
3 r0 => Array
4 (
5 [id] => 1
6 [catalog_name] => Games Catalog
7 [parentJumpTo] => 29
8 [tablename] => tl_catalog_games
9 [class] => first even
10 [link] => <a href="catalog-reader/items/assassins-creed.html" title="View the item details">
11 View the item details</a>
12 [url] => catalog-reader/items/assassins-creed.html
13 [data] => Array
14 (
15 [image] => Array
16 (
17 [label] => Image
18 [type] => file
19 [raw] => tl_files/games/AssassinsCreed_PS3_CvrShtboxart_160w.jpg
20 [value] => <span class="image first even"><a rel="lightbox[lbcataloglist0]"
21 href="tl_files/games/AssassinsCreed_PS3_CvrShtboxart_160w.jpg"
22 title="AssassinsCreed PS3 CvrShtboxart 160w"><img
23 src="system/html/5b37c8c1e6c8e29a5f4d16ab71fb72a7.jpg"
24 alt="AssassinsCreed PS3 CvrShtboxart 160w" width="80" height="93" /></a></span>
25 [files] => Array
26 (
27 r0 => tl_files/games/AssassinsCreed_PS3_CvrShtboxart_160w.jpg
28 )
29
30 [meta] => Array
31 (
32 r0 => Array
33 (
34 [src] => system/html/5b37c8c1e6c8e29a5f4d16ab71fb72a7.jpg
35 [alt] => AssassinsCreed PS3 CvrShtboxart 160w
36 [lb] => lbcataloglist0
37 [w] => 80
38 [h] => 93
39 [wh] => width="80" height="93"
40 )
41 )
42 )
43
44 [title] => Array
45 (
46 [label] => Title
47 [type] => text
48 [raw] => Assassin's Creed
49 [value] => Assassin's Creed
50 )
51
52 [genre] => Array
53 (
54 [label] => Genre
55 [type] => select
56 [raw] => 10
57 [value] => Action Adventure
58 [ref] => Array
59 (
60 r0 => Array
61 (
62 [id] => 10
63 [pid] => 2
64 [tstamp] => 1223981144
65 [sorting] => 128
66 [type] => a:2:{i:0;s:1:"3";i:1;s:1:"4";}
67 [alias] => action
68 [name] => Action Adventure
69 [parentJumpTo] => 30
70 [parentLink] => <a href="game-genres/items/action.html"
71 title="View the item details">View the item details</a>
72 [parentUrl] => game-genres/items/action.html
73 )
74 )
75 )
76 )
77 )
78
79 ...
80
81 r1 => Array
82 (
83
84 ...
85
86 )
87 ...
88
89 )As you can see, this is quite a bit of information -- and I've only copied the first 3 data items called image, title and genre. The ellipses (...) show where I've cut information out.
Let's look at the overall structure to understand what is going on here. All the entries are indexed into a counter [0], [1], [2] -- this you can use for various purposes. If there are no entries, the array will be empty, hence the IF check in the beginning, with an "error" message to show that the list is empty (at the bottom of the template).
Inside each entry we find:
The data array above is sub-divided into the fields you've selected as visibile in your Catalog List/Reader modules. Let's look at the first 3 entries, which should give you a basic understanding of what's going on inside each field and its parameters.
The reason this is so detailed is so that you are entirely able to build your own output without having to rely on any processing inside the module. This makes this a really powerful tool to build your own HTML/CSS tags and classes to create an entirely custom template output.
Each field always contains the following generic 4 parameters:
Other field types like: file, select and tags will contain additional information. Let's look at these now.
In addition to the above standard fields, a file field will also contain the following additional parameters:
r0 .. [xxx] with all the filenames selected in this field (1 or many)If this field is a file field (not image), the meta array will contain the following parameters:
If this field is an image field, the meta array will will contain the following parameters:
If the remote/referenced table used in your select/tags field is another defined Catalog, the array additionally contains the following parameters:
Its therefore possible to completely replace the default templates with custom PHP written templates using the basic existing foreach() loop to traverse each entry in the $this->entries array.
In this section, I'll provide you with an example that will ONLY display the values for the image, title and genre fields. Normally you won't need the label, but you can then simply add the $entry['data']['xxxx']['label'] value for that field in another html tag.
You're now ready to construct any template you wish.
1 <?php if (count($this->entries)): ?>
2
3 <div class="layout_simple">
4
5 <?php foreach ($this->entries as $entry): ?>
6 <div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : _; ?>">
7
8 <div class="image"><?php echo $entry['data']['image']['value']; ?></div>
9 <div class="title"><?php echo $entry['data']['title']['value']; ?></div>
10 <div class="genre"><?php echo $entry['data']['genre']['value']; ?></div>
11
12 <?php if ($entry['link']): ?>
13 <div class="link"><?php echo $entry['link']; ?></div>
14 <?php endif; ?>
15 </div>
16
17 <?php endforeach; ?>
18 </div>
19
20 <?php else: ?>
21
22 <?php if ($this->condition): ?>
23 <div class="condition"><?php echo $this->condition; ?></div>
24 <?php else: ?>
25 <p class="info">There are no entries matching your search.</p>
26 <?php endif; ?>
27
28 <?php endif; ?>The code below is an extract from the catalog_simpletable.tpl file and illustrates how to only modify the template to have your TITLE field (called "*title*") wrapped in the link to the Catalog Reader.
1 ...
2
3 <tbody class="body<?php echo $entry['class'] ? ' '.$entry['class'] : _; ?>">
4 <?php foreach ($this->entries as $entry): ?>
5 <tr class="item<?php echo $entry['class'] ? ' '.$entry['class'] : _; ?>">
6 <?php foreach ($entry['data'] as $field=>$data): ?>
7 <?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
8 <td class="field <?php echo $field; ?>"><?php if (strlen($data['value'])): ?>
9 <?php if ($entry['url'] && $field == 'title'): ?><a href="<?php echo $entry['url']; ?>"><?php endif; ?>
10 <?php echo $data['value']; ?>
11 <?php if ($entry['url'] && $field == 'title'): ?></a><?php endif; ?>
12 <?php endif; ?>
13 </td>
14 <?php endif; ?>
15 <?php endforeach; ?>
16 </tr>
17 <?php endforeach; ?>
18 </tbody>
19
20 ...The part that builds the link around the Value is:
IMPORTANT: Remember that in this example the field is called "*title*", you have to modify the template so that it changes matches the fieldname you entered into your catalog.
1 ...
2
3 <?php if ($entry['url'] && $field == 'title'): ?><a href="<?php echo $entry['url']; ?>"><?php endif; ?>
4 <?php echo $data['value']; ?>
5 <?php if ($entry['url'] && $field == 'title'): ?></a><?php endif; ?>
6
7 ...To illustrate the feature of the Catalog List Module's conditional feature, take a look at sample template Part 3. We are interested in the last section.
1 <?php if ($this->condition): ?>
2 <div class="condition"><?php echo $this->condition; ?></div>
3 <?php else: ?>
4 <p class="info">There are no entries matching your search.</p>
5 <?php endif; ?>This checks if the condition variable has been set (which is a string requesting you to select the outstanding filters first). Also if its set, you can also access the $this->catalog_condition variable which provides an key-indexed array of all the conditional variables. You can then use this to provide alternative content, like instructions, when the user has not yet provided all the conditions.
In the sample below, we will look at how to do this in more detail.
1 <?php if ($this->condition): ?>
2 <div class="condition">
3 {{insert_content::194}}
4 <?php if (count($this->catalog_condition)>1): ?>
5 {{insert_content::205}}
6 <?php else: ?>
7 {{insert_content::206}}
8 <?php endif; ?>
9 </div>
10 <?php endif; ?>Below, I'll explain the above code in a little more detail:
From build version 0.8.6 Build 48 (catalog_ex), this feature was moved from the original location of the mod_cataloglist.tpl template to a more useful location inside the detail template, e.g. catalog_simple.tpl, catalog_simpletable.tpl.
I hope that this Tutorial will help you set-up your own catalog as successfully as I've done it for my clients.
--- Tutorial created by thyon
The Catalog module is a little TYPOlight extension which enables you to create various catalogs of items, like books, cds, dvds, electrical appliances, houses, coins etc. etc.
By using catalog listing module based on TYPOlight's own listing module, it is very easy to display your items in frontend. You can also provide link to details page, where you can display item in greater detail. Thanks to TYPOlight's built-in templating system, you may configure page appearance to your liking.
The only drawback is that details page does not use friendly urls. But thanks to TYPOloght's flexibility, we may work around the problem and change default listing detail page url from dvds.html?id=3 to dvds/Pirates-of-the-Caribbean.html - much more user and search engine friendly.
I assume you are using TYPOlight 2.5 and Catalog 0.2.0.
You also need to set up dvd catalog. I hope you are already familiar with the task, so I'll skip it here. If you need help, consult catalog module documentation.
Make sure you have accomplished these steps before you read further:
dvds - it is important that page alias matches table name - we will use that later.dvds.html page. Configure it so that it displays some fields from cat_dvds and you can access details page by clicking blue circle with white i.The next step is to add alias field to your dvd catalog. So create a new text field with column name alias and make it mandatory and unique. You may optionally check the Search checkbox, so that we are able to search by alias in TYPOlight's backend. Then fill aliases for your dvds. Note: when filling aliases for dvds, don't add .html extension, it will be added automatically. We now have our catalog ready for friendly urls.
Open your dvd catalog listing module in backend and alias column to Fields. If you now open dvds.html in frontend, you will see it among other data. Of course we need to remove that column from the table. We do this by changing module template.
First copy file system/modules/listing/templates/list_default.tpl to templates/list_seo.tpl
Now open the file in your favourite editor and look up this section
1 <table cellpadding="0" cellspacing="0" class="all_records" summary="">
2 <thead>
3 <tr><?php foreach ($this->thead as $col): ?>
4 <th class="head<?php echo $col['class']; ?>"><a href="<?php echo $col['href']; ?>" title="<?php echo $col['title']; ?>"><?php echo $col['link']; ?></a></th><?php endforeach; if ($this->details): ?>
5 <th class="head col_last"> </th><?php endif; ?>
6 </tr>
7 </thead>
8 <tbody><?php foreach ($this->tbody as $class=>$row): ?>
9 <tr class="<?php echo $class; ?>"><?php foreach ($row as $col): ?>
10 <td class="body <?php echo $col['class']; ?>"><?php echo $col['content']; ?></td><?php endforeach; if ($this->details): ?>
11 <td class="body <?php echo $this->col_last; ?> col_last"><a href="<?php echo $this->url; ?>?id=<?php echo $col['id']; ?>"><img src="system/modules/listing/html/details.gif" alt="" /></a></td><?php endif; ?>
12 </tr><?php endforeach; ?>
13 </tbody>
14 </table>You need to change it so that the alias column would not be displayed, so change the section to this:
1 <table cellpadding="0" cellspacing="0" class="all_records" summary="">
2 <thead>
3 <tr><?php foreach ($this->thead as $k=>$col): if ($k != 'alias'): ?>
4 <th class="head<?php echo $col['class']; ?>"><a href="<?php echo $col['href']; ?>" title="<?php echo $col['title']; ?>"><?php echo $col['link']; ?></a></th><?php endif; endforeach; if ($this->details): ?>
5 <th class="head col_last"> </th><?php endif; ?>
6 </tr>
7 </thead>
8 <tbody><?php foreach ($this->tbody as $class=>$row): ?>
9 <tr class="<?php echo $class; ?>"><?php foreach ($row as $k=>$col): if ($k != 'alias'): ?>
10 <td class="body <?php echo $col['class']; ?>"><?php echo $col['content']; ?></td><?php endif; endforeach; if ($this->details): ?>
11 <td class="body <?php echo $this->col_last; ?> col_last"><a href="<?php echo $this->url; ?>?id=<?php echo $col['id']; ?>"><img src="system/modules/listing/html/details.gif" alt="" /></a></td><?php endif; ?>
12 </tr><?php endforeach; ?>
13 </tbody>
14 </table>Now in backend change List layout from list_default to list_seo. Reload dvds.html to see that alias column has disappeared.
To finish template editing, we need to generate friendly url by replacing this part:
1 <a href="<?php echo $this->url; ?>?id=<?php echo $col['id']; ?>">The correct code is this
1 <a href="<?php echo ($row['alias']['raw'] ? (str_replace(URL_SUFFIX, @, $this->url).'/'.$row['alias']['raw'].URL_SUFFIX) : ($this->url.'?id='.$col['id'])); ?>">Now all links are correctly using our alias field, but when you click on it, nothing happens. This is because we need to do one more thing - intercept the request and translate it so that catalog listing module can understand what we are asking for.
To do this, we need to create new module, I will call it SEO. Create these two files:
system/modules/seo/config/config.php1 <?php if (!defined('TL_ROOT')) die('You can not access this file directly!');
2 $GLOBALS['FE_MOD']['application']['catalogListing'] = 'SeoModuleCatalogListing';
3 ?>system/modules/seo/SeoModuleCatalogListing.php 1 <?php if (!defined('TL_ROOT')) die('You can not access this file directly!');
2
3 class SeoModuleCatalogListing extends ModuleCatalogListing
4 {
5 /* The list of allowed pages. Unless page alias is not in this list,
6 we won't query database for id. This is very important, because page
7 alias is used to construct table name, so this actually limits
8 what tables can be used to search for alias in. It is a security check
9 which prevents visitors to query tables we don't want. */
10 protected $allowedPages = array('dvds');
11
12 /* Generate details page. This method actually transforms alias to id and
13 then calles ModuleCatalogListing to display details. */
14 public function generate()
15 {
16 // This gets page alias, e.g. for dvds.html it is dvds
17 $pageId = $this->getPageIdFromUrl();
18 // Only search by dvd alias if we are in frontend and page alias is ok.
19 if (TL_MODE == 'FE' && in_array($pageId, $this->allowedPages))
20 {
21 $matches;
22 /* Check if current url matches dvds/whatever.html - in this case,
23 we extract 'whatewer', e.g. for url dvds/Pirates-of-the-Caribbean.html
24 the extracted alias would be Pirates-of-the-Caribbean */
25 $pattern = '/'.preg_quote($pageId, '/').'\/([^\/]+)'.preg_quote(URL_SUFFIX, '/').'$/i';
26 if (preg_match($pattern, $this->Environment->request, $matches))
27 {
28 $alias = $matchesr1;
29 /* If we have dvd alias, look into cat_dvds table if there is
30 such alias */
31 $tableName = 'cat_'.$pageId;
32 $objRow = $this->Database->prepare("SELECT id FROM $tableName WHERE alias=?")
33 1.>limit(1)
34 1.>execute($alias);
35
36 if ($objRow->numRows == 1)
37 {
38 /* If we were able to find such dvd, use it's id to tell
39 catalog listing module what item to display. */
40 $_GET['id'] = $objRow->id;
41 }
42 else
43 {
44 // If such alias does not exist, simply show 404 page
45 $this->handle404Error($pageId.'/'.$alias.URL_SUFFIX);
46 }
47 }
48 }
49
50 /* Whatever we did, call catalog listing module genrate() method
51 to display module on page. If we succeeded to get correct id,
52 item's details will be displayed. */
53 return parent::generate();
54 }
55 }
56
57 ?>These two files do interesting thing in background. They replace CatalogModuleListing by SeoCatalogModuleListing without you knowing. Because SeoCatalogModuleListing extends CatalogModuleListing, it behaves almost exactly the same, so you may not even be aware that something has changed. This is very powerfull feature of TYPOlight, because you can modify the behaviour of standard TYPOlight modules.
The only difference between CatalogModuleListing and SeoCatalogModuleListing is that SeoCatalogModuleListing tries to load id of an item according to it's alias. Once the id is known, it uses CatalogModuleListing::generate() method as if id was included in url.
You may download files here
--- Tutorial created by scare
This tutoial only applies to the CatalogExt extension build 49 and up. The documentation below only explains how to configure the CatalogExt Front-End modules for display in a website with multiple languages (see reference links below).
This tutorial assumes you have setup a page structure consisting of at least two page roots, each for a different language version of the website. It is also assumed you setup a catalog in one of the languages. This language is called the "main language" from now on. Though the principal of this tutorial can be applied to as many different language versions as needed in one website, it is explained assuming a setup with just two languages. The second language is called the "second language" from now on.
All fields that are displayed in the main language will need to be translated. Each field that needs translating needs to be added manually. Below is a catalog with three fields and an image, all fields are fields in the main language:
GAMES CATALOG Title (text, main language) Price (text, main language) Description (longtext, main language) Screenshots (files)
After adding a new field for each existing field in the main language that needs translating we end up with the following:
GAMES CATALOG Title (text, main language) Price (text, main language) Description (longtext, main language) Screenshots (files) Titel (text, second language) Prijs (text, second language) Omschrijving (longtext, second language)
The fields titel, prijs and omschrijving where added. In this example the second language is Dutch and the new fields are the Dutch equivalents of title, price and description.
Once you've added the fields for the second language then the changes to the catalog are complete.
The modules from both the Catalog and CatalogExt extension allow you to choose which fields are visible in the front end. This way we can make sure that the fields from the second language do not show up in the main language. By default the fields are not selected and therefor not visible.
In the same way that the new fields have been created it is required to add new modules as well. Each frontend catalog module that displays fields containing text in the main language (title, price or description in this case), needs to be duplicated. The difference between the original and the duplicate module is only in the fields that are displayed. For example the visible fields in the main language module are:
Visible fields: [X] Title (text, main language) [X] Price (text, main language) [X] Description (longtext, main language) [X] Screenshots (files) [ ] Titel (text, second language) [ ] Prijs (text, second language) [ ] Omschrijving (longtext, second language)
The duplicate module is for the second language and therefor needs to display only the fields needed in the second language, like this:
Visible fields: [ ] Title (text, main language) [ ] Price (text, main language) [ ] Description (longtext, main language) [X] Screenshots (files) [X] Titel (text, second language) [X] Prijs (text, second language) [X] Omschrijving (longtext, second language)
Suppose these are the visible fields for a "Catalog Reader" module, then this means that the original (main language) will display English text and that if the duplicate module is displayed it will show only Dutch (second language) text.
When all of the catalog modules have been duplicated then the duplicates can be used in the second language articles. They should replace the original version of themselves
Up until build 49 there was only one jumpTo page per catalog. This meant that whether you are in the catalog listing of the main language or in the listing of the second language, all of the links will point to the same page in which there can be only a reader for one language. Since build 49 it is possible to override the catalog jumpTo setting from every module.
For every catalog module in the second language (except catalog reader) the jumpTo setting needs to be changed into the page that contains you second language reader. By default it would have jumped back to the main language.
--- Tutorial created by scare
This tutorial briefly goes through a checklist when installing TYPOlight on a hosting environment. It only goes through the important steps, as it assumes you know how to complete forms and you have all your information handy.
This tutorial assumes you're installing TYPOlight in the root of your website. Please make adjustments for other folder locations.
It is highly recommended to use the Safe Mode Hack (FTP Hack) instead of making folders writeable (CHMOD 777) for everyone!
These instructions include removal of the example website. Always remove this for a client production site.
Delete the following files/folders:
/templates/example_website.sql/tl_files/music_academy/Change the following files/folders to have 777 WRITE permissions:
/ (TL root folder only) so you have access to create CSS and RSS files in root of site/print.css, /basic.css, /news.xml/tl_files/ folder recursively (otherwise you can't create folders with File Manager)/system/config/localconfig.php (for installation to change settings in this file)/system/tmp/ folder recursively (for cache files)/system/log/ folder recursively (for log files like error.log, email.log, etc.)Run the install script /typolight/install.php:
/encrypt.txt file (600 permissions), and insert auto-generated encryption key (safekeeping)Its always best to configue TYPOlight to use mod_rewrite. If your hosting provider supports this, continue, otherwise skip this section, and leave Enable Rewrite URLs off in the Back-end settings (next-step).
Change .htaccess files
In case your version doesn't include the default mod_rewrite lines, you can recreate them as follows:
/templates/.htaccess copy to /.htaccess and edit contents to:RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .*\.html$ index.php [L]
Should you wish to create your own page TPL templates, and you wish to group your design files together in a folder, I usually call the folder a name similar to the TPL file for the site design, e.g. fe_company.tpl and folder is fe_company to contain the CSS and Images required for the layout, e.g. css/style.css, images/menu.jpg, etc.
To prevent the browser from being denied access to files within this folder, you need to remove the .htaccess control of the /template folder.
/templates/.htaccess copy to /templates/fe_company (example) and edit contents to:order allow,deny allow from all Options All -Indexes
The last line, will prevent directory browsing of your folder that's now visible to the browser.
I prefer to have my design in a single folder, rather than in 3 different locations: CSS in / root, TPL in /templates and images in /tl_files. I use these custom CSS folders to group my design. Therefore I don't use TYPOlight's built-in CSS and TPL template editor and store their images in /tl_files.
Run Back-end: http://www.yoursite.com/typolight/ (example only) and configure the site using the following Modules in the left navigation tree.
Settings
Templates
fe_page.tpl => fe_company.tpl (or copy using FTP)fe_company.tpl filePage Layout
fe_company.tplSite Structure
The end-result should be something like this:
I've found its best to create this Site Root under the website CMS tree, as it allows you to easily add new domains later and it also provides a parent point to use for page mounts and permissions. So, even if you're only installing it on 1 site, its always a good idea to create this double-tree naming.
--- Tutorial created by thyon design
I thought it might be helpful to take notes while I create a new page layout, set up the page structure, create articles and add content. We'll assume this is starting with a fresh installation, but without importing the example website. The page layout we are going to create will be very simple visually and will have a header, a horizontal navigation bar, a one-column body area and a footer. After taking the steps to create a new Page layout, we will create the basic Site structure and add some content to the pages.
Watch this tutorial as a narrated screencast
Add module from the top navigation Add module from the top navigation Add module from the top navigation
CSS import from the top navigationleave all fields with the default settings unless instructed otherwise
New layout from the top navigation
icon to add a new row icon to add a new row icon to add a new rowleave all fields with the default settings unless instructed otherwise
New page from the top navigation
icon for the 'TYPOlight webCMS' row icon where you want to add a new page'leave all fields with the default settings unless instructed otherwise
New article from the top navigation icon for the page you wish to add an article
icon to add a new Content element
Front end preview from the very top navigation near the upper-rightAfter following this tutorial, you should end up with something like this, minus the excited puppy.
--- Tutorial and screencast created by Ben
Creating a new language package is a lot of work and your efforts will be greatly appreciated. Of course, you will be mentioned as the author. We are using an online language editor that allows individuals and teams to create and maintain language packs. The system and more information can be found here:
If you want to create a new language pack, please send me an e-mail including the following information and don't forget to tell me, which language you are going to add ;-)
If you want to join an existing team, please contact those guys first and let them know that you are willing to help. If you have completed some files already, please send them via e-mail so I can import them into the database.
You can use the TYPOlight development extension to find out whether your translation is up to date. Open the missing labels module and select the language you want to check.
--- Tutorial created by Leo and Ben
This tutorial is in the form of a screencast which is narrated in English. It shows the following tasks and functionalities in TYPOlight:
Watch this tutorial as a narrated screencast
--- Tutorial and screencast created by Ben
This tutorial details a simple method to track down exactly which code in a cascading style sheet (css) is creating display issues in the front-end of a TYPOlight website. While these instructions may seem very obvious to some, my hope is that some users will find this technique helpful. The majority of the steps are not specific to TYPOlight, although a few critical steps in regard to the handling of css data and how it is stored are specific to TYPOlight.
While this tutorial does not actually help in what changes to make in TYPOlight css files, it does help one find the problem quicker and apply the changes properly within the system.
This step involves the discovery of which css file contains the code that is causing display issues.
This step involves the discovery of which id or class contains the code that is causing the display issues.
(* While guess and check may not be the most professional method for determining problem code, it is certainly the most stress-free method in this situation.)
This step involves making changes to the css class or id in the proper manner through the TYPOlight Style sheet editor. Steps 1 and 2 of this tutorial are non-specific to TYPOlight, although this step is. As a brief explanation, TYPOlight stores all css data in the database. Whenever changes are made to a style sheet, the system writes the changes to the database and overwrites the existing css file in the root of the installation. Therefore, step 3 is necessary to ensure that both the database and css files are properly updated.
--- Tutorial created by Ben
Wer mit Stylesheets im Text arbeiten will, ohne ständig den HTML-Code von TinyMCE aufzurufen, kann sich die gewünschten Stylesheets ganz einfach in den Editor reinbasteln. Wenn ein Stylesheet namens basic.css existiert, wird es automatisch in TinyMCE eingelesen. Die Klassen dieses Stylesheets können dann aus dem Drop-Down Menü ausgewählt werden ohne dass die TinyMCE Konfiguration angepasst werden muss.
Die nachfolgend beschriebenen Änderungen können (müssen aber nicht) bei einem TL-Update verloren gehen, falls z.B. TinyMCE aktualisiert wird. Ggf. also von den Änderungen ein Backup anlegen. Damit auch tl-Einsteiger damit klar kommen, hier eine
Am besten alles (auch den Browser) schließen und neu loslegen. TinyMCE bietet die Styles dann oben im Selektor an. Die werden einfach eingefügt, es findet also keine Prüfung statt, ob der Style wirklich da ist. Daher kann man sich da auch problemlos STyles aus verschiedenen Stylesheets hineinlegen - ist nur eine Eingabehilfe.
Wer im Editor sehen will, wie es formatiert aussieht, kann das ebenfalls leicht einstellen:
/* TYPOlight TinyMCE content CSS file */
body { color:#666966; background:none !important; background-color:#ffffff !important; font-size:12pt;}
content_css : "<?php echo TL_PATH; ?>/tl_files/mein.css,<?php echo TL_PATH; ?>/system/themes/tinymce.css",
Hier wird statt der o.a. basic.css die Vorlage tl_files/mein.css verwendet (bzw. basic.css durch mein.css ersetzt). Weitere Stylesheets können ggf. wieder (s.o.) mit Kommas in die Aufzählung ergänzt werden. * Wichtig: * Den Basispfad nicht vergessen!
--- Tutorial erstellt von Nosi
It is sometimes necessary to add a search form directly to the header or footer of a page layout to allow a user to enter keywords(s) on any page instead of clicking a link to go to the search page. The screencast shows exactly how to implement this tutorial and the instructions below show the general steps involved. The screencast is narrated in English.
--- Tutorial and screencast created by Ben
There have been many requests how to use a custom page template instead of the default fe_page template. Today I am going to show you how to integrate a template from OSWD (open source web design). Once you know how it works, you can also integrate YAML templates or create your own ones.
Watch this tutorial as a narrated screencast
I am going to use the Blue Freedom template to show you how it is done. First of all, please download the template and unpack the archive in your TYPOlight folder. Then, copy file templates/bluefreedom2/index.html to the templates directory and rename it to fe_bluefreedom2.tpl.
You should now have the following files and folders:
Next, we have to customize the template file meaning we have to add some wildcards that will be replaced with the TYPOlight content. We will do this step by step starting with the header.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Blue Freedom by minimalistic-design.net</title>
5 <meta http-equiv="Content-Language" content="English" />
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
8 </head>There are a few things we have to change.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <head>
4 <base href="<?php echo $this->base; ?>"></base>
5 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
7 <link rel="stylesheet" type="text/css" href="bluefreedom2/style.css" media="screen" />
8 </head>Basically, there have been three important changes. First of all, we have added the base tag that is required by TYPOlight.
<base href="<?php echo $this->base; ?>"></base>
Inside the base tag we are using a wildcard that will be replaced by the actual value later. If your PHP configuration supports short tags, you can also write:
<base href="<?=$this->base;?>"></base>
Second of all, we have replaced the original title with a wildcard as well, since we want TYPOlight to show the current Title of the Side and the page title instead of the default title.
<title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
Third of all, we have set the correct path to the CSS file which is now at bluefreedom2/style.css.
If you want to use all TYPOlight functions (e.g. lightbox and table sort) you have to add some more tags which you can basically copy and paste from the default page template fe_page. The complete page head looks like this:
(The copyright of TYPOlight is now not needed anymore, because it will be created by the System.)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <head>
4 <base href="<?php echo $this->base; ?>"></base>
5 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
7 <meta name="description" content="<?php echo $this->description; ?>" />
8 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
9 <?php echo $this->robots; ?>
10 <script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script>
11 <script type="text/javascript" src="plugins/mootools/mootools.js"></script>
12 <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
13 <script type="text/javascript" src="plugins/ufo/ufo.js"></script>
14 <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
15 <link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" />
16 <link rel="stylesheet" type="text/css" href="tl_files/bluefreedom2/style.css" media="screen" />
17 <?php echo $this->head; ?>
18 </head>First of all replace the body Tag with this:
<body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
Now you can give every single Page in TYPOlight an own class, so you can handle diffrent Page-Looks in one Template ore everypage can have an other packground etc.
The next step is to add some wildcards to the body so TYPOlight knows where to put the content. The template uses four layout sections (header, middle, right and footer) which we are going to replace now.
1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5
6 <div class="breadcrumbs">
7 <a href="#">Home</a> · You are here
8 </div>We simply replace this code with
1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5
6 <?php echo $this->header; ?>Following this principle, we then replace
1 <div class="middle">
2
3 <h2>Template dummy text</h2>
4
5 Just to fill out empty space in the template I decided to write this and to add one of my previous templates here. There are direct links to view one of my previous templates live and live link to download it also ;) Anyway hope you like both this one and previous one. You can see all of my templates at
6 <a href="http://www.minimalistic-design.net">Minimalistic design</a> live.
7 <br /><br />
8 <img src="bluefreedom2/images/minimal.jpg" alt="Preview of Minimalistic Template" />
9
10 </div>with
1 <div class="middle">
2 <?php echo $this->main; ?>
3 </div>And last but not least we replace
1 <div class="right">
2
3 <h2>Navigation</h2>
4
5 <ul>
6 <li><a href="http://www.minimalistic-design.net">Minimalistic Design</a></li>
7 <li><a href="http://www.oswd.org">Open Source Web Design</a></li>
8 <li><a href="http://www.opendesigns.org">Open Designs</a></li>
9 <li><a href="http://www.openwebdesign.org">Open Web Design</a></li>
10 <li><a href="http://www.iollo.com">Iollo's review highway</a></li>
11 <li><a href="http://www.historyexplorer.net">History Timelines</a></li>
12 <li><a href="http://www.quakerparrot.info">Quaker Parrot</a></li>
13 <li><a href="http://www.moneybookersclub.com">Moneybookers Club</a></li>
14 </ul>
15
16 </div>with
1 <div class="right">
2 <?php echo $this->right; ?>
3 </div>The complete body now looks like this:
1 <body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
2 <div id="wrap">
3
4 <div id="top"></div>
5
6 <div id="content">
7
8 <div class="header">
9 <h1><a href="#">Blue Freedom</a></h1>
10 <h2>Free xhtml/css Template</h2>
11 </div>
12
13 <?php echo $this->header; ?>
14
15 <div class="middle">
16 <?php echo $this->main; ?>
17 </div>
18
19 <div class="right">
20 <?php echo $this->right; ?>
21 </div>
22
23 <div id="clear"></div>
24
25 </div>
26
27 <div id="bottom"></div>
28
29 </div>
30
31 <div id="footer">
32 Design by <a href="http://www.minimalistic-design.net">Minimalistic Design</a>
33 </div>
34
35 <!-- indexer::stop -->
36 <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
37 <!-- indexer::continue -->
38 <?php echo $this->mootools; ?>
39
40 <?php if ($this->urchinId): ?>
41
42 <script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
43 <script type="text/javascript">
44 <!--//--><![CDATA[//><!--
45 try {
46 var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
47 pageTracker._trackPageview();
48 } catch(err) {}
49 //--><!":http://dev.typolight.org/ticket/405])]>
50 </script>
51
52 <?php endif; ?>
53
54 </body>
55 </html>Now, we have to include the template into TYPOlight. I am going to modify the existing default layout instead of creating a new one. Please log in to the back end and open module page layout. Choose fe_bluefreedom from the Layout Template drop down list. Then, change the layout to a two column layout with the main column on the left side and add three modules:
| Module | Column |
| Breadcrumb navigation | header |
| Articles | main |
| Navigation | right |
The last step is to adjust the style selectors since the blue freedom templates uses slightly different class and id attributes than TYPOlight. Please open the style sheet bluefreedom2/style.css in a text editor.
Replace selector
.breadcrumbs {
with
.mod_breadcrumb {
and replace
.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}
with
.middle h1 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h1 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}
and finally add those two lines:
.mod_navigation .submenu { display:inline; }
.mod_navigation .level_2 { margin-top:-18px; margin-bottom:-9px; }
Now open the front end preview and go to page index.php/academy.html. It should look like this:
I hope that you have enjoyed this tutorial and that it has given you an idea of how to create your own templates. If you have any questions, please post them in the forum.
--- Tutorial and screencast created by Leo
If we simplify things, TYPOlight is basically structured as follows:
| Config File | Config file that specifies the hierarchy of data structure and thereby which datacontainer to load for which view, e.g. tl_mytable e.g. system/modules/_<mymodule>_/config/config.php |
| Data Container Array (DCA) | An array structure that defines to TL's Backend Class, how to display the data obtained from the DataContainer library (see below) to the user. The DCA has parameters to control the config, listing, operations, edit palettes (and sub-palettes), fields and their evaluation and formatting e.g. system/modules/_<mymodule>_/dca/tl_mytable.php |
| Data Container | A library that provides an interface (edit, list, cut, copy, paste, etc.) with a specific type of stored data, e.g. filesystem, database or other custom data e.g. /system/drivers/DC_Table.php |
| Front-end Modules | A set of classes that retrieve data directly from the database and may then load the DCA dynamically to know how to format the data for the front-end to match that of the back-end, although this is optional e.g. system/modules/_<mymodule>_/ModuleMyModule.php |
Its therefore important to understand the difference between the Data Container (e.g. DC_Table.php) and the Data Container Array (DCA, e.g. dca/tl_news.php). This understanding will greatly improve your ability to develop for TYPOlight.
In order to practise your understanding of the config files, the DCA (Data Container Array) and its implementation to create a Back-End Module and Front-End Module, you can follow the Tutorial example of a CD Catalog:
Also, to understand the various parts of the DCA, you can read through its documentation:
The data container is used almost everywhere in the TYPOlight backend. There are three data containers included with TYPOlight, although you are of course free to create/write your own Data Containers and provide them as the dataContainer of your Data Container Array (DCA).
As above, Data Containers are located in system/drivers/ directory, and must start with a name DC_. Most commonly used one is of course the DC_Table, which provides a very elegant mechanism to list, edit and save database table information. Here's a short description of the data containers included in TYPOlight core:
| Table | Default data container, provides access to a database system. |
| File | This is the data container for localconfig.php, where the system settings are stored. |
| Folder | Data container "Folder" provides directory access like the file manager |
The data container is often passed to a callback in backend, e.g.
Here are the variables you have access to from the passed DataContainer $dc variable in your callback function, where $dc would be your Data Container object. Please note that this is only related/tested with DC_Table.
| $dc->id | int | The id of the affected table row. | |
| $dc->table | string | The table this data container is working on. | This could be tl_settings for a File data container, it does not have to be a database table! |
| $dc->value | mixed | Value of the current field | |
| $dc->field | string | Name of the current field | |
| $dc->inputName | string | Name attribute of the current input field | |
| $dc->palette | string | Name of the current palette | |
| $dc->parentTable | string | Name of the parent table | Applies to DC_Table only. |
| $dc->childTabe | array | Names of one or more child tables | Applies to DC_Table only. |
| $dc->rootIds | mixed | IDs of all root records | Can be an array or single value (string). Applies to DC_Table only. |
Here is an example of a config onload_callback using the Data Container to retrieve data based on the current ID, $dc->id:
1 <?php
2
3 /**
4 * Update the RSS feed
5 * @param object
6 */
7 public function generateFeed(DataContainer $dc)
8 {
9 if (!$dc->id)
10 {
11 return;
12 }
13
14 $this->import('Calendar');
15 $this->Calendar->generateFeed($dc->id);
16 }
17
18 ?>Here is an example of a field save_callback passing the variable value of the current field, and the Data Container. It then processes the variable value and returns the new value to be saved in the database.
1 <?php
2
3 /**
4 * Deserialize and store the tags
5 * @param object
6 * @param object
7 */
8 public function saveTags($varValue, DataContainer $dc)
9 {
10 $options = deserialize($varValue, true);
11 if (!is_array($options))
12 {
13 return _;
14 }
15
16 return join(',', $options);
17
18 }
19 ?>While developing applications it may be beneficial to place the following in your code where you need to check the contents of your Data Container:
1 <?php
2
3 print_r($dc);
4
5 ?>Ich möchte hier einen Versuch starten, euch beizubringen, wie man die Felder von TYPOlight mit Defaultwerten vorbelegen kann. Vorab möchte ich euch daran erinnern, dass jede Änderung am Core vermieden werden sollte, da sonst das System nicht updatesicher bleibt. Deshalb merke:
Warum das so außerhalb vom Core geht? Ganz einfach. TYPOlight lädt einfach diese Dateien ganz am Schluss und dadurch ist es möglich, Daten zu überschreiben, bevor sie ausgegeben werden. Schlau, nicht? Okay, dann wollen wir mal schauen, wie wir ohne große PHP-Kenntnisse, TYPOlight dazu bringen können, dass bei "Artikel veröffentlichen" die Checkbox standardmäßig angehakt ist.
1. Zuerst müssen wir suchen, in welcher Config-Datei diese Checkbox generiert wird. Das ist natürlich für nicht PHP-Kenner bei so vielen Dateien ganz schön schwierig. Natürlich gibt es da einen Trick. Zuerst einmal müsst ihr euch aber ein Programm holen, dass Dateien und Unterverzeichnisse nach Inhalt durchsuchen kann. Ich nehme immer den PSPad Editor, ist aber vielleicht nur eine dumme Angewohnheit.
2. Da wir keine Ahnung haben, in welcher Datei die Konfiguration erfolgt, suchen wir einfach mal nach der Bezeichnung des Feldes "Artikel veröffentlichen", denn auch das muss ja irgendwoher kommen. Gesagt, getan. Ich durchsuche also den ganzen TYPOlight Ordner nach "Artikel veröffentlichen" und siehe da, ich erhalte ein Resultat und zwar in der Datei system/modules/backend/languages/de/tl_article.php. Wenn ich diese Datei nun öffne, finde ich folgende Zeile (alles auf einer Zeile, ich hab's hier anders dargestellt, wegen der Breite):
1 $GLOBALS['TL_LANG']['tl_article']['published'] = array
2 (
3 'Artikel veröffentlichen',
4 'Den Artikel auf der Webseite anzeigen.'
5 );3. Wie ihr nun seht, wird in dieser Datei das Feld, je nach Sprache benannt. Jetzt wissen wir aber, in welchem Array diese Beschriftung gespeichert wird, nämlich in
1 $GLOBALS['TL_LANG']['tl_article']['published']Also wiederholen wir unsere Suche in allen Dateien und suchen dieses Array, was uns natürlich wieder ein Resultat liefert. Diesmal sind es 3 bzw. je nachdem noch mehr Resultate. Logischerweise finden wir das Array in allen Sprachdateien (standardmäßig de und en, deshalb zwei) und in unserer gesuchten Config-Datei! Es handelt sich hier um system/modules/backend/dca/tl_article.php.
4. Jetzt wird es ein bisschen komplizierter, obwohl die Darstellung ja sehr ordentlich ist. Wir haben vor uns jetzt eine Datei mit lauter mehrdimensionalen Arrays. Wer genau wissen möchte, um was es sich dabei handelt, kann sich hier weiterbilden. An und für sich müsst ihr euch das einfach wie ein Geschenk vorstellen, das in n Packungen eingepackt ist (verschachtelt). Unser
1 $GLOBALS['TL_LANG']['tl_article']['published']findet ihr so vor:
1 'published' => array
2 (
3 'exclude' => true,
4 'label' => &$GLOBALS['TL_LANG']['tl_article']['published'],
5 'inputType' => 'checkbox',
6 'eval' => array('doNotCopy'=>true)
7 ),5. Jetzt verfolgen wir die Verschachtelung zurück. Wenn wir all das auslassen, was uns nicht interessiert (= die Schachteln auf der gleichen Ebene), bleibt am Schluss das übrig:
1 $GLOBALS['TL_DCA']['tl_article'] = array
2 (
3 // Fields
4 'fields' => array
5 (
6 'published' => array
7 (
8 'exclude' => true,
9 'label' => &$GLOBALS['TL_LANG']['tl_article']['published'],
10 'inputType' => 'checkbox',
11 'eval' => array('doNotCopy'=>true)
12 ),Entweder ihr seht das gleich, oder ihr löscht einfach alles, was euch nicht interessiert aus der Datei (Achtung, nicht speichern danach ;-))
6. Nun können wir also alle Schachteln zusammenfassen:
1 $GLOBALS['TL_DCA']['tl_article']['fields']['published']Genau hier wird dieses Feld generiert und wir können es jetzt in der system/config/dcaconfig.php vorbelegen, indem wir dort einfach folgenden Code eingeben:
1 $GLOBALS['TL_DCA']['tl_article']['fields']['published']['default'] = true;Ihr seht, wir hängen einfach dieser Verschachtelung noch ein 'default' an und setzen den Wert auf 'wahr', da eine Checkbox entweder angehakt ist (true) oder eben nicht (false).
7. Das war's. Von nun an ist eure Checkbox standardmäßig angehakt. Beachtet bitte, dass das natürlich keine Auswirkungen auf bereits erstellte Artikel hat, denn bei denen wurde der Status ja schon in die Datenbank eingetragen.
Natürlich gibt es nicht nur Checkboxen. Wir könnten z.B. auch die Bildergröße (150 x 100 Pixel) bei einem Bild vorbelegen. Das sähe dann so aus:
1 $GLOBALS['TL_DCA']['tl_content']['fields']['size']['default'] = array(150,100);--- Tutorial verfasst durch Toflar
Some sites have a header image of some kind that sets each article apart or each section of the website apart from the other sections. This can be tiring to create a new page layout or separate CSS class definition for each page. With TYPOlight's powerful built-in insert tags, you can accomplish this dynamic header appearance easily.
This tip uses TYPOlight's built-in tags. Find out more about them here: http://www.typolight.org/insert-tags.html
[TutorialsCreatingCustomTemplates|Create a page layout] like you normally would, except that where you want to insert your header image, put this code:
1 <img src="/tl_files/images/{{env::page_alias}}.png" alt="{{env::page_title}}" />Create your site structure, applying the page layout created above to the pages you wish to have the dynamic header. Give each of these pages a unique alias and remember them.
Using whatever graphic design program you wish, create your header images for each of the pages you applied the dynamic header page layout to. Name the header images the exact same thing as the alias of the page to which that image belongs.
Upload your images into the directory specified in the code you inserted into the page layout above. In this case it would be in the "tl_files/images" directory.
Done!
If this does not work for you, please try the following:
--- Tutorial created by Logan
Thread im Forum zu dem Tutorial
Es gibt verschieden Möglichkeiten in TYPOlight Dynamisch Bilder auf einer Seite darzustellen. Hier möchte ich Möglichkeiten aufzeigen wie man auf jeder Seite ein anderes Bild haben kann ohne eine extra Erweiterung nutzen zu müssen. Zusätzlich möchte ich ein wenig anregen wie kreativ man mit TYPOlight umgehen kann und Lösungen für sich finden kann.
Natürlich gibt es auch schon eine passende Erweiterung für solche Bedürfnisse: pageimage - Seitenbild
Natürlich kann man auch mit einem Artikel ein Bild auf einer Seite einbinden. Dazu muss man nur unter Seitenlayout das Layout bearbeiten und noch einen Artikel an der Stelle einbinden, wo man das Bild dann später einmal haben möchte (zu finden unter Frontend-Module > Eingebundene Module). Dann hat man die Möglichkeit bei einem neuen Artikel in den Einstellungen auszuwählen wo der genau hin soll (Unter Artikel bearbeiten > Layoutbereich und Suchbegriffe > Anzeigen in), ob in die Hauptspalte oder in die Kopfzeile, je nachdem wo man das Modul Artikel so drinn stehen hat. Dann reicht es einfach ein ContentElement Bild einzufügen. Das muss dann für jede Seite gemacht werden. Ansonsten wird kein Bild angezeigt.
Für diejenigen, die ein Bild mehrfach verwenden wollen, kann es sich lohnen dieses über eine eigenes Modul (eigener HTML-Code) verfügbar zu machen. Dann braucht man als ContentElement nur noch das Modul auszuwählen und hat dann schon alle Parameter so wie man diese haben möchte.
Das kommt immer ganz darauf an was man im Resultat erreichen möchte. Ich werde hier an dieser Stelle beide Wege Beschreiben.
Hier kann man auch direkt im eigenen Template arbeiten wenn man möchte bzw. wenn man eh schon eins angelegt hat. Ansonten empfiehlt sich der Weg über ein Eigenes HTML-Code Modul.
env::page_alias gibt den Alias der aktuellen Seite aus. env::page_title gibt den Titel der aktuellen Seite aus. Jetzt braucht man nur für jede Seite ein Bild in dem Ordner header anlegen und es so benennen wie der alias der Seite ist auf dem das Bild zu sehen sein braucht. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein ;-)
env::main_alias gibt den Alias der übergeordneten Hauptseite aus. env::main_title gibt den Titel der übergeordneten Hauptseite aus. Jetzt braucht man nur für jede Hauptseite ein Bild in dem Ordner header anlegen und es so benennen wie der alias der Seite ist auf dem das Bild zu sehen sein braucht. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein ;-)
Hier wird der Ordner einfach durch den Inserttag ersetzt:
<img src="/tl_files/header/{{env::main_alias}}/rechtes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" />
<img src="/tl_files/header/{{env::main_alias}}/linkes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" />
Jetzt muss man natürlich für jeden Hauptpunkt einen extra Ordner anlegen und da drinn die Bilder mit den passenden Namen anlegen. Zu beachten ist hier, das der alt-Inhalt vom main_title und page_alias genommen wird, damit man ein wenig abwechslung hat ;-)
Aber das kann jeder natürlich so machen wie er möchte.
Richtig schön wirds dann mit verschiedenen Bildern in verschiedenen Ordnern um richtig Ordnung zu halten bei größeren Seiten:
<img src="/tl_files/header/{{env::main_alias}}/{{env::page_alias}}.png" alt="{{env::main_title}} - {{env::page_alias}}" />
Klasse:
<body id="top"<?php if ($this->class): ?> class=" {{env::page_alias}}<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
ID:
<body id="top {{env::page_alias}}"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
Natürlich geht das auch wieder mit env::main_alias
Das beste ist: Das ganze ist durch den page_alias auch schon sprachabhängig, da jede andere Sprache auch einen anderen Alias haben wird (Cave: zum Teil unterscheiden sich die Seiten nur durch Zahlen, die TL automatisch generiert). Wenn man zum Beispiel auf dem Bild auch noch Text hat kann das sehr praktisch sein.
--- Tutorial erstellt von MacKP, 19.07.2009
Als Grundlage diente hier teilweise das englische Tutorial von Logan
If you want your clients to edit the footer, and not learn HTML, its sometimes difficult to get things working using a module solution. I've done it with a hidden page and article, which allows you to edit the content (and your client too).
In a similar way, you can add another article for Header as well, with all its content elements inside. Both Header and Footer Articles can reside on the same CSS page (so its not needed to make separate pages).
Go to Modules and create a HTML module called Footer. Then in the HTML, write the inserttag:
{{insert_article::5}}
where 5 is of course the article's ID number, noted above.
Now your footer is completely editable with the Article/Content editor and you can provide client access.
In the same way you can create another module called Header and insert it with its own article ID.
The main reason why I needed this, was to insert e-mail addresses scrambled by TL and also a nice way to insert images and other data that the client could still edit. Client module editing is a big no-no for me.
--- Tutorial created by thyon
An manchen Stellen ist es sinnvoll, eigene Formularfelder in TYPOlight zu integrieren.
Folgendes Beispiel: Ein Reisebüro stellt mittels eines TYPOlight Moduls eigene Reisen ins Netz. Der Endbenutzer kann im Frontend auf der Reiseübersicht eine entsprechende Reise buchen. Hierzu klickt er auf einen Button und gelangt so zu einem Kontaktformular. Im Kontaktformular soll zusätzlich zu den Benutzerangaben auch die ausgewählte Reise angezeigt werden.
Es muss eine Formularfelddatei erstellt werden. Diese nennen wir im Beispiel FormTextFieldSetValue.php und spiele die Datei in das Verzeichnis system/module/frontend/
1 <?php
2
3 class FormTextFieldSetValue extends Widget
4 {
5 protected $blnSubmitInput = true;
6
7 protected $strTemplate = 'form_widget';
8
9 public function +set($strKey, $varValue)
10 {
11 switch ($strKey)
12 {
13 case 'maxlength':
14 $this->arrAttributes[$strKey] = ($varValue > 0) ? $varValue : @;
15 break;
16
17 case 'mandatory':
18 $this->arrConfiguration['mandatory'] = $varValue ? true : false;
19 break;
20
21 default:
22 parent::+set($strKey, $varValue);
23 break;
24 }
25 }
26
27 public function generate()
28 {
29 if($this->Input->get('ID') != @)
30 $output = $this->SetValue($this->Input->get('ID'));
31 else
32 $output = "Bitte wählen Sie eine Reise aus!";
33
34 return sprintf('<input type="text" name="%s" id="ctrl_%s" class="text%s" value="%s"%s />',
35 $this->strName,
36 $this->strId,
37 (strlen($this->strClass) ? ' ' . $this->strClass : @),
38 specialchars($output),
39 $this->getAttributes()) . $this->addSubmit();;
40 }
41
42 private function SetValue($id) {
43 $this->import('Database');
44 $query = "SELECT id, startdate, enddate, tourname, daytrip ";
45 $query .= "FROM tl_tour_catalog ";
46 $query .= "WHERE display = 1 AND id = ".$id."";
47
48 $objTarget = $this->Database->execute($query)->fetchRow();
49
50 $timespan = "(".date("d.m.Y", $objTargetr1);
51 if($objTargetr4 != '1') {
52 $timespan .= " - ".date("d.m.Y", $objTargetr2);
53 }
54 $timespan .= ")";
55
56 return $objTargetr3." ".$timespan;
57 }
58 }
59
60 ?>In der Methode SetValue(), wird ein Wert Anhand der übergebenen ID $this->Input->get('ID') aus der Datenbanktabelle ausgelesen. Die Methode SetValue() wird in der Methode generate() aufgerufen.
Damit unser Formularfeld im Front- & Backend angezeigt wird, müssen folgende Dateien angepasst werden:
Es muss nach *palettes' => array_ in folgender Datei gesucht werden:
system/module/backend/dca/tl_form_field.phpEs muss folgende Codezeile wie folgt hinzugefügt werden:
'textsetvalue' => 'name,type;label'1 'captcha' => 'type;label;accesskey,class;addSubmit',
2 'submit' => 'type;slabel;imageSubmit;accesskey,class',
3 'textsetvalue' => 'name,type;label'
4 ),Es muss nach $GLOBALS['TL_FFL'] = array in folgender Datei gesucht werden:
system/module/frontend/config/config.php?Es muss folgende Codezeile wie folgt hinzugefügt werden:
'textsetvalue' => 'FormTextFieldSetValue'1 'captcha' => 'FormCaptcha',
2 'submit' => 'FormSubmit',
3 'textsetvalue' => 'FormTextFieldSetValue'
4 );Unser neues Formularfeld kann nun einem Formular über den Formulargenerator hinzugefügt werden.
Ich übernehme keine Haftung für evt. auftretende Fehler. Es handelt sich hierbei ausschließlich um einen Beispielcode!
--- Tutorial erstellt von Christian Barkowsky
Es gab viele Anfragen, wie man eigene Seitentemplates nutzen kann, anstelle des standard fe_page templates. Heute möchte ich zeigen, wie sich ein template von OSWD (open source web design integrieren lässt. Wenn du verstehst, wie das funktioniert, kannst du ebenso YAML templates integrieren oder eigene entwerfen.
Wirf einen Blick auf dieses aussagekräftige Screencast Tutorial
Ich wähle das Blue Freedom Template, um zu zeigen wie das geht. Zuallererst, lade bitte das Template herunter und entpacke das Archiv in deinen TYPOlight Ordner. Dann kopiere die Datei templates/bluefreedom2/index.html in das templates Verzeichnis und benenne es um in fe_bluefreedom2.tpl.
Du solltest nun folgende Dateien und Ordner haben, die du folgendermaßen hochlädst:
Als nächstes werden wir die Template Datei anpassen, das heisst, wir müssen einige Platzhalter einfügen, welche durch den TYPOlight Inhalt ersetzt werden. Wir machen das Schritt für Schritt, beginnend mit dem Kopf.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Blue Freedom by minimalistic-design.net</title>
5 <meta http-equiv="Content-Language" content="English" />
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7 <link rel="stylesheet" type="text/css" href="../tl_files/bluefreedom2/style.css" media="screen" />
8 </head>Hier sind ein paar Dinge, die wir ändern.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <head>
4 <base href="<?php echo $this->base; ?>"></base>
5 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
7 <link rel="stylesheet" type="text/css" href="bluefreedom2/style.css" media="screen" />
8 </head>Grundsätzlich, handelt es sich um drei wichtige Änderungen. Zuerst fügen wir den Base-Tag hinzu, der von TYPOlight benötigt wird.
<base href="<?php echo $this->base; ?>" /></base>
Innerhalb des Base-Tags nutzen wir wieder einen Platzhalter, der später vom aktuellen Wert ersetzt wird. Falls deine PHP Konfiguration kurze TAGS unterstützt, kannst du es auch so schreiben:
<base href="<?=$this->base;?>" /></base>
Als nächstes ersetzen wir den original Titel wie gewohnt mit Platzhaltern, falls wir möchten, dass TYPOlight den Seitennamen und die aktuelle Seite anstelle des Standard Titels ausgibt.
<title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
Wenn du alle TYPOlight Funktionen (z.B. Lightbox und sortierbare Tabellen) nutzen möchtest, musst du ein paar weitere Tags hinzufügen, die im Grunde genommen vom standard Template (fe_page) via copy & paste übertragen werden können. Der vollständige Seitenkopf sieht etwa so aus:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3
4 <head>
5 <base href="<?php echo $this->base; ?>"></base>
6 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
7 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
8 <meta name="description" content="<?php echo $this->description; ?>" />
9 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
10 <?php echo $this->robots; ?>
11 <script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script>
12 <script type="text/javascript" src="plugins/mootools/mootools.js"></script>
13 <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
14 <script type="text/javascript" src="plugins/ufo/ufo.js"></script>
15 <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
16 <link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" />
17 <link rel="stylesheet" type="text/css" href="tl_files/bluefreedom2/style.css" media="screen" />
18 <?php echo $this->head; ?>
19 </head>Zuerst wird der <body> - Tag ersetzt, um in TYPOlight auch alle Features nutzen zu können (wie jeder Seite eine eigene Klasse geben etc.):
<body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
Der nächste Schritt ist nun, verschiedene Platzhalter dem Hauptbereich zuzuordnen, damit TYPOlight erkennt, wo der Inhalt dargestellt werden soll. Das nutzt vier Layout Bereiche (header, middle, right und footer), welche wir nun ersetzen:
1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5
6 <div class="breadcrumbs">
7 <a href="#">Home</a> · You are here
8 </div>Wir ersetzen ihn ganz einfach mit:
1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5
6 <?php echo $this->header; ?>Nach diesem Prinzip ersetzen wir
1 <div class="middle">
2
3 <h2>Template dummy text</h2>
4
5 Just to fill out empty space in the template I decided to write this and to add one of my previous templates here. There are direct links to view one of my previous templates live and live link to download it also ;) Anyway hope you like both this one and previous one. You can see all of my templates at
6 <a href="http://www.minimalistic-design.net">Minimalistic design</a> live.
7 <br /><br />
8 <img src="bluefreedom2/images/minimal.jpg" alt="Preview of Minimalistic Template" />
9
10 </div>mit
1 <div class="middle">
2 <?php echo $this->main; ?>
3 </div>Und schlussendlich ersetzen wir
1 <div class="right">
2
3 <h2>Navigation</h2>
4
5 <ul>
6 <li><a href="http://www.minimalistic-design.net">Minimalistic Design</a></li>
7 <li><a href="http://www.oswd.org">Open Source Web Design</a></li>
8 <li><a href="http://www.opendesigns.org">Open Designs</a></li>
9 <li><a href="http://www.openwebdesign.org">Open Web Design</a></li>
10 <li><a href="http://www.iollo.com">Iollo's review highway</a></li>
11 <li><a href="http://www.historyexplorer.net">History Timelines</a></li>
12 <li><a href="http://www.quakerparrot.info">Quaker Parrot</a></li>
13 <li><a href="http://www.moneybookersclub.com">Moneybookers Club</a></li>
14 </ul>
15
16 </div>mit
1 <div class="right">
2 <?php echo $this->right; ?>
3 </div>
4 Damit man jetzt noch mootools und die Goolge-ID richtig Nutzen kann muss noch vor den schließenden </body> dies hier mit rein:
<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
<?php echo $this->mootools; ?>
<?php if ($this->urchinId): ?>
<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>
<?php endif; ?>
So dass der vollständige Body so aussieht:
1 <body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
2 <div id="wrap">
3
4 <div id="top"></div>
5
6 <div id="content">
7
8 <div class="header">
9 <h1><a href="#">Blue Freedom</a></h1>
10 <h2>Free xhtml/css Template</h2>
11 </div>
12
13 <?php echo $this->header; ?>
14
15 <div class="middle">
16 <?php echo $this->main; ?>
17 </div>
18
19 <div class="right">
20 <?php echo $this->right; ?>
21 </div>
22
23 <div id="clear"></div>
24
25 </div>
26
27 <div id="bottom"></div>
28
29 </div>
30
31 <div id="footer">
32 Design by <a href="http://www.minimalistic-design.net">Minimalistic Design</a>
33 </div>
34
35 <!-- indexer::stop -->
36 <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
37 <!-- indexer::continue -->
38 <?php echo $this->mootools; ?>
39
40 <?php if ($this->urchinId): ?>
41
42 <script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
43 <script type="text/javascript">
44 <!--//--><![CDATA[//><!--
45 try {
46 var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
47 pageTracker._trackPageview();
48 } catch(err) {}
49 //--><!]]>
50 </script>
51
52 <?php endif; ?>
53
54 </body>
55 </html>Nun müssen wir das neu erstellte Template nur noch in TYPOlight einlesen. Ich werde das bestehende standard Layout überschreiben, statt ein Neues zu erstellen. Bitte logge dich dazu in der Administration (Backend) ein und öffne das Modul "Seitenlayout". Editiere das Standard Layout und wähle unter Layout Vorlage fe_bluefreedom2. Danach verändere das Layout in ein zwei Spalten Layout mit der Hauptspalte auf der linken Seite und füge diese drei Module hinzu:
| Breadcrumb navigation | header |
| Articles | main |
| Navigation | right |
Im letzten Schritt müssen die Style Selektoren angepasst werden, da die blue freedom Templates ein Wenig unterschiedliche Klasse und ID Attribute nutzt, als TYPOlight. Bitte öffne das Stylesheet bluefreedom2/style.css in einem Texteditor.
Ersetze Selektor
1 .breadcrumbs {mit
1 .mod_breadcrumb {und ersetze
1 .middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
2 .right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}mit
1 .middle h1 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
2 .right h1 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}Als letzten Schritt füge noch diese zwei Zeilen hinzu:
1 .mod_navigation .submenu { display:inline; }
2 .mod_navigation .level_2 { margin-top:-18px; margin-bottom:-9px; }Nun öffne die Frontend Voransicht und wechsle auf die Seite index.php/academy.html (bei nicht aktivem URL Rewrite). Das Ergebnis sollte etwa so aussehen:
Ich hoffe, das Tutorial hat dir gefallen und du hast nun eine Vorstellung von der Umsetzung eigener Templates. Wenn du Fragen hast, stelle sie bitte im Forum.
--- Originaltutorial und Screencast wurden erstellt von Leo, übersetzt von Carino
Ab und zu kann es vorkommen, dass man die Navigation mit Überschriften versehen will. Das geht zum einen natürlich darüber, dass man mehrere Navigations Module anlegt und diese im Template einbindet. Auf Dauer ist allerdings eine dynamische Variante besser.
1 <?php if($this->level == 'level_1'): ?>
2 <?php foreach ($this->items as $item): ?>
3 <h2><?php echo $item['link']; ?></h2>
4 <?php echo $item['subitems']; ?>
5 <?php endforeach; ?>
6 <?php else: ?>
7 <ul class="<?php echo $this->level; ?>">
8 <?php foreach ($this->items as $item): ?>
9 <?php if ($item['isActive']): ?>
10 <li class="active<?php if($item['class']): ?> <?php echo $item['class'];?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
11 <?php else: ?>
12 <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
13 <?php endif; endforeach; ?>
14 </ul>
15 <?php endif; ?>Durch eine simple If-Abfrage kann nun die erste Navigationsebene ganz einfach als Überschrift genutzt werden.
Today I want to show you how to create your own TYPOlight module. There have been some requests for an "external data" module, therefore, I am going to explain how such a module can be set up. Let's assume that you want to publish your CD collection and you want each CD to be shown with its title, artist name, image and an individual comment. We need a back end module to add the records and a front end module to display them.
First, we have to create the basic file structure including the following folders:
As you can see, I have named the module cd_collection.
Let's start with the back end module.
First of all, we have to set up the configuration file of our module. When TYPOlight is initialized, each module configuration file is loaded allowing you to overwrite existing settings. Thus, you never have to modify any core files and your settings will not be overwritten on a live update. Now, please create a file named config.php and add the following lines:
1 <?php
2
3 // Back end module
4 $GLOBALS['BE_MOD']['content']['cd_collection'] = array
5 (
6 'tables' => array('tl_cds'),
7 'icon' => 'system/modules/cd_collection/icon.gif'
8 );
9
10 // Front end module
11 array_insert($GLOBALS['FE_MOD']['miscellaneous'], 0, array
12 (
13 'cd_collection' => 'ModuleCdCollection'
14 ));
15
16 ?>Ok, let's see what we have done here. First, we have added a new back end module called cd_collection to the content group. It uses one table called tl_cds and an icon which does not exist yet. Then, we have added a new front end module called cd_collection to the miscellaneous group.
If you use the array_insert function to add a new back end or front end module, you can define its exact position. In our example, we are using the function to make our module the first one within the group.
Next, we have to create the table which we have defined in the configuration file. Therefore, we simply create a database.sql file and add the following lines:
1 --
2 -- Table @tl_cds@
3 --
4
5 CREATE TABLE @tl_cds@ (
6 @id@ int(10) unsigned NOT NULL auto_increment,
7 @tstamp@ int(10) unsigned NOT NULL default '0',
8 @title@ varchar(64) NOT NULL default _,
9 @artist@ varchar(64) NOT NULL default _,
10 @image@ varchar(64) NOT NULL default _,
11 @comment@ text NULL,
12 PRIMARY KEY (@id@)
13 ) ENGINE=MyISAM DEFAULT CHARSET=utf8;As you can see, we have added a field for each piece of information that we want to include later. In addition, we have defined an ID and a TSTAMP field which is required by TYPOlight. Now, open the TYPOlight install tool (not the live update) and update your database tables.
As you (should) know, TYPOlight automatically renders back end forms from the global table configuration array. This table configuration array consists of all data container arrays which are stored in the dca folders of each module. Similar to the configuration files, each dca file is included when the system is initialized allowing you to overwrite existing settings. You can find a complete list of options at http://www.typolight.org/reference.html.
Now, please create a new file called system/modules/cd_collection/dca/tl_cds.php and add the following lines to it:
1 <?php
2
3 $GLOBALS['TL_DCA']['tl_cds'] = array
4 (
5 // Config
6 'config' => array
7 (
8 'dataContainer' => 'Table',
9 'enableVersioning' => true
10 ),
11
12 // List
13 'list' => array
14 (
15 'sorting' => array
16 (
17 'mode' => 1,
18 'fields' => array('title'),
19 'flag' => 1,
20 'panelLayout' => 'search,limit'
21 ),
22 'label' => array
23 (
24 'fields' => array('title', 'artist'),
25 'format' => '%s <span style="color:#b3b3b3; padding-left:3px;">[%s]</span>'
26 ),
27 'global_operations' => array
28 (
29 'all' => array
30 (
31 'label' => &$GLOBALS['TL_LANG']['MSC']['all'],
32 'href' => 'act=select',
33 'class' => 'header_edit_all',
34 'attributes' => 'onclick="Backend.getScrollOffset();"'
35 )
36 ),
37 'operations' => array
38 (
39 'edit' => array
40 (
41 'label' => &$GLOBALS['TL_LANG']['tl_cds']['edit'],
42 'href' => 'act=edit',
43 'icon' => 'edit.gif'
44 ),
45 'copy' => array
46 (
47 'label' => &$GLOBALS['TL_LANG']['tl_cds']['copy'],
48 'href' => 'act=copy',
49 'icon' => 'copy.gif'
50 ),
51 'delete' => array
52 (
53 'label' => &$GLOBALS['TL_LANG']['tl_cds']['delete'],
54 'href' => 'act=delete',
55 'icon' => 'delete.gif',
56 'attributes' => 'onclick="if (!confirm(\_ . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\')) return false; Backend.getScrollOffset();"'
57 ),
58 'show' => array
59 (
60 'label' => &$GLOBALS['TL_LANG']['tl_cds']['show'],
61 'href' => 'act=show',
62 'icon' => 'show.gif'
63 )
64 )
65 ),
66
67 // Palettes
68 'palettes' => array
69 (
70 'default' => 'title,artist;image;comment',
71 ),
72
73 // Fields
74 'fields' => array
75 (
76 'title' => array
77 (
78 'label' => &$GLOBALS['TL_LANG']['tl_cds']['title'],
79 'inputType' => 'text',
80 'search' => true,
81 'eval' => array('mandatory'=>true, 'maxlength'=>64)
82 ),
83 'artist' => array
84 (
85 'label' => &$GLOBALS['TL_LANG']['tl_cds']['artist'],
86 'inputType' => 'text',
87 'search' => true,
88 'eval' => array('mandatory'=>true, 'maxlength'=>64)
89 ),
90 'image' => array
91 (
92 'label' => &$GLOBALS['TL_LANG']['tl_cds']['image'],
93 'inputType' => 'fileTree',
94 'eval' => array('files'=>true, 'fieldType'=>'radio')
95 ),
96 'comment' => array
97 (
98 'label' => &$GLOBALS['TL_LANG']['tl_cds']['comment'],
99 'inputType' => 'textarea'
100 )
101 )
102 );
103
104 ?>Let's take a look at it file step by step.
In the first group (configuration) we have defined that the module uses a table as data container and we have enabled versioning for it.
In the second group (list) we have defined a sorting mode (1 = sort by default value), the default sorting field (title) and a panel layout which includes the search records function and the limit records function. In addition, we have defined a label (which will be title [artist]) and a couple of navigation icons that will be shown next to each record.
In the third group (palette) we have defined a simple palette containing four fields in three groups. You can separate fields using comma (,) and groups using semicolon (;).
In the last group (fields) we have defined the four input fields that we want to use for our CD collection. The first two fields will be searchable and mandatory and our image field will show the file tree with radio buttons (since we want to have a single image per record).
At this point, our back end module is almost finished and already working. However, there are a couple of labels missing since we did not "hardcode" them into the source code but want to use a language file. Therefore, please create a new language file called system/modules/cd_collection/languages/en/tl_cds.php and add the following lines:
1 <?php
2
3 // Fields
4 $GLOBALS['TL_LANG']['tl_cds']['title'] = array('Title', 'Please enter the CD title.');
5 $GLOBALS['TL_LANG']['tl_cds']['artist'] = array('Artist', 'Please enter the artist\'s name.');
6 $GLOBALS['TL_LANG']['tl_cds']['image'] = array('Image', 'Please select the CD cover image.');
7 $GLOBALS['TL_LANG']['tl_cds']['comment'] = array('Comment', 'Please add a comment.');
8
9 // Buttons
10 $GLOBALS['TL_LANG']['tl_cds']['new'] = array('New CD', 'Add a new CD');
11 $GLOBALS['TL_LANG']['tl_cds']['edit'] = array('Edit CD', 'Edit CD ID %s');
12 $GLOBALS['TL_LANG']['tl_cds']['copy'] = array('Copy CD', 'Copy CD ID %s');
13 $GLOBALS['TL_LANG']['tl_cds']['delete'] = array('Delete CD', 'Delete CD ID %s');
14 $GLOBALS['TL_LANG']['tl_cds']['show'] = array('CD details', 'Show details of CD ID %s');
15
16 ?>Then, create file system/modules/cd_collection/languages/en/modules.php:
1 <?php
2
3 // Back end modules
4 $GLOBALS['TL_LANG']['MOD']['cd_collection'] = array('CD collection', 'Publish your CD collection online.');
5
6 // Front end modules
7 $GLOBALS['TL_LANG']['FMD']['cd_collection'] = array('CD collection', 'This module lists all CDs of your collection.');
8
9 ?>Now your back end module is ready to be used. Log in to the back end, click on CD collection and start adding your CDs.
Of course, we also want to display our CDs in the front end. Typically, a front end module is represented by a particular class which extends class Module. If you are not familiar with Object Oriented Programming, you might want to read this article.
In order to add a front end module to TYPOlight, we have to extend table tl_module. You already know that configuration files and dca files are included when the system is initialized allowing you to overwrite or extend existing settings. Therefore, we will now create file system/modules/cd_collection/dca/tl_module.php and add the following lines:
1 <?php
2
3 // Add a palette to tl_module
4 $GLOBALS['TL_DCA']['tl_module']['palettes']['cd_collection'] = 'name,type,headline;align,space,cssID';
5
6 ?>Next, we have to create a template file for the module. Therefore, please create a new file called system/modules/cd_collection/templates/mod_cd_collection.tpl and add the following lines:
1 <div class="<?php echo $this->class; ?>"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
2 <?php if ($this->headline): ?>
3
4 <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
5 <?php endif; ?>
6
7 <table cellpadding="4" cellspacing="0" summary="My CD collection"><?php foreach ($this->cds as $cd): ?>
8 <tr>
9 <td><img src="<?php echo $cd['src']; ?>" alt="<?php echo $cd['alt']; ?>" /></td>
10 <td><strong><?php echo $cd['title']; ?></strong> (<?php echo $cd['artist']; ?>)<p><?php echo $cd['comment']; ?></p></td>
11 </tr><?php endforeach; ?>
12 </table>
13
14 </div>The template file basically creates a table containing our CD images in the left column and the information in the right column. I have simply copied the surrounding DIV elements from another module template.
The last thing that we have to do is to create the module class. Therefore, please create a new file called system/modules/cd_collection/ModuleCdCollection.php and add the following lines:
1 <?php
2
3 class ModuleCdCollection extends Module
4 {
5 protected $strTemplate = 'mod_cd_collection';
6
7 protected function compile()
8 {
9 $arrCds = array();
10 $objCds = $this->Database->execute("SELECT * FROM tl_cds ORDER BY title");
11
12 while ($objCds->next())
13 {
14 $arrCds[] = array
15 (
16 'title' => $objCds->title,
17 'artist' => $objCds->artist,
18 'comment' => $objCds->comment,
19 'src' => $this->getImage($objCds->image, '120', _),
20 'alt' => specialchars($objCds->title),
21 );
22 }
23
24 $this->Template->cds = $arrCds;
25 }
26 }
27
28 ?>Ok, let's have a closer look at this class. First, we have assigned template mod_cd_collection which we have created earlier. Then, inside method compile, we have selected all records from our database table and added them to an array called $arrCds. Thereby, we have used the built-in image handler to automatically resize our images to 120px width and we have set the CD title as alternative image text. At the bottom, we have added the CDs array to the template file.
Finally, after you have added the module to an article or page layout, you can watch the result in the front end. Provided that you have done everything right, your back end articles preview might look similar to this:
If you do not want to create the files manually, you can download a ZIP archive here.
attachment:cd_collection.zip
In addition a suitable Icon: !Image(cd_collection_icon.gif!
Copy this to directory cd_collection as icon.gif.
I hope that this tutorial has given you an idea of how to develop for TYPOlight. I am planning to publish a more complex example as a narrated screencast soon. In the meantime, if you have any questions please post them in the forum.
--- Tutorial created by Leo
This tutorial will teach you on how to add a new FAQ Module in your site.
Note: You should already know how to add new pages and articles.
New category
Edit category > New question Add module Add module New Article > Edit Article of the FAQ List Page New Article > --- Tutorial created by jhoy imperial
Its pretty easy to set-up the Contact Form in TYPOlight. Most of the work is done for you. Before we proceed, read the tip below to explain an important problem with TL and CC: fields.
If your cc: e-mails are not working/arriving, you're most likely problem is that TYPOlight default setting for e-mail strips off your cc:field when it compiles the e-mail. TL uses mail as the default transport engine. If you switch to SMTP, this will go away, but if you can't, then you have to hack TL to enable sending via the alternative method called sendmail. This hack is [TutorialsHackCc available here].
Select the Form Generator Module in the back-end and create a new form. Call it Contact Form and ensure that the following configuration options are setup correctly:
Ensure your form has a Jump to page linking it to a Thank you page. You can create a Thank You page just like the form page, except you add a text element, with some Thank You text. You can follow the instructions in the next section.
SAVE the form configuration and then add the the following form fields:
The final form in the back-end should look something like this:
You should be able to test your form now to see if it works.
--- Tutorial created by thyon design
This tutorial briefly shows how to access a form's variables after the user has clicked submit.
Add a page using TYPOlight's Site structure module. Give the page a name, make sure its published and important make sure that you check the box for Hide from Navigation. This will ensure that your script page is not accidentally run.
Add a form using TYPOlight's Form generator. Make sure your *Jump to page* is pointing to the Processing Page above. This is the page that the form will redirect to once its done with the basics like validation checks, etc.
I've also discovered that you can add hidden form fields to your form and they will pass to the php script via TL's form processing routines. Just add an HTML element just after the submit button (easier to spot there, or you can order it anywhere within the form). This is great, because if you add this at the TOP of a checkbox, you can force a checkbox to ALWAYS return a, e.g. FALSE value, no matter if it was selected or not.
Add an Article using TYPOlight's Articles. You can add a Text Content Element (CE) as this is the easiest one. Start typing some introduction text, e.g. Hello World. Then below that enter the tag {{file::processform.php}}. You can find out more about [EnglishInserttags insert tags here].
Create a script using your favorite text/PHP editor and store it in the (typolight root)/templates/ folder in TYPOlight root.
TYPOlight will only run a PHP file if its stored in (typolight root)/templates/ folder location.
Inside the script, e.g. processform.php you can process the form variables.
1 <?php
2
3 // process each form variable
4 foreach ($_SESSION['FORM_DATA'] as $key=>$value)
5 {
6 printf('Form Field: %s = [%s] <br />', $key, htmlentities($value));
7 }
8
9 ?>TYPOlight destroys the $_POST variables. The only way to access the form variables is using the $_SESSION['FORM_DATA']. If you are clever enough to write a front-end template or module, then you can access the form variables like this:
1 <?php
2
3 // within a .TPL file or Front-End module (minus the PHP at the top in that case)
4 foreach ($this->Input->post as $key=>$value)
5 {
6 printf('Form Field: %s = [%s] <br />', $key, htmlentities($value));
7 }
8
9 ?>OR, one at a time like this
1 <?php
2
3 // within a .TPL file or Front-End module (minus the PHP at the top in that case)
4 echo $this->Input->post('email');
5
6 ?>Thanks to leo for his unrelated post description in the forum.
--- Tutorial created by thyon design
This tutorial describes in detail how the built-in CSS framework works. The framework has been completely redone in version 2.3.2, which was released on 2007-05-04, and it is very important that you read this tutorial before upgrading your TYPOlight installation.
The new framework supports even more browsers and especially liquid layout have been highly improved. The new engine allows you to use any type of unit (not only pixel and percent) and even to combine different measurements. In addition, it includes a lot of important Internet Explorer bug fixes and reduces the CSS code that is added to your page. Here is the CSS code that a static two column layout used before:
1 #header {
2 height:232px;
3 width:880px;
4 margin:0px auto;
5 padding:0px;
6 text-align:left;
7 }
8 #container {
9 width:880px;
10 margin:0px auto;
11 text-align:left;
12 }
13 #left {
14 width:220px;
15 padding:0px;
16 text-align:left;
17 float:left;
18 }
19 #main {
20 width:660px;
21 padding:0px;
22 text-align:left;
23 float:left;
24 }
25 .clear {
26 clear:both;
27 height:0.1px;
28 line-height:0.1px;
29 font-size:0.1px;
30 overflow:hidden;
31 }
32 #footer {
33 height:96px;
34 width:880px;
35 margin:0px auto;
36 padding:0px;
37 text-align:left;
38 }
39 html>body #left {
40 margin-bottom:-1px;
41 }
42 html>body #main {
43 margin-bottom:-1px;
44 }
45 * html body {
46 text-align:center;
47 }
48 *:first-child+html #left {
49 margin-bottom:0px;
50 }
51 *:first-child+html #main {
52 margin-bottom:0px;
53 }The new framework only adds these few lines to your page:
1 * html body { text-align:center; }
2 #wrapper { width:880px; margin:0 auto; }
3 #header { height:250px; }
4 #left { width:220px; }
5 #main { margin-left:220px; }
6 #footer { height:96px; }One of the major advantages of the new framework is that the main column (static third column) is always as high as the highest column - even if it is not the highest column itself! Thus, if you add a left and right border to the main column, you can visually separate your columns without having to use a background-image. This works for static layouts as well as for liquid layouts!
The new framework has been tested on Firefox 1.0+, Netscape 8+, Internet Explorer 5.5+, Opera 7+ and Safari 1.0+. The new TYPOlight project website already uses it, so please consider it a working example.
Ok, now let's take a deeper look at the framework.
Here is a quick overview of the XHTML structure (fe_page.tpl):
1 <body id="top">
2 <div id="wrapper">
3
4 <div id="header">
5 <div class="inside">
6 <!-- HEADER CONTENT -->
7 </div>
8 </div>
9
10 <div id="container">
11
12 <div id="left">
13 <div class="inside">
14 <!-- LEFT COLUMN -->
15 </div>
16 </div>
17
18 <div id="right">
19 <div class="inside">
20 <!-- RIGHT COLUMN -->
21 </div>
22 </div>
23
24 <div id="main">
25 <div class="inside">
26 <!-- MAIN COLUMN -->
27 </div>
28 <div id="clear"></div>
29 </div>
30
31 </div>
32
33 <div id="footer">
34 <div class="inside">
35 <!-- FOOTER CONTENT -->
36 </div>
37 </div>
38
39 </div>
40 </body>As you can see, each column now has an additional wrapper called inside that is required to fix various bugs. You can also use it to apply margin values or borders that do not break the layout anymore.
Let's take a look at the style sheet (system/typolight.css).
1 /* Layout sections */
2 #left { float:left; }
3 #right { float:right; }
4 #main { width:auto; position:relative; }
5 .inside { position:relative; text-align:left; }As you can see, the left and right column is floated. The main column, however, remains a static column that is automatically expanded. Additional style definitions inside the head section of each page complete those classes:
1 #left { width:220px; }
2 #right { width:18em; }
3 #main { margin-left:220px; margin-right:18em; }Note that the main column has a left and right margin that equals the width of those columns. It is not necessary to assign a width value to the main column anymore.
To transform a liquid design into a static design, you only have to assign a width value to the surrounding container (#wrapper). You do not have to change anything else! Can it get any easier than that?
Since the main column remains a static column, we cannot use clear:both; more than once at the very end of it. However, we want to use floating elements inside this column as well - just think about adding images to text elements. So we are using another CSS hack to clear floating without using clear:both.
1 .block { overflow:hidden; }This simple command does exactly what we need. We only have to make sure that all modules and content elements use this class! Therefore, I have modified most of the template files and added this class to the surrounding container.
If you are using custom templates, make sure that you add this class to them as well! In addition, remove all clearing containers (<div class="clear"></div>) from your templates.
There have been a few changes to custom layout sections as well. Here is how the XHTML code looks:
1 <div id="main">
2 <div class="inside">
3 <!-- MAIN COLUMN -->
4 </div>
5
6 <div class="custom">
7 <div class="section_1"><!-- CUSTOM SECTION 1 --></div>
8 <div class="section_2"><!-- CUSTOM SECTION 2 --></div>
9 </div>
10
11 <div id="clear"></div>
12 </div>As you can see, custom layout sections are now wrapped in a surrounding container called custom. This container is used to clear floating and to apply a few Internet Explorer bug fixes.
The new approach of the CSS framework also affects the layout module. It is now even more intuitive and pretty much self-explaining. The downside is that your existing layouts are not compatible anymore.
Therefore, you have to run a new tool called layout merger after the next live update!
The layout merger updates your existing layouts to be used with the new framework. Once your layouts are up to date, you can remove the deprecated fields from your tables. It will not be done by the update script this time.
If you are not being redirected by the update script, you can open the layout merger manually. First of all, make sure that you are logged in into the back end (otherwise you will only get a blank page). Then open
http://www.yourdomain.com/typolight/layout.php
and follow the instructions provided.
Due to some changes in the accessibility guidelines, it is now possible to nest lists in a more "logical" way. There have been some request in the forum as well (see this thread).
Here's how the navigation menu looks prior to version 2.3.2:
1 <ul class="level_1">
2 <li><a href="xxx">Home</a></li>
3 <li class="parent trail"><a href="xxx">Portfolio</a></li>
4 <li class="submenu">
5 <ul class="level_2">
6 <li><a href="xxx">Project 1</a></li>
7 <li class="parent trail"><a href="xxx">Project 2</a></li>
8 <li class="submenu">
9 <ul class="level_3">
10 <li class="active"><p class="active">Information</p></li>
11 <li><a href="xxx">Screenshots</a></li>
12 </ul>
13 </li>
14 </ul>
15 </li>
16 </ul>From version 2.3.2, the navigation menu will be rendered as:
1 <ul class="level_1">
2 <li><a href="xxx">Home</a></li>
3 <li class="submenu trail"><a href="xxx">Portfolio</a> <!-- no more closing tag here -->
4 <ul class="level_2">
5 <li><a href="xxx">Project 1</a></li>
6 <li class="submenu trail"><a href="xxx">Project 2</a> <!-- no more closing tag here -->
7 <ul class="level_3">
8 <li class="active"><p class="active">Information</p></li>
9 <li><a href="xxx">Screenshots</a></li>
10 </ul>
11 </li>
12 </ul>
13 </li>
14 </ul>One of the major advantages is that the navigation menu is now rendered properly in all browsers and that you can now use scripts like "son of suckerfish" (see this thread).
--- Article created by Leo
This tutorial shows how to natively implement FreeStyle Menus from TwinHelix into TYPOlight. The script is available from "and it is important that the license agreement is adhered to. This tutorial is a compilation of all tips and discussion posted in this thread of the TYPOlight forum - http://www.typolight.org/forum/message/11957.html.
1 <?php if ($this->level=="level_1"): ?>
2 <?php if ($this->type == 'mod_navigation'): ?>
3 <ul class="menulist" id="listMenuRoot">
4 <?php else: ?>
5 <ul class="menulist" id="listMenuRoot">
6 <?php endif;?>
7 <?php else: ?>
8 <ul class="<?php echo $this->level; ?>">
9 <?php endif;?>
10 <?php foreach ($this->items as $item): ?>
11 <?php if ($item['isActive']): ?>
12 <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
13 <?php else: ?>
14 <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
15 <?php endif; endforeach; ?>
16 </ul>1 .inside { position:relative; text-align:left; }to be
1 .inside { /* position:relative; */ text-align:left; }This fixes an issue where the pop-up menu is hidden in Internet Explorer under #main layer, but not in FireFox.
1 .block { overflow:hidden; }to be
1 /*.block { overflow:hidden; }*/Without this change a popup window from menu is hidden. Maybe there are other ways that prevent this problem, although this solution works fine. It is important to realize that this change may be overwritten upon updating TYPOlight to a new version.
As an alternative to making these changes in typolight.css, you can override them by adding the following selectors to a style sheet used on the pages that have FSMenu:
1 .block {overflow:visible !important;}
2 .inside {position:static !important;}From the TYPOlight backend go to Layout > Page layouts and add the following in "Additional <head> tags":
1 <script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu.js"></script>
2 <script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu_data.js"></script>
3 <link rel="stylesheet" type="text/css" id="listmenu-h" href="tl_files/scripts/fsmenu/listmenu_h.css" title="Horizontal 'Earth'" />There is a discussion thread regarding the implementation of FreeStyle Menus in TYPOlight at http://www.typolight.org/forum/topic/2026.html.
If you are using SMTP as your mail sending engine, this hack it not necessary.
I've setup my website with a contact form using TYPOlight's form generator. The contact form does send an e-mail to the admin recipient, but no matter what I do, the e-mail is NOT copied cc: to the end-user. What's the problem doctor?
You aren't doing any wrong. Its the way TYPOlight uses its plugin for e-mail. Its default is set to use mail, but this program doesn't support CC: fields in the e-mail header. You need to switch to sendmail when you've got a CC:. This can be done using the hack below.
A refresher tutorial on how to ensure you're set-up the Contact form correctly, can be found in the [TutorialsFormContact Contact Form] Tutorial.
This hack will permanently enable CC's for your installation, provided you have php access to the sendmail linux program.
Always create backup files of any TYPOlight core system or plug-in files, if you plan to modify them. That way you can undo the changes easily.
Create a backup of and then edit the following TYPOlight system library file:
system/libraries/Email.phpMake the following changes:
// Carbon copy1 // Carbon copy
2 foreach ($this->arrCc as $strRecipient)
3 {
4 $objMail->addCC($strRecipient);
5 $objMail->IsSendmail(); // added by Thyon Design
6 }Modifying TYPOlight plugins or other core system files is NOT recommended. When you update your installation, ensure that you re-do this hack, as the installation files will be rewritten, undoing your hack.
This line only changes the default sending program from mail to sendmail when you add any cc: fields in TYPOlight. This is required, because the default mail program cannot handle cc: header fields.
--- Tutorial created by thyon design
(Für Dummys. Von einem Dummy.)
In diesem Tutorial möchte ich meine eigenen Übungsschritte zu einem simplen Modul und dem Umgang mit dem Modul Creator zeigen.
Ich wende mich in erster Linie an blutige Anfänger (so, wie ich es zum Zeitpunkt der Entstehung dieses Tutorials bin), setze jedoch voraus, dass Du Folgendes kannst:
Ausserdem sollten PHP und OOP keine Parteien sein, die Du auf dem Wahlzettel zur nächsten Landtagswahl suchst.
Der Module Creator nimmt Dir sehr viel Arbeit ab, wenn Du ihm sagst, was Du machen willst:
Sprich: Aus Deinen Vorgaben wird ein Grundgerüst für Dein neues Modul. In diesem Beispiel erstelle ich ein Modul mit dem Namen "testmodul" im Verzeichnis "mein_test". Dieses Modul wird "Hallo Welt" ausgeben. Mehr nicht.
Da wir nur eine Ausgabe im Frontend erzeugen, brauchen wir auch nur ein Frontend Modul. Im Module Creator sieht das in etwa so aus:
Von oben nach unten:
Markiere das Häkchen bei "*Ein Frontend Modul hinzufügen*". Du bekommst neue Eingabefelder angezeigt.
Im Module Creator wird jetzt Dein neues Modul angezeigt. Bisher sind nur die Vorgaben dafür gespeichert, Dateien wurden noch nicht erzeugt - das machen wir jetzt. Klicke auf das grüne Häkchen:
Du wirst aufgefordert, die Dateien anzulegen:
Das war die Vorbereitung. Das Grundgerüst des Moduls ist erzeugt, jetzt geht´s an die Anpassung in PHP 8-)
Du findest die erzeugten Dateien im TYPOlight Ordner unter "system\modules\mein_test".
Die Ordnerstruktur sollte so aussehen:
Wir fangen wieder von oben an - öffne die Datei "config\config.php", und lass Dich nicht verwirren - da ist alles auskommentiert. In dieser Datei tragen wir ein, wie das Frontend Modul heisst, und welche Klassendatei diesem Modul zugeordnet ist. Such die Stelle, die mit "Front End Modules" bezeichnet ist:
1 <?php
2 /**
3 * -------------------------------------------------------------------------
4 * FRONT END MODULES
5 * -------------------------------------------------------------------------
6 *
7 * List all fontend modules and their class names.
8 *
9 * $GLOBALS['FE_MOD'] = array
10 * (
11 * 'group_1' => array
12 * (
13 * 'module_1' => 'Contentlass',
14 * 'module_2' => 'Contentlass'
15 * )
16 * );
17 *
18 * Use function array_insert() to modify an existing CTE array.
19 */
20 ?>Diesen Bereich ändern wir jetzt so:
1 <?php
2 /**
3 * -------------------------------------------------------------------------
4 * FRONT END MODULES
5 * -------------------------------------------------------------------------
6 *
7 * List all fontend modules and their class names.
8 */
9 array_insert($GLOBALS['FE_MOD']['miscellaneous'], 0, array
10 (
11 'Hallo Welt' => 'output')
12 );
13
14 /**
15 * Use function array_insert() to modify an existing CTE array.
16 */
17 ?>Kurze Erklärung der an array_insert() übergebenen Parameter:
Als nächstes öffne die Datei output.php. Neben vielen Kommentaren findest Du hier die Klasse output mit der Methode compile():
1 <?php
2 class output extends Module
3 {
4
5 /**
6 * Template
7 * @var string
8 */
9 protected $strTemplate = @;
10
11 /**
12 * Generate module
13 */
14 protected function compile()
15 {
16
17 }
18 }
19 ?>Die Variable $strTemplate bezeichnet die Templatedatei, mit der für dieses Modul die Ausgabe formatiert wird. In diesem Fall liegt diese Templatedatei unter templates/view_output.php. TYPOlight gibt sich hier mit Angabe des Dateinamens OHNE Dateiendung zufrieden, also:
1 <?php protected $strTemplate = 'view_output'; ?>Die Methode compile() ist noch leer. Wir sorgen jetzt dafür, dass sie etwas zu tun bekommt:
1 <?php
2 protected function compile()
3 {
4 $foo = 'HALLO WELT!';
5 $this->Template->hallo_welt = $foo;
6 }
7 ?>Mit $foo legen wir fest, was ausgegeben werden soll. $this->Template->hallo_welt = $foo. Hier weisen wir der Eigenschaft "hallo_welt" den Ausgabewert zu. Diese Eigenschaft wird dann im Template eingebaut.
Diese Datei ist komplett leer. Für unsere Zwecke reicht es aus, eine einzige Zeile einzufügen:
1 <?php echo $this->hallo_welt; ?>Hier ist aus $this->Template->hallo_welt der Wert $this->hallo_welt geworden. In dieser Datei sind PHP, HTML, Java etc. möglich.
Tja...
Das war es. Extensions für TYPOlight in a Nutshell. Viel Erfolg beim Einstieg!
--- Tutorial erstellt von RockRebell
This tutorial covers how to create a new TYPOlight template in one installation and import this template to another installation. Don't worry it's easy.
First of all, create a new (default) installation of TYPOlight. Now you can create the root page, subpages, layouts and modules. Upload all of the necessary files (images, css files) to the tl_files folder, and if you use *.tpl files, upload them to the templates folder. Of course, you can also customize your settings and create the necessary users.
This is the first step in preparing a new template to share with other TYPOlight installations. Most TYPOlight installations use a MySql database. The most popular application to manage MySql databases is phpMyAdmin. When you log into phpMyAdmin, you have to export the database as a .sql file. To do this, select the TYPOlight database and click the Export tab. There are a few export options. Note that you only need to export the TYPOlight tables from the database, so only select the tables starting with tl_.
The options in red frames must be off (in default these options are on). Save the sql file on your local computer and rename this file to
name_of_your_template.sql
To reduce the size of the sql file before exporting the database you can erase all system logs and delete all undo items in the TYPOlight backend.
Now we want to import our new template to another installation. So, we prepare a new installation and upload our sql file to the template folder and all necessary files (images, css and tpl files).
Next, open the TYPOlight installation page.
http://www.your-domain.com/typolight/install.php
Follow the instructions at the Import a template section. Now choose a new template to import directly to the new installation. Select your sql file and press the Import template button.
Now the new installation is ready to use with the imported template.
--- Tutorial created by qrczak
Alle Bilder, die für die Navigation benötigt werden - also alle Menüpunkte inklusive dem Hover-Zustand - müssen in einem Bildbearbeitungsprogramm erstellt werden. Alle Menüpunktgrafiken sollten die gleiche Größe besitzen - ebenso ist pixelgenaues Arbeiten wichtig. Sinnvoll ist auch, die Bezeichnung der Menüpunktgrafiken gleich dem Menüpunkt zu benennen.
Beispiel: Startseite-> "startseite.gif".
Für die Navigation mit 2 Zuständen wird eine sogenannte "Spritegrafik" eingesetzt. Hier werden die beiden Menüzustände innerhalb einer Grafik erstellt. Wird nun der Navigationspunkt mit der Maus berührt (mouseover / rollover) verschiebt man mit CSS nur die Koordinaten der Grafik, um den geänderten Menüpunktzustand sichtbar zu machen.
Vorteil, es muss nur eine Grafik pro Menüpunkt geladen werden und der "rollover"-Zustand steht sofort zur Verfügung. Zudem verhindert diese Methode das "Flackern" beim Rollover durch das Verzögern des Nachladens der Grafiken, wenn für den Normalzustand und den Rolloverzustand einzelne Grafiken geladen werden. Am einfachsten erstellt man die Grafiken nach dem immer gleichen Prinzip; d.h. die Grafiken für die unterschiedlichen Menüpunktzustände werden entweder neben- oder untereinander angeordnet.
Die Grafik ist 150 Pixel breit und 60 Pixel hoch (30 + 30 Pixel = Normal- plus Hoverzustand)
In der Seitenstruktur vergibt man für jeden Eintrag die CSS-Klasse entsprechend der Menübezeichnung. Somit kann später jedem Menüpunkt eine eigene Grafik zugewiesen werden.
Für alle Seiten innerhalb der Seitenstruktur werden die entsprechenden CSS-Klassen eingesetzt.
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{margin:0;
padding:0;
}
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/startseite.gif) no-repeat top left;
}
#left .mod_navigation .startseite a:hover
{
background:url(tl_files/menue/startseite.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.startseite.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/startseite.gif) no-repeat 0 -30px;
}
Für jeden Link wird die Höhe des Elements (hier im Beispiel: 30px) definiert. Mit der Eigenschaft "text-indent:-3000px;" wird der normale Textlink 3000 Pixel nach links ausserhalb des Browserfensters verschoben und somit optisch unsichtbar. Für den Normalzustand des Menüpunktes sitzt die Hintergrundgrafik auf den Koordinaten 0 0 (oder left top). Für den Hover- und Aktivzustand wird die Hintergrundgrafik um 30 Pixel nach oben (-30px) verschoben, da die Grafik so angelegt wurde, dass der aktive Teil unter dem des normalen Zustandes angeordnet ist.
Darstellung im Browser:
/* Definition Menue */
#left .mod_navigation
{
width:150px;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{
margin:0;
padding:0;
}
/* Definition Startseite */
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/startseite.gif) no-repeat top left;
}
#left .mod_navigation .startseite a:hover
{
background:url(tl_files/menue/startseite.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.startseite.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/startseite.gif) no-repeat 0 -30px;
}
/* Definition Referenzen */
#left .mod_navigation .referenzen a,
#left .mod_navigation .referenzen a:link,
#left .mod_navigation .referenzen a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/referenzen.gif) no-repeat top left;
}
#left .mod_navigation .referenzen a:hover
{
background:url(tl_files/menue/referenzen.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.referenzen.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/referenzen.gif) no-repeat 0 -30px;
}
/* Definition Portfolio */
#left .mod_navigation .portfolio a,
#left .mod_navigation .portfolio a:link,
#left .mod_navigation .portfolio a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/portfolio.gif) no-repeat top left;
}
#left .mod_navigation .portfolio a:hover
{
background:url(tl_files/menue/portfolio.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.portfolio.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/portfolio.gif) no-repeat 0 -30px;
}
/* Definition Kontakt */
#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt a:link,
#left .mod_navigation .kontakt a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/kontakt.gif) no-repeat top left;
}
#left .mod_navigation .kontakt a:hover
{
background:url(tl_files/menue/kontakt.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.kontakt.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/kontakt.gif) no-repeat 0 -30px;
}
Die Schreibweise lässt sich noch weiter reduzieren / vereinfachen, in dem die CSS-Definitionen wie folgt angepasst werden: Diese vereinfachte / zusammenfassende Schreibweise funktioniert bei Spritegrafiken mit 2 Zuständen und gleichen Größen. Danke für den Tipp Nina :-)
/* Definition Menue */
#left .mod_navigation {
width:150px;
}
#left .mod_navigation ul {
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li {
margin:0;
padding:0;
}
#left .mod_navigation a,
#left .mod_navigation span {
height:30px;
display:block;
text-indent:-3000px;
background-repeat: none;
}
#left .mod_navigation a:link,
#left .mod_navigation a:visited {
background-position: top left;
}
#left .mod_navigation a:hover,
#left .mod_navigation a:focus,
#left .mod_navigation a:active,
#left .mod_navigation span {
background-position: 0 -30px;
}
/* Definition der einzelnen Bilder */
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite span {
background-image: url(tl_files/menue/startseite.gif);
}
#left .mod_navigation .referenzen a,
#left .mod_navigation .referenzen span {
background-image: url(tl_files/menue/referenzen.gif);
}
#left .mod_navigation .portfolio a,
#left .mod_navigation .portfolio span {
background-image: url(tl_files/menue/portfolio.gif);
}
#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt span {
background-image: url(tl_files/menue/kontakt.gif);
}
Um eine Sprite-Navigation aus einer Grafik für das Menü zu nutzen, wird eine komplette Menügrafik erstellt: Diese sieht dann so aus:
Die Grafik ist nun 600 Pixel breit (4 x 150px) und 60 Pixel hoch (30 + 30 Pixel = Normal- plus Hoverzustand). Die jeweiligen Zustände des Menüs werden erneut durch das Verschieben der Koordinaten erreicht. Hierzu wird dann nur noch eine Grafik geladen anstatt wie im oberen Beispiel 4 Grafiken.
Beispiel Menüpunkt Referenzen:
#left .mod_navigation
{
width:150px;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{
margin:0;
padding:0;
}
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat top left;
}
#left .mod_navigation .startseite a:hover
{
background:url(tl_files/menue/menue.gif) no-repeat 0 -30px;
}
#left .mod_navigation li.startseite.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat left -30px;
}
#left .mod_navigation .referenzen a,
#left .mod_navigation .referenzen a:link,
#left .mod_navigation .referenzen a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -150px 0;
}
#left .mod_navigation .referenzen a:hover
{
background:url(tl_files/menue/menue.gif) no-repeat -150px -30px;
}
#left .mod_navigation li.referenzen.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -150px -30px;
}
#left .mod_navigation .portfolio a,
#left .mod_navigation .portfolio a:link,
#left .mod_navigation .portfolio a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -300px 0;
}
#left .mod_navigation .portfolio a:hover
{
background:url(tl_files/menue/menue.gif) no-repeat -300px -30px;
}
#left .mod_navigation li.portfolio.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -300px -30px;
}
#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt a:link,
#left .mod_navigation .kontakt a:visited
{
height:30px;
display:block;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -450px 0;
}
#left .mod_navigation .kontakt a:hover
{
background:url(tl_files/menue/menue.gif) no-repeat -450px -30px;
}
#left .mod_navigation li.kontakt.active
{
height:30px;
text-indent:-3000px;
background:url(tl_files/menue/menue.gif) no-repeat -450px -30px;
}
/* Definition Menue */
#left .mod_navigation
{
width:150px;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{
margin:0;
padding:0;
}
#left .mod_navigation a,
#left .mod_navigation span
{
height:30px;
display:block;
text-indent:-3000px;
background-repeat: none;
}
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat top left;
}
#left .mod_navigation .startseite a:hover,
#left .mod_navigation .startseite a:focus,
#left .mod_navigation .startseite a:active,
#left .mod_navigation .startseite span
{
background:url(tl_files/menue/menue.gif) no-repeat 0 -30px;
}
#left .mod_navigation .referenzen a,
#left .mod_navigation .referenzen a:link,
#left .mod_navigation .referenzen a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -150px 0;
}
#left .mod_navigation .referenzen a:hover,
#left .mod_navigation .referenzen a:focus,
#left .mod_navigation .referenzen a:active,
#left .mod_navigation .referenzen span
{
background:url(tl_files/menue/menue.gif) no-repeat -150px -30px;
}
#left .mod_navigation .portfolio a,
#left .mod_navigation .portfolio a:link,
#left .mod_navigation .portfolio a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -300px 0;
}
#left .mod_navigation .portfolio a:hover,
#left .mod_navigation .portfolio a:focus,
#left .mod_navigation .portfolio a:active,
#left .mod_navigation .portfolio span
{
background:url(tl_files/menue/menue.gif) no-repeat -300px -30px;
}
#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt a:link,
#left .mod_navigation .kontakt a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -450px 0;
}
#left .mod_navigation .kontakt a:hover,
#left .mod_navigation .kontakt a:focus,
#left .mod_navigation .kontakt a:active,
#left .mod_navigation .kontakt span
{
background:url(tl_files/menue/menue.gif) no-repeat -450px -30px;
}
--- Tutoral erstellt von planepix, 07.06.2009
Thread im Forum zu dem Tutorial
Abkürzungen:
FE = Frontend (die Internetseite aus User Sicht)
BE = Backend (die Administrationsoberfläche)
Hier geht es nur um die Einstellungen im Backend. Das Design (CSS) oder zusatzfunktionen (JavaScript) müsst Ihr selber erstellen. Dazu gibt es genügend Internetseiten zu finden über die Suchmaschine deines Vertrauens. Um es euch einfacher zu machen: Nutzt die Klassen von TYPOlight, ändert die Templates nur im Notfall, wenn es wirklich nicht anders geht. Ansonsten hat TL alle Klassen in einer Navigation die man brauchen kann:
Zusätzlich kann man noch unter Seitenstruktur den einzelnen Seiten und Navigationspunkten eine extra Klasse vergeben.
Seit einiger Zeit sind die Module "Navigation Hauptpunkte" und "Navigation Unterpunkte" nicht mehr nötig. In TYPOlight 2.7 werden diese sogar ganz entfernt. Man nutzt nun immer das Modul "Navigationsmenü" mit den folgenden verschiedenen Einstellungsarten:
Was diese Einstellungen bewirken, werde ich hier an einer Beispielseite zeigen.
Ich gehe davon aus, dass schon ein Seitenlayout, eine Seitenstruktur und verschiedene Module vorhanden sind, wie man dieses macht, kann man in anderen Tutorials lesen oder sehen.
Die Seite ist in 5 Bereiche unterteilt:
Die Seitenstruktur besteht aus 3 Ebenen und einem zusätzlichen Bereich Service_Navi. Die Service_Navi ist im Menü ausgeblendet, damit diese nicht im Hauptmenü angezeigt wird.
Die Seiten sind zum leichteren Verständnis so bennant, dass zuerst die Ebene und dann der Menüpunkt im Seitennamen stehen.
Ebene 1 hat also 4 Menüpunkte (Ebene_1 Punk_1 / Ebene_1 Punk_2 / Ebene_1 Punk_3 / Ebene_1 Punk_4).
Unter Ebene_1 Punk_2 sind weitere Menüpunkte angelegt (Ebene_2 Punk_1 / Ebene_2 Punk_2 / Ebene_2 Punk_3 / Ebene_2 Punk_4).
Und so weiter …
In diesem Beispiel habe ich 4 Module angelegt.
Die Standardeinstellung sieht wie folgt aus:
| Startlevel | Stoplevel | Hard Limit | Referenzseite festlegen |
| 0 | 0 | Nein | keine angegeben |
Diese Einstellungen ergeben dieses Bild im FE - Ansicht nur für das Hauptmenü:
Der Stoplevel legt fest bis zu welchem Level die Menüpunkte angezeigt werden. Was bedeutet das nun? In der Regel möchte man ein Menü mit vielen Unterpunkten nicht direkt dem User zumuten, daher zeigt man ihm nur einen Teil der Seiten und erst später mehr. Typischerweise ist es so, das man erst die 2. Ebene sieht, wenn man auf einen Punkt der 1. Ebene geklickt hat usw.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 1 | Nein | keine angegeben |
Diese Einstellungen ergeben dies im FE:
Wir sind hier auf der Seite Ebene1_Punk1 und sehen nur die Hauptpunkte der Navigation
Wir sind hier auf der Seite Ebene1_Punk2 und sehen die Unterpunkte von Punkt2 sowie die Menüpunkte der Ebene 1 darüber.
Und so geht es weiter, wenn wir dann in Ebene 2 auf Punkt 2 sind.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 2 | Nein | keine angegeben |
Jetzt wird im FE die 1. und die 2. Ebene angezeigt. Der Rest ist wie bei Stoplevel 1. Und so geht es weiter, daher lasse ich jetzt an der Stelle weitere Beispiele weg.
Der Startlevel legt fest, ab welchem Level die Menüpunkte angezeigt werden. Genau diese Einstellung brauchen wir, um zum Beispiel ein Untermenü (früher das Modul "Navigation Untermenü") zu erstellen.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 1 | 0 | Nein | keine angegeben |
Im FE sieht das dann so aus:
Ab Level 1 bedeutet also, dass das Menü erst angezeigt wird, wenn wir in Ebene 1 in einem Punkt sind der Unterpunkte hat -
hier in dem Beispiel also auf Seite Ebene1_Punk2 (in der oberen Navigation zu sehen). Alles, was darunter ist, wird angezeigt - hier in der linken Hauptnavigation, so wie es gerade eingestellt wurde. Wenn man also in Ebene1_Punk4 ist, werden alle Unterpunkte unter Punkt 4 der 1. Ebene angezeigt und so weiter.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 2 | 0 | Nein | keine angegeben |
FE:
Erst wenn Unterpunkte unter Ebene 2 vorhanden sind, wird jetzt das Menü angezeigt - hier in dem Fall bei der Seite Ebene2_Punk2.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 3 | 0 | Nein | keine angegeben |
Und so geht es wieder weiter. Bei Startlevel 3 wird uns das Menü erst angezeigt, wenn unter Ebene 3 noch weitere Unterpunkte sind...
"Eine Referenzseite als Quell- oder Zielseite des Moduls festlegen." Mit der Referenzseite legt mal fest, was der Startpunkt der Navigation ist. Sobald man eine Referenzseite festgelegt hat funktioniert das Startlevel nicht mehr! Das bildet dann also immer die Ebenen direkt ab der Referenzseite ab.
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 0 | Nein | Seite Ebene1_Punk2 |
Jetzt wird unsere Navigation immer die Unterpunkte von Seite Ebene1_Punk2 anzeigen, auch wenn wir auf der Seite Ebene1_Punk1 sind oder irgendwo anderes. Das ist also eine einfache Möglichkeit, so etwas wie eine Service Navigation (mit immer den gleichen Seiten wie Kontakt / Impressum o.ä.) anzulegen. Wenn ich nun dem Modul TL-test_Headernavi die Referenzseite "Service Navi" gebe,
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 0 | Nein | Seite "Service Navi" |
bekomme ich im FE diese Ausgabe:
Theoretisches Beispiel
Wenn wir jetzt eine Internetseite mit 3 Navigationen haben, die gleichzeitig angezeigt werden sollen, kann man also im BE unter der Seitenstruktur 3 verschiedene Seiten anlegen: Menue1 / Menue2 / Menue3, und dann unter diesen Seiten die jeweils gewünschten Unterseiten. Nun legt man 3 Module an, jedes Modul mit einer anderen Referenzseite (Modul1 -> Menue1 etc.). Und schon haben wir auf unserer Internetseite 3 komplett verschiedene Navigationen, die sich nicht gegenseitig beeinflussen.
Das Hard Limit legt fest, das keine Menüpunkte (auch keine aktiven Menüpunkte) jenseits des Stoplevels angezeigt werden. Was soll das nun wieder? Wenn wir das Hard Limit einschalten ohne irgendwelche anderen Parameter beim Stoplevel, ändert sich unsere Anzeige überhaupt nicht im Vergleich zu dem Beispiel ohne eingeschaltetes Hard Limit (s.o.).
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 0 | Ja | keine angegeben |
Das Hard Limit ergibt nur einen Sinn im Zusammenhang mit einem zugewiesenen Stoplevel!
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 1 | Ja | keine angegeben |
Jetzt bewirkt das Hard Limit, das keine Seiten unterhalb des Stoplevels angezeigt werden. Hier in dem Beispiel wird nur Ebene 1 angezeigt, auch wenn wir in der Struktur eine oder zwei Ebenen tiefer sind. Das Menü erweitert sich also nicht mehr beim Navigieren.
So kann man dann auch das Modul "Navigation Hauptpunkte" nachbilden.
(Wie sie jetzt gerade auch im Bild oben bei der Headernavi zu sehen ist.)
| Hauptmenü | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 1 | Ja | keine angegeben |
| Untermenü | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 1 | 1 | Nein | keine angegeben |
| Service Navigation | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 1 | Ja | Service Navi |
Das ist eine der häufigsten Verwendungen:
| Hauptmenü | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 1 | Nein | keine Angegeben |
| Untermenü | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 3 | 1 | Nein | keine Angegeben |
1 #left ul li ul li ul li ul li {
2 position: absolute;
3 top: -1000em;
4 left: -1000em;
5 height: 1px;
6 width: 1px;
7 }| Hauptmenü | |||
| *Startlevel * | *Stoplevel * | *Hard Limit * | Referenzseite festlegen |
| 0 | 2 | Ja | keine Angegeben |
So hat man dann ein Menü was man per CSS (und ein wenig JavaScript) zum Ausklappmenü machen kann. Hier nur bis Ebene 2 und nicht mehr. Für mehr Ebenen einfach den Stoplevel hochsetzen.
--- Tutorial erstellt von MacKP
By default, TYPOlight only supports numeric date formats like 2009-02-25 or 02/25/09. The problem with textual representations of days or months in PHP is that they are only available in the language of the server operating system. You can switch the server locale in PHP (see http://www.php.net/setlocale), however, it will affect the whole system (!) and not just the requested page, so that is surely not a useful solution for multilingual pages.
From version 2.7, TYPOlight supports textual dates in the front end and in all custom modules and templates. All you have to do is to call $this->parseDate($format) instead of date($format). You do not need the workaround described below.
The TYPOlight language files include labels for days and months, which are e.g. used in the news archive menu. They can be used there, because the date format in this module never changes. In a news list, however, the date format is user-definable, so we have to add the translation manually if we want a textual representation of the date.
First of all, we have to set up a news list module and define the date format. It is important to set a numeric representation here, because we will be using it as an array key later on. In this example, I am going to make TYPOlight output the month name and the year (e.g. February 2009), so I use n to get a numeric representation of the month without leading zeros. You can use N to do the same for the day of the week.
Now that the news list module generates the correct date format, all we have to do is to modify the template. Open the template editor and copy the news template you are using (in this example, I am using news_latest.tpl).
Once you have created a local copy, click the navigation icon to edit the template.
In the template, the date is stored as $this->date. To override the month, we have to split the date string first.
1 <?php
2 list($month, $year) = explode(' ', $this->date);
3 ?>Now $month is a numeric representation of the month and $year a numeric representation of the year. As I said at the beginning of the tutorial, we will now use $month as an array key to get the textual representation of the month.
1 <?php
2 $this->date = $GLOBALS['TL_LANG']['MONTHS'][($month - 1)] . ' ' . $year;
3 ?>I am using ($month - 1) because months start with 1 but arrays start with 0.
As you can see, it only takes two lines of PHP code to get a textual representation of a date.
1 <?php
2 list($month, $year) = explode(' ', $this->date);
3 $this->date = $GLOBALS['TL_LANG']['MONTHS'][($month - 1)] . ' ' . $year;
4 ?>From version 2.7, all you have to do is to write $this->parseDate('n Y', $this->timestamp).
Insert the snippet at the top of your news template.
Now TYPOlight should translate the month name correctly.
--- Tutorial created by Leo
Einrichtung einer lokalen Entwicklungsumgebung mit XAMPP für mehrere parallele oder mehrsprachige TYPOlight Installationen.
Als erstes installiert man ein XAMPP Paket. 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.
Den Installationsort lasse ich auf C:\xampp, welchen ich auch empfehle. Gerade bei Verzeichnissen mit Leer- oder Sonderzeichen (C:\Program Files\xampp) könnte es später zu Problemen kommen. Nach der Installation findent man "XAMPP Control Panel" auf dem Desktop oder im Startmenü, worüber sich die Server starten und beenden lassen.
Ruft man jetzt http://localhost 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:
Wichtig ist hier nur, dass MySQL und PHP AKTIVIERT ist. Der Menüpunkt phpinfo() gibt uns viele Informationen über die installierte PHP-Version und deren Module, hier sollte eine Version ab 5.2 zu sehen sein.
Zum Schluss sollte man noch über die Seite http://localhost/security/xamppsecurity.php 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 … Nun starten wir noch über das XAMPP Control Panel den MySQL-Server neu, damit die Passwortänderung wirksam wird.
C:\xampp\htdocs\typolight entpacken.http://localhost/phpmyadmin/ eine neue Datenbank anlegen und natürlich auch einen neuen Benutzer. Aus Sicherheitsgründen sollte man den ROOT-Zugang nicht verwenden. Über den Reiter Rechte kommt man zur Benutzerübersicht und darunter ist ein 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.http://localhost/typolight/typolight/install.php begonnen werden.
Im Grunde könnte man auf diese Art beliebig viele TYPOlight-Umgebungen parallel betreiben, natürlich in jeweils verschiedenen Verzeichnissen. Hier bestehen aber zwei grundsätzliche Probleme:
Um die oben genannten Probleme zu beheben, kann für jede TYPOlight 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.
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
C:\WINDOWS\system32\drivers\etc\/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.
Öffnet man nun eine der neu angelegten Hostnamen im Browser, z.B. http://xampp, dann sollte die gleiche Ausgabe wie bei Aufruf von http://localhost erscheinen. Bei der Wahl der Hostnamen sollte man darauf achten, dass keine Überschneidung mit reell existierenden Domains entstehen. Trägt man Beispielweise 127.0.0.1 www.typolight.org in die hosts-Datei ein, wird man von nun ab den lokalen Webserver unter der Adresse www.typolight.org erreichen, und nicht mehr die TYPOlight-Website.
Es gibt einige spezielle hosts-Editoren die das Editieren erleichtern sollen, Google weiß mehr darüber.
Um die verschiedenen Hostnamen den unterschiedlichen TYPOlight-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:\xampp\apache\conf\extra\httpd-vhosts.conf bereit, die ebenfalls per Editor bearbeitet wird.
Ich nutze die Gelegenheit, um das htdocs-Verzeichnis mit den TYPOlight-Dateien an einen anderen Ort zu legen: C:\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.
# # Use name-based virtual hosting. # NameVirtualHost *:80
Die Zugriffsrechte für das Web-Verzeichniss schränken wir entsprechend ein:
# Zugriff auf das webfiles-Verzeichnis nur vom lokalen Rechner zulassen
<Directory C:/webfiles>
Order deny,allow
Allow from 127.0.0.1
AllowOverride All
</Directory>
Jetzt erstellen wir den ersten vHost-Eintrag. Diesen benutzen wir 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 http://verzeichnis.local/index.php auf die Datei C:\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.
### Default vHost
<VirtualHost *:80>
DocumentRoot C:/webfiles
ServerName localhost
<Directory C:/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:/webfiles/neu
UseCanonicalName Off
RewriteEngine On
RewriteCond %{HTTP_HOST} ^[^.]+\.local$
RewriteCond %{REQUEST_URI} !^/icons
RewriteRule ^(.+) %{HTTP_HOST}$1 [C]
RewriteRule ^([^.]+)\.local(.*) C:/webfiles/$1$2
</VirtualHost>
Nun wird ein vHost zum Zugriff auf die XAMPP-Weboberfläche erstellt:
### XAMPP vHost
<VirtualHost *:80>
DocumentRoot c:/xampp/htdocs
ServerName xampp
</VirtualHost>
Ein vHost zum Zugriff auf eine TYPOlight-Umgebung:
### typolight vHost
<VirtualHost *:80>
DocumentRoot c:/webfiles/typolight
ServerName typolight
</VirtualHost>
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_).
### multilang vHost
<VirtualHost *:80>
DocumentRoot c:/webfiles/multilang
ServerName multilang
ServerAlias *.multilang
</VirtualHost>
Zusammenfassung der Syntax:
<VirtualHost *:80>-Block pro vHostNatürlich gibts noch eine Vielzahl weiterer Konfigurationsoptionen, diese können in der Apache-Dokumentation nachgelesen werden.
Nachdem die Datei angepasst wurde, wird der Syntax mit apache.exe -S überprüft (unter C:\xampp\apache\bin). Sind keine Fehler aufgetreten, kann der Webserver über das XAMPP Control Panel neugestartet werden.
Jetzt sollten folgende vHost aktiv sein:
http://localhost > C:\webfileshttp://typolight > C:\webfiles\typolighthttp://[ordner].local > C:\webfiles\[ordner], wobei [ordner] belieb sein kann, es darf nur kein Punkt oder Sonderzeichen enthalten sein.http://xampp > C:\xampp\htdocshttp://*.multilang ==> C:\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 TYPOlight-Umgebung referenziert. Damit kann man also mehrspracheige oder mehrseitige Auftritte erstellen.Abschließend werden wir noch ein paar Einstellungen zur Sicherheit vornehmen.
Zugriff von außen sperren
In der Datei C:\xampp\apache\conf\httpd.conf befindet sich bei ungefähr der Zeile 53:
# # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses (0.0.0.0) # #Listen 12.34.56.78:80 Listen 80
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:\xampp\apache\conf\extra\httpd-ssl.conf steht die Einstellung für HTTPS, also verschlüsselte Seiten. Zeile: 37
Listen 443
in
Listen 127.0.0.1:443
ändern.
Auch dem MySQL-Server verbietet man den Zugriff von außen. In die Datei C:\xampp\mysql\bin\my.cnf fügt man folgenden Zeile unter der Sektion [mysqld] ein:
bind-address = 127.0.0.1
Damit sieht die neue Konfigurationsdatei ungefähr so aus:
# The following options will be passed to all MySQL clients [client] # password = your_password port = 3306 socket = "C:/xampp/mysql/mysql.sock" # Here follows entries for some specific programs # The MySQL server [mysqld] port= 3306 socket= "C:/xampp/mysql/mysql.sock" basedir="C:/xampp/mysql" tmpdir="C:/xampp/tmp" datadir="C:/xampp/mysql/data" 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
Ein Neustart des MySQL-Servers macht die Konfiguration aktiv.
Die Datei .htaccess aus dem Basisverzeichnis der TYPOlight-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 (http://localhost/mein_tl/), dann muss die RewriteBase auf /mein_tl/ geändert werden:
# Enable mod_rewrite RewriteEngine On RewriteBase /mein_tl/ …
Damit man auch die Mailfunktionalität von TYPOlight 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:
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:
Analog für den POP3-Server unter Configuration - Mercury POP3 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 TYPOlight 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:
Die XAMPP-Weboberfläche (http://xampp bietet den Menüpunkt Mercury Mail, hier kann man sich über PHP eine E-Mail zustellen um die Konfiguration zu testen.
Der Umzug von TYPOlight auf ein Livesystem gestaltet sich normalerweise sehr angenehm und ist nur mit wenigen Handgriffen zu bewerkstelligen:
Das sollte es schon gewesen sein.
Dieses Tutorial wurde von Psitrax Websolutions erstellt.
Für Fragen, Probleme oder jegliche Anregungen bitte ich um Kontakt.
Sometimes you want to add additional images to your News Story, but that option doesn't exist. This is a quick and very efficient way to create, edit and link your gallery onto a News Story.
This tutorial uses TYPOlight's built-in inserttags. Find out more about them here: http://www.typolight.org/insert-tags.html
Now your article is finished and can be inserted into the end of your news story.
{{insert_article::57}}
If you only need to insert 1 content element within an article, then you can use the following:
{{insert_content::132}}
If your content is contained in a module instead of an article (e.g. you have the module created already) then you can insert the module directly as follows:
{{insert_module::15}}
--- Tutorial created by thyon
Vorab möchte ich mich bei Darki aus dem Forum bedanken der mir mit seinem Post den nötigen Denkanstoß und somit auch die Vorlage zu diesem kleinen Tutorial gegeben hat. Dieses Tutorial ist nur ein Beispiel wie man das ganze realisieren kann.
Unter "habe ich eine Demo Webseite zur Verfügung gestellt auf der man das live testen kann. Die Linke Main Navigation läd über Ajax den Content nach. Für ganz eilige oder faule gibt es am Ende des Tutorials einen Download Link mit der modifizierten fe_page sowie der js Datei.
Die Mootools Funktion die hier als Beispiel dient ist keineswegs Perfekt aber sie erfüllt Ihren Demonstrationszweck.
Was benötige ich um dieses Tutorial zu verstehen?
1. Mootools Basic Kenntnisse, sind von Vorteil. Für alle die dies nachholen wollen gibt es einen (1.2!!!) Einblick im [http://www.mootorial.com/wiki/ Mootorial":http://may17.de/ajaxtest/]
2. Man sollte Wissen wie man Typolight Templates bearbeitet, was eigentlich alle können :)
Jeder der sich bereits an einem Ajax Aufruf in einem Framework wie Typolight versucht hat kennt dieses Problem wahrscheinlich: "Es wird die komplette Seite samt Doctype html, head, body" in den Div geladen. Das liegt daran das wenn man eine url in Typolight in einem Ajax call verarbeitet die fertig gerenderte Page zurückbekommt und nicht den Teil den man gerne hätte.
Wie im Vorwort angekündigt hat darki hierzu eine Lösung in den tiefen des Forums preisgegeben die ich bei meiner intensiven Recherche bei dem Thema gefunden habe. Man fragt im Template einfach ab $_GET['request'] gesetzt ist oder nicht. Wenn er nicht gesetzt ist wird das Template normal ausgegeben, ansonsten nur die gewählte Spalte.
Das bedeutet in der Praxis folgendes:
Man setzt diese Abfrage an den Anfang des Templates:
1 <?php if(!isset($_GET['request'])): ?>Dann kommt das Normale Template:
1 <?php echo $this->doctype; ?>
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <!--
4
5 This website is powered by TYPOlight :: open source web content management system
6 TYPOlight was developed by Leo Feyer (leo@typolight.org) :: released under GNU/LGPL
7 Visit the project website http://www.typolight.org for more information
8
9 //-->
10 <head>
11 <base href="<?php echo $this->base; ?>" />
12 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
13 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
14 <meta name="description" content="<?php echo $this->description; ?>" />
15 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
16 ........ Die weiteren Template Elemente hier..........
17 </body>
18 </html>Am Ende der Abfrage setzt man nun den else Teil:
1 <?php else: echo $this->$_GET['request']; endif; ?>Wenn man nun eine Seite wie z.b. und dahinter ?request=main (Beispiel: /impressum.html?request=main) hängt bekommt man den blanken Inhalt und hat somit die Basis um Content sauber nachladen zu können.
Da wir jetzt die Basis geschaffen haben um Content sauber nachladen zu können ist es an der Zeit uns mit der Ajax Funktion auseinander zusetzen. In meinem Beispiel verwende ich die Standart Klasse von Mootools. Wir legen also folgendes an:
1. eine neue externe Javascript Datei in eurem Template Folder (z.b. tl_verzeichniss/res/js/go_ajax.js)
2. Diese binden wir in unser fe_template das wir benutzen wollen.
Nun zur Tat. Wir öffnen nun unsere neue js file (z.B. go_ajax.js) und erstellen dort unsere Ajax Funktion. Dies könnte wie folgt aussehen:
1 var go_ajax = function() {
2 new Ajax('update url', {
3 method: 'post',
4 update: S('mein_update_div'),
5 onRequest: function() {
6 //Irgendwas was passieren soll wenn der request gestartet wird
7 },
8 onComplete: function(response) {
9 //Irgendwas was passieren soll wenn der request fertig ist
10 }
11 }).request();
12 }Das wäre eine Standart Ajax Funktion die z.b. über onclick angesteuert werden könnte. Da ich onclick aber sehr unsexy finde habe ich folgende Funktion geschrieben:
1 var go_ajax = function (element, updateid, column) {
2 var to_update = $(updateid);
3 $$(element+' a').each(function(el){
4 el.onclick = function() {
5 var url = el.href;
6 var urlextend = url+"?request="+column;
7 var fadeout = to_update.effect('opacity').start(1, 0)
8
9 fadeout.addEvent('onComplete', function(e) {
10 new Ajax(urlextend, {
11 method: 'post',
12 update: to_update,
13 onRequest: function() {
14 },
15 onComplete: function(response) {
16 //location.hash = '#'+escape(url);
17 to_update.effect('opacity').start(0, 1);
18 }
19 }).request();
20 });
21 return false;
22 }
23 });
24 }Hier die Erklärung:
1 var go_ajax = function (element, updateid, column) {Ich definiere eine neue Funktion und gebe ihr die Parameter:
1 var to_update = $(updateid);Ich definiere eine neue variable mit der mootools eigenen getElementById Funktion.
1 $$(element+' a').each(function(el){Ich übergebe den element parameter (die id) und erweitere die getElements abfrage um den a tag. Danach verarbeite ich jedes element in einer for in.
1 el.onclick = function() {
2 var url = el.href;
3 var urlextend = url+"?request="+column;
4 var fadeout = to_update.effect('opacity').start(1, 0)
5
6 fadeout.addEvent('onComplete', function(e) {
7 new Ajax(urlextend, {
8 method: 'post',
9 update: to_update,
10 onRequest: function() {
11 },
12 onComplete: function(response) {
13 //location.hash = '#'+escape(url);
14 to_update.effect('opacity').start(0, 1);
15 }
16 }).request();
17 });
18 return false;
19 }Jedes Element bekommt nun eine onclick Anweisung. Ich gehe nun auf die Effect Erstellung und Ajax Klasse weniger ein. Das wichtige was hier gemacht werden muss ist die a Tag Erweiterung:
1 var url = el.href;
2 var urlextend = url+"?request="+column;Die Variable url speichert jeweils den href des jeweiligen Links. In urlextend erweitere ich den Link aus dem a tag einfach nur noch um die passende Spalte. Diese Funktionalität ist sehr wichtig. Zum einen lässt es sich einfacher damit arbeiten und zum anderen stellt dies Variante sicher das die Links auch ohne Ajax weiterhin aufgerufen werden können und Funktionieren.
Nun muss die Funktion nur noch ausgeführt werden, dazu bindet man im Template folgenden Schnippsel in den Head Bereich:
1 window.addEvent('domready', function(e) {
2 go_ajax(
3 '#nav', // ID oder class des/der divs in dem die a tags liegen die aufgerufen werden sollen
4 'wrapper', // id des divs, welcher geupdated werden soll, ohne Raute!
5 'main' // Angabe der Spalte die man benutzen möchte
6 );
7 });Wie im Vorwort erwähnt ist die hier verwendete Mootools Variante nur zu Demonstrationszwecken gedacht. Es stehen einem aber hier alle Wege offen. Zudem kommt hinzu das Mootools in Version 1.2 einfach wesentlich bessere Möglichkeiten bietet, daher hoffe ich dass das Typolight release 2.7 bald kommt :)
Man sollte es mit dieser Technik nicht übertreiben, man bedenke das Typolight auf Barrierefreiheit setzt, in meinem Demoscript wird im Moment darauf allerdings keine Rücksicht genommen. Dadurch das die Seiten intern neu geladen werden, verändert sich der Status der url leiste nicht.
Das bedeutet das man keine Bookmarks und Browser History Funktionen. Die Lösung hierfür wäre eine hash basierte Erweiterung welche ich im Script kurz angerissen habe:
1 location.hash = '#'+escape(url);der Link bei aufruf eines verändert sich dadurch wiefolgt: index.html#impressum.html usw. Für dieses Problem gibt es eine mootools Erweiterung Namens History Manager.
Ich hoffe das dieses Tutorial Euch weiter geholfen hat und freue mich über Fragen, Diskussionen und Kritik jeder Art im Forum. Zu guter letzt findet ihr unter "alle Dateien die in diesem Tutorial angesprochen wurden.
http://may17.de/ajaxtest/ajax_files.zip
--- Tutorial erstellt von Joe Ray Gregory
Sometimes it may be desired to have date and time fields separated. For example, in the News Module, you may want to alter the template file to have the article date at the top of the news article, and the time at the bottom of the article. In order to accomplish this, you need to take the default date string and convert it into a valid date time object. Then, if desired, format it according to your tastes. The first step is to find the line in your template (.tpl) file:
1 <?php echo $this->date; ?>and convert the $this->date into a date/time object (originally, it is a string). To accomplish this, you wrap the $this->date in the date_create() function like this:
1 date_create($this->date)The next step is to apply the date formatting function (if desired):
1 date_format(date_create($this->date), "F j, Y")Your entire line will look like this:
1 <?php echo date_format(date_create($this->date), "F j, Y"); ?>And the resulting output to the page will be Month Day, Year (e.g. June 22, 2007). The "F j, Y" parameter denotes the date/time format that we are using, according to the PHP Reference for date formats.
You can take the PHP line and apply it to any .tpl file that references $this->date. (such as news_full.tpl)
Please note that date_create() and other DateTime related functions are included by default only in PHP versions equal and greater than 5.2. In PHP 5.1.2 this functionality is marked to be experimental and has to be enabled at compile time.
--- Tutorial created by fbliss
Als Neuling in TL möchtest Du eine Sitemap erstellen und erhälst nur eine leere Seite? Dieses Tutorial soll in Form eines kleinen HowTo helfen, durch die richtigen Klicks am Ende eine einfache Sitemap Deiner TL-Website zu liefern. Dinge, die das Leben, äh - pardon, das Layout schöner machen, lasse ich bewußt aus. Ich setzte voraus, dass Du schon eine Seitenstruktur aufgebaut hast und Deine Webseite schon über eine Navigation und mehrere Seiten verfügt. Für die nächsten Schritte musst Du als Admin oder mit ausreichenden Rechten am Backend deiner TL angemeldet sein.
Im linken Navigationsbereich aus der Gruppe: LAYOUT wählst Du den ersten Eintrag: MODULE. Es öffnet sich die Liste der bereits vorhandenen Module. In der Regel hast Du hier bereits Header, Footer und Navigation ausgewählt. Für die Sitemap musst Du ein neues Modul kreieren. Ein Klick auf "+ Neues Modul" öffnet den bekannten Bearbeitungsbereich mit seinen Eingabefeldern und Drop-down-Auswahlmenus.
Unter "Name des Moduls" gibst Du einen sprechenden Namen ein, z.B. 'Sitemap'. Aus dem Drop-down-Menu: "Modultyp" wählst Du als nächstes aus dem Bereich: "Navigation" das Modul: "Sitemap". Etwas Geduld und der Bearbeitungsbereich wird gemäß der Auswahl angepasst.
Eingabefeld: "Überschrift"
Wenn du willst, trage hier eine Überschrift ein, die über der Sitemap angezeigt wird. Diese Eingabe ist optional.
Auswahlfeld: "Wurzelseite als Startseite"
Wähle dieses Feld aus, wenn Deine Sitemap für die gesamte Seite gelten soll. Diese Eingabe ist erforderlich, wenn Du nicht eine andere Seite als Startpunkt für Deine Sitemap wünschst.
Referenzseite:
Sofern Du nur für einen Teil der Website die Sitemap willst, klickst Du hier "Auswahl ändern" und wählst aus der sich öffnenden Liste mit Deiner Seitenstruktur die Startseite der Sitemap als Referenzseite aus. Diese Eingaben sind nur erforderlich, wenn Du anstelle der Wurzelseite eine andere Seite als Startpunkt für Deine Sitemap wünschst.
Für dieses Tutorial wählst Du die Wurzelseite als Startseite! Die weiteren Auswahl- und Eingabefelder sind selbsterklärend. Für die erste Sitemap sind nun alle erforderlichen Eingaben gemacht. Beende die Eingaben nun durch einen Klick auf: "Speichern und schließen". Die Liste der Module ist nun um einen Eintrag mit der 'Sitemap' reicher.
Als nächstes erweiterst Du die Struktur der Site. Du wählst dazu aus dem Layout-Bereich den Punkt: "Seitenstruktur" und fügst dann über "+ Neue Seite" eine neue Seite in die Struktur deiner Website ein. Es öffnet sich der Bearbeitungsbereich zur Definition der neuen Seite. Folgende Eingaben sind zwingend/mindestens zu machen:
Eingabefeld: "Seitenname"
Hier definierst Du, wie Deine Seite im Navigationsmenu erscheinen soll. Sinnigerweise nennst Du die neue Seite: 'Sitemap'?
Eingabefeld: "Seitenalias"
Als eindeutige Referenz zur Umschreibung der ID in der URL zum Seiteaufruf definierst Du hier z.B. 'sitemap'.
Den Seitentyp belässt Du bei: "Reguläre Seite".
Wichtig ist das Häkchen bei dem Auswahlfeld: "Veröffentlicht", damit die Seite später auch angezeigt werden kann. Alle anderen Eingabefelder sind selbsterklärend und für die grundsätzliche Funktion nicht zwingend notwendig, weshalb sie hier nicht weiter besprochen werden sollen. Die Eingabe schließt Du nun mit einem Klick auf "Speichern und schließen" ab.
Bisher hast Du nur das Modul: Sitemap in der Site verfügbar gemacht und der Struktur einen Navigationseintrag: Sitemap zugefügt. Du hast aber noch keinen Inhalt definiert, der die Sitemap später anzeigt. Das macht Du im folgenden Schritt!
Du wählst aus den Backend-Modulen im Inhaltsmodul den Eintrag: Artikel. Es öffnet sich die Liste der bereits von Dir erstellten Seiten und Artikel. Du legst nun über "+ Neuer Artikel" einen neuen Artikel an. Wähle aus den rechts am Rand erscheinenden Positionierungen bei der zuvor erstellten Seite "Sitemap" das Symbol mit dem Pfeil nach rechts! Der Hilfstext zeigt Dir z.B. "In Seite ID xx einfügen".
Für den neuen Artikel definierst Du die folgenden Einträge in dem sich öffnenden Arbeitsbereich:
Eingabefeld: "Titel"
Du wählst z.B. 'Sitemap' als Titel des neuen Artikels.
Eingabefeld: "Artikelalias"
Hier schreibst Du z.B. 'sitemap'
Außerdem musst Du die Option: "Veröffentlicht" wählen, damit die Sitemap später angezeigt werden kann. Auch diese Eingaben schließt Du mir "Speichern und schließen" wie gewohnt ab!
Wenn du Dir das bisher Erstellte in der Frontend-Vorschau anschaust, so gibt es einen Navigationsmenueintrag und eine Seite mit der Sitemap. Leider noch ohne Sitemap! Als nächstes bindest Du nun das Sitemap-Modul in die Seite ein, damit das Modul beim Seitenaufruf die gewünschten Inhalte generieren kann.
Sofern Du nicht schon die Liste der Seiten und Artikel siehst, öffnest Du diese aus dem Inhalte-Modul durch Auswahl der Artikel. Wähle nun den Artikel "Sitemap" zum Bearbeiten durch Klick auf das gelbe Stiftsymbol. Es öffnet sich der Bearbeitungsbereich für den Artikel! Wähle nun "+ Neues Element" und anschließend das Symbol, um "Am Anfang von ID xx einfügen". Das erste (neue) Element wird nun am Seitenanfang des Artikels eingefügt. Es öffnet sich der Bearbeitungsbereich, in dem folgende Eingaben zu machen sind:
Dropdown-Auswahl: "Elementtyp"
Hierüber erstellst Du jetzt die Verbindung zur Sitemap!
Wähle am Ende der Liste aus den Include-Elementen den Eintrag: "Modul". Der geänderte Bearbeitungsbereich zeigt Dir nun eine Liste aller Module in Deiner Webseite. Du wählst hier das Modul: Sitemap! Die Eingabe schließt Du mit "Speichern und schließen" ab.
Dein Artikel ist nun um einen Moduleintrag erweitert, der als Inhalt eine Zeile mit dem Text: '### SITEMAP ###' enthält.
Die fertige Sitemap kannst Du nun in der Frontend-Vorschau betrachten! Experimentiere mit diesem Gerüst etwas herum, damit Du ein Gespür dafur bekommst, wie sich die Änderungen der Optionen bei Artikel, Struktur und den verschiedenen Formatierungen auswirken.
Ich hoffe, dieses Tutorial war Dir eine Hilfe bei der Erstellung der Sitemap. Als Grundlage für dieses Tutorial diente: TYPOlight 2.5.9. Änderungen und Ergänzugen sind herzlich willkommen. Wichtiger Hinweis: Trotz sorgfältiger Prüfung übernehme ich keine Haftung für eventuell aus der Verwendung dieses Tutorials entstehende Fehler. Die Nutzung dieser Informationen erfolgt ausschließlich auf eigenes Risiko.
Mit der in der neuen Version überarbeiteten Navigationsstruktur ist es nun möglich Navigationen a la Suckerfish zu realisieren.
Diese Anleitung zeigt die Erstellung eines solchen Menüs. Wer selbst ein Menü a la Suckerfish von Grund auf Entwickeln will, dem empfehle ich zuerst alle Blöcke sichtbar darzustellen, und sich erst dann um die mouseover Effekte zu kümmern. Bei den meisten im Netz zu findenden Anleitungen, wird sofort die erste Ebene auf unsichbar gesetzt. Damit ist eine Fehlerbehandlung nur sehr schwer zu realisieren.
Als gutes Tool für das Anzeigen des CSS-Struktur der einzelnen Blöcke im HTML-Code habe ich für Firefox das Programm Firebug gefunden.
Ausgangspunkt ist folgende Seitenstruktur:
Daraus folgt bei Typolight folgender HTML-Code
1 <div class="mod_navigation block">
2
3 <a href="index.php/startseite.html#skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
4
5 <ul class="level_1">
6 <li class="active"><p class="active">startseite</p></li>
7 <li class="submenu"><a href="index.php/seite1.html" title="seite1" class="submenu" onclick="this.blur();">seite1</a>
8 <ul class="level_2">
9 <li class="submenu"><a href="index.php/seite1_1.html" title="seite1.1" class="submenu" onclick="this.blur();">seite1.1</a>
10 <ul class="level_3">
11 <li><a href="index.php/seite1_1_1.html" title="seite1.1.1" onclick="this.blur();">seite1.1.1</a></li>
12 </ul>
13 </li>
14 <li><a href="index.php/seite12.html" title="seite1.2" onclick="this.blur();">seite1.2</a></li>
15 </ul>
16 </li>
17 <li><a href="index.php/seite2.html" title="seite2" onclick="this.blur();">seite2</a></li>
18 <li class="submenu"><a href="index.php/seite3.html" title="seite3" class="submenu" onclick="this.blur();">seite3</a>
19 <ul class="level_2">
20 <li><a href="index.php/seite3_1.html" title="seite3.1" onclick="this.blur();">seite3.1</a></li>
21 </ul>
22 </li>
23 </ul>
24
25 <a id="skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
26
27 </div>Im Browser wird die Navigation ohne CSS-Formatierungen folgendermaßen dargestellt:
Nun können wir uns daran machen, in dem zuvor neu angelegten Stylesheet suckerfish die CSS-Formatierungen einzufügen. Im ersten Schritt wird die Liste untereinander angeordnet und die Formatierungen entfernt. Um sicher zu gehen, dass nicht durch eine zu kleine Umgebende Box Inhalte abgeschnitten werden, setzte ich hier noch zusätzlich die Höhe des umgebende Navigationsblocks auf 300 Pixel. In wie weit das auch bei einer anderen Seitenstruktur nötig ist, muss von Fall zu Fall untersucht werden.
1 .mod_navigation
2 {
3 height:300px;
4 }
5
6 .mod_navigation p
7 {
8 margin:0px;
9 padding:0px;
10 }
11
12 .mod_navigation ul
13 {
14 margin:0px;
15 padding:0px;
16 list-style-type:none;
17 }Damit werden die Abstände des Paragraphen (<p>) enfernt, der die aktive Seite umfasst, und alle Einträge werden links angeordnet. Für den Einsatz in einer Seitenstruktur muss das CSS .mod_navigation (siehe letzte Anpassungen) später noch angepasst werden. Zum Üben und zur Veranschaulichung habe ich es erst einmal nur mit einer Höhe von 300 px angegeben.
Als nächstes werden dir Menüpunkte der ersten Ebene in eine horizontale Anordnung überführt.
1 .mod_navigation li
2 {
3 width:160px; /* Breite eines Menüpunktes festlegen */
4 position:relative; /* Position */
5 float:left; /* links nebeneiander anordnen */
6 background-color:#999999; /* eine Hintergrundfarbe */
7 border-right:1px solid #ffffff; /* optischer Rahmen */
8 border-bottom:1px solid #ffffff; /* optischer Rahmen */
9 border-left:1px solid #ffffff; /* optischer Rahmen */
10 line-height:35px; /* bestimmt die Höhe eines Menüeintrages */
11 }
12
13 .mod_navigation li ul
14 {
15 left:-1px;
16 top:36px; /* zweite Ebene beginnt 1 Pixel unter der ersten Ebene */
17 position:absolute; /* Position wird absolut zum Elternelement gesetzt */
18 display:block; /* Für erste Formatierung sichtbar. Wir später auf none gesetzt */
19
20 }
Nun müssen wir noch die Menüpunkte der dritten Ebene sichtbar machen. Sie sollten rechts vom übergeordneten Menüpunkt erscheinen. Momentan wird der Menüpunkt Seite 1.1.1 noch von dem Menüpunkt 1.2. verdeckt. Also schieben wir ihn 161 Pixel (Breite eines Menüeintrages + 1 Pixel Spalt) nach rechts und positionieren ihn absolut zum übergeordneten Element.
1 .mod_navigation li ul ul
2 {
3 left:161px;
4 top:0px;
5 position:absolute;
6 }Dabei entsteht folgende Darstellung:
Das sieht doch gut aus. Nun können wir uns mit dem Ein- und Ausblenden der einzelnen Ebenen beschäftigen.
Für das Ein- und Ausblenden der einzelnen Ebenen wird die CSS Pseudoklasse :hover benutzt. Die in diesem Kapitel beschriebenen Methoden funktionieren nur im Firefox. Für den IE müssen wir einen Workaround benutzen, der im nächsten Kapitel beschrieben wird.
Blenden wir also alles unterhalb der ersten Ebene aus. Dafür ändern wird die Formatdefinition .mod_navigation li ul wie folgt:
1 .mod_navigation li ul
2 {
3 bottom:0px;
4 left:-1px;
5 right:0px;
6 top:36px;
7 position:absolute;
8 display:none; /* Ausbleden der Untermenüs */
9
10 }Anschließend fügen wir folgenden neuen Formatdefinition hinzu: Zeigt die Unternavigationen an, wenn man mit der Maus über eine Hauptnavigation fährt.
1 .mod_navigation li:hover ul
2 {
3 display:block;
4 }Blendet die Unternavigationen der dritten Ebene aus, wenn man mit der Maus über eine Hauptnavigation fährt.
1 .mod_navigation ul li:hover ul ul
2 {
3 display:none;
4 }Zeigt die Unternavigationen der dritten Ebene an, wenn man mit der Maus über eine Unternavigation der zweiten Ebene fährt.
1 .mod_navigation ul ul li:hover ul
2 {
3 display:block;
4 }Wie schon im letzten Kapitel erwähnt, passiert beim IE nichts, wenn man mit der maus über einen Menüpunkt fährt. Das liegt daran, dass im IE nur Links (<a>) mit der Pseudoklasse :hover belegt werden können. Es ist aber möglich über das Document Object Model (DOM) zu jedem Element Mauseffekte hinzuzufügen. Dafür wird allerdings Javascript benötigt. Wer also Wert darauf legt, dass sein Menü auch ohne Javascript funktioniert, wird beim IE leider enttäuscht. Es gilt für den IE folgendes Script hinzuzufügen:
1 sfHover = function() {
2 var sfEls = document.getElementById("main").getElementsByTagName("li");
3 for (var i=0; i<sfEls.length; i++) {
4 sfEls[i].onmouseover=function() {
5 this.className+=" sfhover";
6 }
7 sfEls[i].onmouseout=function() {
8 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
9 }
10 }
11 }
12 if (window.attachEvent) window.attachEvent("onload", sfHover);Ich habe das so realisiert, dass ich das Script im Verzeichnis plugins in der Datei sfHover.js abgelegt habe. Anschließend habe ich in meinem Seitenlyout unter zusätzliche Head Tags folgende Zeile hinzugefügt.
1 <script type="text/javascript" src="plugins/sfHover.js"></script>Das Script muss je nachdem in welchem Layoutbereich man die Navigation abgelegt hat noch angepasst werden.
Im meinem Fall habe ich zum Testen die Navigation im Layoutbereich main abgelegt. Daher im Script die Zeile:
1 var sfEls = document.getElementById("*main*").getElementsByTagName("li");Wenn Sie die Navigation im Layoutbereich header abgelegt haben, muss die Zeile entsprechend angepasst werden.
1 var sfEls = document.getElementById("*header*").getElementsByTagName("li");Grundsätzlich muss der Identifier (ID) angegeben werden, mit dem die Navigation umschlossen ist. Das Script läuft durch alle Listenelemente, die unterhalb der Identifiers main liegen, und ändert die Klassennamen im DOM um, indem es den zusätzliche Klassennamen sfhover anhängt.
Daher muss man im CSS folgende Formatdefinitionen bearbeiten, und diesen Klassennamen hinzufügen.
1 .mod_navigation ul li:hover ul,
2 .mod_navigation ul li.sfhover ul
3 {
4 display:block;
5 }
6
7 .mod_navigation ul li:hover ul ul,
8 .mod_navigation ul li.sfhover ul ul
9 {
10 display:none;
11 }
12
13 .mod_navigation ul ul li:hover ul,
14 .mod_navigation ul ul li.sfhover ul
15 {
16 display:block;
17 }Um das Menü auch in einer Seitenstruktur einsetzen zu können ändern wir noch die Ausgabe für die Klasse mod_navigation in
1 .mod_navigation
2 {
3 position:absolute;
4 overflow:visible;
5 z-index:999;
6 }Damit überlappt das Menü beim aufklappen die anderen Seiteninhalte und wir absolut zum umgebenden Container positioniert. Nun wollen wir nur noch die Unterstriche der Verweise entfernen und den Text im Navigationsblock etwas nach links einrücken.
1 .mod_navigation a
2 {
3 padding-left:5px;
4 color:#ffffff;
5 text-decoration: none;
6 }Sie möchten, dass sich die Hintergrundfarbe ändert, wenn man mit der Manus über einen Eintrag fährt? Kein Problem. Fügen sie folgende Formatdefinition ein:
1 .mod_navigation li:hover,
2 .mod_navigation li.sfhover
3 {
4 background-color:#666666;
5 }Damit ändert sich die Hintergrundfarbe in ein dunkleres Grau, wenn Sie über einen Menüeintrag fahren. Nun sieht das Menü so aus:
Es gibt sicher noch eine Reihe von Möglichkeiten, das Menü zu verbessen (z.B. aktive Menüpunkte in einer anderen Farbe darstellen), oder optisch zu verändern. Das überlasse ich aber euerer Kreativität. Ihr könnt ja ruhig etwas mit den Parametern herum experimentieren. Auch ist es möglich mit ein paar Änderungen am CSS ein vertikales Menü draus zu gestalten.
Nützliche Links, die mir bei der Erstellung dieses Artikel geholfen haben:
getestet mit: Opera 9.21, IE 6.0, Firefox 2.0.0.3
--- Tutorial erstellt von Frank Hess, 2007-05-29 12:28
At first: I'm not the author of this tutorial, I just translated it into English. So feel free to correct my mistakes. The author of the German version of this tutorial is Frank Hess.
With the new navigation structure in the latest Version it is possible do realize Suckerfish-like navigations.
This Tutorial shows the creation of such a navigation menu. If somebody wants to create a Suckerfish-like navigation menu from the beginning on his own I suggest to make all blocks visible and to care later about the mouseover effects. In most tutorials the first layer is set invisible rigth from the beginning. This way troubleshooting is much more difficult.
As a good tool for showing the css structure of the blocks in the HTML code I found Firefox with the Firebug extension.
In this example we want to realize the following site structure:
1. Creating the main navigation module
Layout->Modules->Add module
Name of the module: Suckerfish
Module type: Navigation menu
2. Creating an empty stylesheet
Layout->Style sheets->New style sheet
Name: Suckerfish
3. Creating a page layout
Layout->Page layouts->new layout
Name of the layout: suckerfish
Layout template: fe_page
Style sheets: suckerfish
Columns: one
Included modules: arrange the module suckerfish in column main
4. Creating the site structure
Hence follows for Typolight the following HTML-code:
1 <div class="mod_navigation block">
2
3 <a href="index.php/startseite.html#skipNavigation_4" class="invisible" title="skip navigation"></a>
4
5 <ul class="level_1">
6 <li class="active"><p class="active">welcome page</p></li>
7 <li class="submenu"><a href="index.php/page1.html" title="page1" class="submenu" onclick="this.blur();">page1</a>
8 <ul class="level_2">
9 <li class="submenu"><a href="index.php/page1_1.html" title="page1.1" class="submenu" onclick="this.blur();">page1.1</a>
10 <ul class="level_3">
11 <li><a href="index.php/page1_1_1.html" title="page1.1.1" onclick="this.blur();">page1.1.1</a></li>
12 </ul>
13 </li>
14 <li><a href="index.php/page1_2.html" title="page1.2" onclick="this.blur();">page1.2</a></li>
15 </ul>
16 </li>
17 <li><a href="index.php/page2.html" title="page2" onclick="this.blur();">page2</a></li>
18 <li class="submenu"><a href="index.php/page3.html" title="page3" class="submenu" onclick="this.blur();">page3</a>
19 <ul class="level_2">
20 <li><a href="index.php/page3_1.html" title="page3.1" onclick="this.blur();">page3.1</a></li>
21 </ul>
22 </li>
23 </ul>
24
25 <a id="skipNavigation_4" class="invisible" title="skip navigation"></a>
26
27 </div>In the browser the navigation is shown without CSS definitions as follows:
Now we can begin with adding the CSS definitions into our stylesheet named suckerfish. In the first step the list will be sorted among each other and the definitions removed. To ensure that the content won't be truncated due to a too small surrounding box, I set the height of the surrounding navigation block to 300 pixel.
If this is also necessary with another Site structure has to be evaluated from case to case.
1 .mod_navigation
2 {
3 height:300px;
4 }
5
6 .mod_navigation p
7 {
8 margin:0px;
9 padding:0px;
10 }
11
12 .mod_navigation ul
13 {
14 margin:0px;
15 padding:0px;
16 list-style-type:none;
17 }Therewith the gaps around the paragraph (<p>) wich contains the active page are removed and all entries become arranged left-aligned.
For usage in a site structure the CSS .mod_navigation (see last modifications) has to be adjusted later on.
For playing around and testing purposes I just defined a height of 300 px.
In the next step the menu points of the first level will be rearranged from vertical to horizontal.
1 .mod_navigation li
2 {
3 width:160px; /* Define the width of an menu entry */
4 position:relative; /* position */
5 float:left; /* arrange left-aligned */
6 background-color:#999999; /* the background color */
7 border-right:1px solid #ffffff; /* border settings */
8 border-bottom:1px solid #ffffff; /*border settings */
9 border-left:1px solid #ffffff; /* border settings */
10 line-height:35px; /* defines the height of an menu entry */
11 }
12
13 .mod_navigation li ul
14 {
15 left:-1px;
16 top:36px; /* second level begins 1 pixel under the first one */
17 position:absolute; /* position is set absolute to the parent element */
18 display:block; /* set visible for testing and debugging purposes, will later be set to none*/
19
20 }
Now we have to make the menu entries of the third level visible. They should appear to the right of their superior menu entry. At the moment the menu entry 1.2 hides the menu entry 1.1.1.
So we move it 161 pixel (width of a menu entry plus one pixel gap) rightwards and position it absolute to its parent element.
1 .mod_navigation li ul ul
2 {
3 left:161px;
4 top:0px;
5 position:absolute;
6 }The output should now look this way:
Well that looks charming doesn't it? Now we can bother with the fading in and fading out of the levels.
For the fading in and fading out of the levels the CSS pseudo class :hover is used. The methods described in this chapter work only for Firefox. So we have to do a workaround for IE wich is described in the following chapter.
At first we hide everything exept the first level. Therefore we modify the CSS definition .mod_navigation li ul as follows:
1 .mod_navigation li ul
2 {
3 bottom:0px;
4 left:-1px;
5 right:0px;
6 top:36px;
7 position:absolute;
8 display:none; /* hide the submenus */
9 }Afterwards we add some new CSS definitions:
Shows the subnavigation if the mousepointer is above one of the main navigation points.
1 .mod_navigation li:hover ul
2 {
3 display:block;
4 }Hides the subnavigation of the third level if the mousepointer is above one of the main navigation points.
1 .mod_navigation ul li:hover ul ul
2 {
3 display:none;
4 }Shows the subnavigation of the third level if the mousepointer is above one of the subnavigations of the second level.
1 .mod_navigation ul ul li:hover ul
2 {
3 display:block;
4 }As mentioned in the last chapter, nothing happens if the mousepointer moves over a menu entry. The reason is that the IE allows only links (<a>) to use the pseudo class :hover.
But it is possible to add mouse effects to any element by using the Document Object Model (DOM). But unfortunately this requires Javascript. So if you attach importance to the fact that your navigation is usable without Javascript the IE disappoints you.
For the IE we add the following script:
1 sfHover = function() {
2 var sfEls = document.getEl