heikehk
26.01.11, 17:36
Hi,
nachdem ich in Typo3 Foren momentan eher Monologe führe, aber keine Antworten bekomme, denke ich, dass ich vielleicht besser hier mal nachfrage, da ich schnelle Hilfe brauche.
Ich bin gerade dabe meine erste Typo3 Seite zu bauen und es geht besser voran, als ich dachte. Allerdings möchte ich den Hintergrund der Seite abhängig von der Seit tauschen und auch das Header-Bild soll wechseln.
Das Ganze habe ich im Prinzip in der statischen Variante per CSS Klassen gelöst. soweit so gut.
Theoretisch funktioniert das klasse und ich ich habe in Typoscript hierüber auch schon ein grafisches Hauptmenu mit IMG-Replacement realisiert, wobei ich den subtitle der Seiten missbrauche, um dies zu tun.
Ich dache, dass ich das auch tun könnte, um die Klasse des Bodys zu ändern und dass ich das ebenfalls im Header machen kann. Leider komme ich mit den Abfragen in Typoscript nicht so recht klar, im Prinzip hatte ich mir das so vorgestellt:
wenn subtitle = startseite, dann <body class="start">
...
sonst <body class="standard">
Das habe ich nicht hinbekommen. Falls mir das jemand erklären könnte, wäre ich schon glücklich :whistling
Nachteil der Geschichte ist, dass ich die Klassen definieren muss und ich das alles vorher wissen muss, wobei ich eigentlich das Template gerne etwas allgemeiner halten möchte.
Deshalb bin ich auf der Suche nach einer Lösung auch auf diese aus dem Typo3 Kochbuch von Alexander Ebner und Patrick Lobacher abgefahren:
R17.2 Dynamische Stylesheets
Aufgabe Sie möchten eine CSS-Datei dynamisch erstellen, um CSS-Eigenschaften zur Laufzeit generieren zu können. Lösung Sieht man sich einige Beispiele und den Quellcode der bekannten CSS-Seite CSS Zen Garden (http://csszengarden.com/) an, stellt man fest, dass alle Bilder durch das Stylesheet eingebunden wurden. Auch die Farben, Schriftarten, Größen und Positionen der Schriften werden ausschließlich durch das Stylesheet vorgegeben. Um ein wenig Abwechslung in die Seite zu bringen; könnte man verschiedene Stylesheets einsetzen
(Rezept R13.6 Das Feld Page/Layout für verschiedene CSS-Stylesheets verwenden).
Die andere Möglichkeit ist, ein Stylesheet dynamisch zu erstellen. So ist es beispielsweise möglich, ein Bild in die Dateiliste der Seite einzufügen, das dann als Hintergrundbild für den Header-Bereich definiert wird. Das Prinzip ist einfach. Eine statische CSS-Datei, die entsprechende Marker enthält, wird als Template definiert.
Die Marker werden durch die gewünschten Werte ersetzt. In unserem Beispiel sieht die CSS-Datei wie folgt aus:
Listing 17.1
Statische CSS-Datei dyncss.css /* CSS Datei Vorlage */
.header{ width: 600px;
height: 100px;
background-image:url(###HEADERIMG###) }
In Ihrem Template erstellen Sie im Setup-Bereich ein TEMPLATE-Objekt. Dieses liest die CSS-Vorlage ein, ersetzt den Platzhalter und liefert die Datei aus. Als Erstes wird allerdings der Name der Datei benötigt, die sich im Dateibereich der Seite befindet. Da immer ein Bild vorhanden sein soll, wird per Slide dafür gesorgt, dass in den darunter liegenden Ebenen gesucht wird, wenn auf der aktuellen Seite kein Bild hinterlegt ist.
Listing 17.2
Dateinamen des Bildes im Dateibereich der Seite auslesen
# Bilddateinamen auslesen
temp.pageimage = IMG_RESOURCE
temp.pageimage.file {
import = uploads/media/
import.data = levelmedia: -1, slide
import.listNum = 0
}
Nun ist der Dateinamen bekannt. Damit wird der Platzhalter in der CSS-Datei ersetzt. Damit wird der Platzhalter in der CSS ersetzt.
Listing 17.3
Template-Objekt erzeugen und den Platzhalter ersetzen
temp.dyncss = TEMPLATE
temp.dyncss {
css_templ = FILE
css_templ.file = fileadmin/templates/dyncss.css
marks {
HEADERIMG = TEXT
HEADERIMG < temp.pageimage
}
}
Die eigentliche CSS-Datei ist jetzt fertig. Sie muss nur noch in die Seite eingebaut werden. Dazu wird ein COA-Element verwendet, das der Eigenschaft headerData zugewiesen wird.
Listing 17.4
CSS-Datei in die Seite einbauen
page.headerData {
30 = COA
30 {
10 = temp.dyncss
wrap = <style type="text/css"><!-- | --></style>
}
}
Als Endergebnis taucht folgender HTML/CSS-Code im Header-Bereich im Seitenquellcode auf:
Listing 17.5
Das Ergebnis
<style type="text/css"><!--/* CSS-Dateivorlage */
.header{
width: 600px;
height: 100px;
background-image:url(uploads/media/bild.jpg)
}
--></style>
Das Hintergrundbild des Header-Bereichs der Seite wechselt, je nachdem, welches Bild im Dateifeld der Seite hinterlegt ist.
Mein Problem ist, ich weiß nicht genau wo ich diesen Code einfügen soll, denn irgendwie ist bei mir im Endergebnis nix drin respektive, garkein HTML-Code mehr da.
Eine ähnliche Lösung zeigen die Autoren von dieser Lösung auf
http://www.greenbanana.ch/no_cache/blog/artikel/datum/2010/11/22/titel/dynamisches-css-mit-typo3-marker/
Aber hier bekomme ich keine HTML-Seite mehr hin. Ich bin wahrscheinlich nur zu blöd und hab mir jetzt auch meinen zusammengeschriebenen Typoscript-Text gelöscht....
Hat jemand von Euch für mich einen Tipp?
Ich mag nicht für jede Seite alles extra definieren...
Gruß
Heike
nachdem ich in Typo3 Foren momentan eher Monologe führe, aber keine Antworten bekomme, denke ich, dass ich vielleicht besser hier mal nachfrage, da ich schnelle Hilfe brauche.
Ich bin gerade dabe meine erste Typo3 Seite zu bauen und es geht besser voran, als ich dachte. Allerdings möchte ich den Hintergrund der Seite abhängig von der Seit tauschen und auch das Header-Bild soll wechseln.
Das Ganze habe ich im Prinzip in der statischen Variante per CSS Klassen gelöst. soweit so gut.
Theoretisch funktioniert das klasse und ich ich habe in Typoscript hierüber auch schon ein grafisches Hauptmenu mit IMG-Replacement realisiert, wobei ich den subtitle der Seiten missbrauche, um dies zu tun.
Ich dache, dass ich das auch tun könnte, um die Klasse des Bodys zu ändern und dass ich das ebenfalls im Header machen kann. Leider komme ich mit den Abfragen in Typoscript nicht so recht klar, im Prinzip hatte ich mir das so vorgestellt:
wenn subtitle = startseite, dann <body class="start">
...
sonst <body class="standard">
Das habe ich nicht hinbekommen. Falls mir das jemand erklären könnte, wäre ich schon glücklich :whistling
Nachteil der Geschichte ist, dass ich die Klassen definieren muss und ich das alles vorher wissen muss, wobei ich eigentlich das Template gerne etwas allgemeiner halten möchte.
Deshalb bin ich auf der Suche nach einer Lösung auch auf diese aus dem Typo3 Kochbuch von Alexander Ebner und Patrick Lobacher abgefahren:
R17.2 Dynamische Stylesheets
Aufgabe Sie möchten eine CSS-Datei dynamisch erstellen, um CSS-Eigenschaften zur Laufzeit generieren zu können. Lösung Sieht man sich einige Beispiele und den Quellcode der bekannten CSS-Seite CSS Zen Garden (http://csszengarden.com/) an, stellt man fest, dass alle Bilder durch das Stylesheet eingebunden wurden. Auch die Farben, Schriftarten, Größen und Positionen der Schriften werden ausschließlich durch das Stylesheet vorgegeben. Um ein wenig Abwechslung in die Seite zu bringen; könnte man verschiedene Stylesheets einsetzen
(Rezept R13.6 Das Feld Page/Layout für verschiedene CSS-Stylesheets verwenden).
Die andere Möglichkeit ist, ein Stylesheet dynamisch zu erstellen. So ist es beispielsweise möglich, ein Bild in die Dateiliste der Seite einzufügen, das dann als Hintergrundbild für den Header-Bereich definiert wird. Das Prinzip ist einfach. Eine statische CSS-Datei, die entsprechende Marker enthält, wird als Template definiert.
Die Marker werden durch die gewünschten Werte ersetzt. In unserem Beispiel sieht die CSS-Datei wie folgt aus:
Listing 17.1
Statische CSS-Datei dyncss.css /* CSS Datei Vorlage */
.header{ width: 600px;
height: 100px;
background-image:url(###HEADERIMG###) }
In Ihrem Template erstellen Sie im Setup-Bereich ein TEMPLATE-Objekt. Dieses liest die CSS-Vorlage ein, ersetzt den Platzhalter und liefert die Datei aus. Als Erstes wird allerdings der Name der Datei benötigt, die sich im Dateibereich der Seite befindet. Da immer ein Bild vorhanden sein soll, wird per Slide dafür gesorgt, dass in den darunter liegenden Ebenen gesucht wird, wenn auf der aktuellen Seite kein Bild hinterlegt ist.
Listing 17.2
Dateinamen des Bildes im Dateibereich der Seite auslesen
# Bilddateinamen auslesen
temp.pageimage = IMG_RESOURCE
temp.pageimage.file {
import = uploads/media/
import.data = levelmedia: -1, slide
import.listNum = 0
}
Nun ist der Dateinamen bekannt. Damit wird der Platzhalter in der CSS-Datei ersetzt. Damit wird der Platzhalter in der CSS ersetzt.
Listing 17.3
Template-Objekt erzeugen und den Platzhalter ersetzen
temp.dyncss = TEMPLATE
temp.dyncss {
css_templ = FILE
css_templ.file = fileadmin/templates/dyncss.css
marks {
HEADERIMG = TEXT
HEADERIMG < temp.pageimage
}
}
Die eigentliche CSS-Datei ist jetzt fertig. Sie muss nur noch in die Seite eingebaut werden. Dazu wird ein COA-Element verwendet, das der Eigenschaft headerData zugewiesen wird.
Listing 17.4
CSS-Datei in die Seite einbauen
page.headerData {
30 = COA
30 {
10 = temp.dyncss
wrap = <style type="text/css"><!-- | --></style>
}
}
Als Endergebnis taucht folgender HTML/CSS-Code im Header-Bereich im Seitenquellcode auf:
Listing 17.5
Das Ergebnis
<style type="text/css"><!--/* CSS-Dateivorlage */
.header{
width: 600px;
height: 100px;
background-image:url(uploads/media/bild.jpg)
}
--></style>
Das Hintergrundbild des Header-Bereichs der Seite wechselt, je nachdem, welches Bild im Dateifeld der Seite hinterlegt ist.
Mein Problem ist, ich weiß nicht genau wo ich diesen Code einfügen soll, denn irgendwie ist bei mir im Endergebnis nix drin respektive, garkein HTML-Code mehr da.
Eine ähnliche Lösung zeigen die Autoren von dieser Lösung auf
http://www.greenbanana.ch/no_cache/blog/artikel/datum/2010/11/22/titel/dynamisches-css-mit-typo3-marker/
Aber hier bekomme ich keine HTML-Seite mehr hin. Ich bin wahrscheinlich nur zu blöd und hab mir jetzt auch meinen zusammengeschriebenen Typoscript-Text gelöscht....
Hat jemand von Euch für mich einen Tipp?
Ich mag nicht für jede Seite alles extra definieren...
Gruß
Heike