Web-Design Typo3 - kennt sich einer von Euch aus? - Photoshop-Cafe.de :: Dein Photoshop-Forum

**heikehk** · #1 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:

Zitat:

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

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:

Zitat:

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:

Zitat:

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.

Zitat:

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.

Zitat:

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.

Zitat:

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:

Zitat:

Listing 17.5
Das Ergebnis
<style type="text/css"></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

Zitat:

http://www.greenbanana.ch/no_cache/b...-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

**phoenix** · #2 26.01.11, 17:58

Gibt es für Typo keine Module die den Job erledigen? Kenne von anderen CMS solche Module welche Bilder in Abhängigkeit der aufgerufenen Seite anzeigen. Wäre wahrscheinlich die einfachste Lösung.

**heikehk** · #3 26.01.11, 18:17

Das weiß ich noch nicht, allerdings sollte das doch eigentlich machbar sein.
Ich hab die Informationen, die CSS ich muss es nur reinbekommen...
Das Problem ist ,es handelt sich ja um den Austausch der Hintergrundgrafiken

Mittlerweile bin ich echt soweit, dass ich schon mit diesem if subtitle = ... then bodytag = ...
zufrieden wäre.

Gruß
Heike

**heikehk** · #4 26.01.11, 18:22

Hab jetzt eine Übergangslösung ohne if & Co. :

Zitat:

bodyTagCObject = HTML
bodyTagCObject.value.field = subtitle
bodyTagCObject.value.wrap = <body class="|">

Damit habe ich schon mal den Hintergrund der allgemeinen Seite. Jetzt muss ich das noch für den DIV hinbekommen und kann mir zwischendrin überlegen, ob ich nicht eine andere Lösung finde. Das mit dem dynamischen CSS würde mich schon reizen. das wäre letztendlich viel Variabler.

Gruß
Heike

**phoenix** · #5 26.01.11, 19:19

Bezüglich Typo kann ich Dir da nix zu sagen. Allgemein kannst Du aber z.B mit JS den Seitentitel auslesen (document.title) und via document.write dann den entsprechenden Body Tag setzen. Die bessere Alternative ist aber ein PHP Modul das sich bereits vor der Seitengenerierung einklinkt, das ist aber nicht ganz einfach zu schreiben, da hat man wohl schneller ein fertiges Modul gedownloadet und eingebunden.

**heikehk** · #6 26.01.11, 19:23

Na ja, die drei Zeilen funktionieren ja, und das für den header werde ich dann schon hinbekommen, allerdings finde ich die Variante die CSS-Informationen zu ändern einfach eleganter und vor allem auch passender in anderen Projekten.

Danke für den Tipp mit den Modulen.
Das mit dem "es muss vor der Seitengenerierung eingeklinkt werden.." hilft mir schon etwas weiter. Ist eben meine erste Seite und ich habe mich gegen Fertiglösungen entschieden, weil ich das System begreifen möchte..
Is so ne Macke von mir. Nachdem ich das schon eine Weile vor mir hergeschoben habe, das selbst zu machen, ist jetzt eben die Zeit zwischen Büchern, Browserfenstern und Editor die Sache hin zu bekommen.

Alles Liebe

Heike

**phoenix** · #7 26.01.11, 19:34

Zitat:

CSS-Informationen zu ändern einfach eleganter

Du kannst doch jederzeit via JS die CSS Eigenschaften dynamisch anpassen.

Ich vermute für bessere Hilfe müsste ich das System von Typo 3 erstmal analysieren:

Zitat:

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.

CSS Vorlagen mit Platzhaltern einlesen und den Platzhalter ersetzen geht auch mit mindestens JS und PHP. Scheint Typo aber auch ne Funktion für zu haben: 'TEMPLATE-Objekt' ...

Um nochmal auf die Anfangsfrage zurückzukommen:

Zitat:

Allerdings möchte ich den Hintergrund der Seite abhängig von der Seit tauschen und auch das Header-Bild soll wechseln.

Wenn kein Modul, dann würde ich hier JS/JQuery einsetzen. Damit geht das relativ einfach von der Hand. Nur halt Client und nicht Serverbasiert

**heikehk** · #8 26.01.11, 20:53

Ja Typo3 hat ein TEMPLATE Objekt.

Ich muss wohl noch mal wegen der Reihenfolgen lesen, denn irgendwie ist entweder meine HTML Vorlage da oder eben eine leere Seite.

Wie auch immer. Bin grad müde. ich denke ich finde irgendwie noch was. Momentan geht das mit dem Hintergrund ja schon mit den oben gezeigten drei Zeilen. Ich denke ich werde mich jetzt mal aufs Ohr legen und morgen nochmal dran gehen.

Geht nicht gibts ja bekanntlicher maßen nicht - aber zu müde schon.

Einen lieben Gruß
Heike

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Smilies in Typo3 einbinden	heikehk	Hilfestellung, Tipps und Tricks	0	01.04.11 20:50
Kennt sich jemand mit Scripting aus ?	Eduardo Da Vinci	Hilfestellung, Tipps und Tricks	7	17.03.11 13:04
Verlauf einer Sandstruktur zu einer Sandfarbe	tomben	Hilfestellung, Tipps und Tricks	9	03.03.11 17:42
Brauche Hilfe beim Erstellen einer Strichzeichnung aus einer Bildvorlage	realmadrid08rk	Hilfestellung, Tipps und Tricks	6	05.10.10 12:47
Photoshop Filter-Technik, wer kennt sich aus	megalothon	Hilfestellung, Tipps und Tricks	3	24.03.09 22:17

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)