Verschiedene Hintergrundbinder mit css im Headerbereich

Typo-Kathrin · 30. Juni 2006 09:24

Hallo!

Ich habe folgendes Problem:

Ich habe ein html-Template, was im Header-Div ein mit css eingebundenes Hintergrundbild hat.
Jetzt sollen bei verschiedenen Seiten des Webs verschiedene Bilder für den Header-Div verwendet und angezeigt werden.

Kann mir jemand eine saubere und einfache Lösung erklären?

Ich bin eine ziemlich "blutige" Typo3-Anfängerin....

ONeill · 30. Juni 2006 09:30

Du könntest per Condition die aktuelle ID abfragen und dann den Background nicht in der CSS Datei setzen sondern als direkte Formatierung im Headerbereich.

Quasi so:

[id = 9]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[id = 10]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[GLOBAL]

usw.! Für die Condition müsste PDInRootLine gehen, musst du mal in der Ref gucken.

So kannst du für jede Seite in anderes Bild auswählen und per CSS einbinden

Typo-Kathrin · 30. Juni 2006 09:36

ONeill schrieb
Du könntest per Condition die aktuelle ID abfragen und dann den Background nicht in der CSS Datei setzen sondern als direkte Formatierung im Headerbereich.

Quasi so:
[id = 9]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[id = 10]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[GLOBAL]
usw.! Für die Condition müsste PDInRootLine gehen, musst du mal in der Ref gucken.

So kannst du für jede Seite in anderes Bild auswählen und per CSS einbinden

Danke für die Schnelle Antwort! Aber: Wie ich schon schrieb, ich beschäftige mich seit ca. 5 Tagen mit Typo3 (absolute Anfängerin). Deshalb weiß ich mit "Condition müsste PDInRootLine " leider nicht viel anzufangen.
Kannst Du mir auf die Sprünge helfen?

Unbekannter Benutzer · 1. Juli 2006 12:54

Hi,
ich helfe dir einfach mal...

also Details zu Conditions findest du hier in der Referenz.
Hier ist die Variante mit PIDinRootline

[PIDinRootline = 10]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[GLOBAL]

Ich habe mal das Beispiel aufgegriffen. Das hieße jetzt, das wenn die Seite mit der ID 10 ODER eine Seite unterhalb von dieser angezeigt wird, wird das gemacht, was dazwischen und GLOBAL steht. Das kann man natürlich für jede PID machen. Wenn du wirklich für jede Seite eine eigene Datei haben willst, ist aber eine Lösung über Levelmedia Slide die elegante Wahl. Das ist dann etwas komplizierter.

Typo-Kathrin · 3. Juli 2006 09:11

Kitsunet schrieb
Hi,
ich helfe dir einfach mal...

also Details zu Conditions findest du hier in der Referenz.
Hier ist die Variante mit PIDinRootline
[PIDinRootline = 10]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[GLOBAL]
Ich habe mal das Beispiel aufgegriffen. Das hieße jetzt, das wenn die Seite mit der ID 10 ODER eine Seite unterhalb von dieser angezeigt wird, wird das gemacht, was dazwischen und GLOBAL steht. Das kann man natürlich für jede PID machen. Wenn du wirklich für jede Seite eine eigene Datei haben willst, ist aber eine Lösung über Levelmedia Slide die elegante Wahl. Das ist dann etwas komplizierter.

Vielen Dank!
Inzwischen habe ich das mit Levelmedia auch gefunden - nur leider: Es funktioniert (noch) nicht.

Hier ist mein Script.
Kann jemand einen fehler sehen?

10.marks.ATMOBILD = COA
marks.ATMOBILD {
   20 = TEXT
   20.value = style="background-image: url(

   30 = TEXT
   30{
   value = fileadmin/img/hg_kopf.png
   override {
   required = 1
   data = levelmedia: -1, "slide"
   wrap = uploads/media/|
   listNum = 1
     }
   }

   40 = TEXT
   40.value =
     );background-repeat:no-repeat;background-position:top left;"
} 

Vielen Dank schon mal!

steffenk · 3. Juli 2006 09:20

ein TEXT-Objekt kann man m.E. nicht über levelmedia mit einem Bild versehen, dazu brauchst Du schon ein IMAGE-Objekt.
Das einfachste Beispiel ist

temp.HeaderPic = IMAGE
temp.HeaderPic {
 file = fileadmin/images/header.gif
 file.import.data = levelmedia: -1, "slide"
 file.import = uploads/media/
 file.import.listNum = 0
 file.import.override.field = media
}

Typo-Kathrin · 3. Juli 2006 10:03

steffenk schrieb
ein TEXT-Objekt kann man m.E. nicht über levelmedia mit einem Bild versehen, dazu brauchst Du schon ein IMAGE-Objekt.
Das einfachste Beispiel ist
temp.HeaderPic = IMAGE
temp.HeaderPic {
 file = fileadmin/images/header.gif
 file.import.data = levelmedia: -1, "slide"
 file.import = uploads/media/
 file.import.listNum = 0
 file.import.override.field = media
}

HM, ich will aber doch kein Bild übergeben, sondern eine style-Definition. Das ist doch nichts weiter als Text?! Oder?

steffenk · 3. Juli 2006 10:22

ja klar, kann auch sein, das ich daneben liege.

Wie wärs mit listNum = 0 ? Die Bilder fangen immer mit Index 0 an.

ONeill · 3. Juli 2006 11:47

Im Referenzbereich steht eine Lösung für dein Problem in Kombination mit Kitsunets Antwort:

[PIDupinRootline=1]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]
[PIDupinRootline=2]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]
[PIDupinRootline=3]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]

So kannst du für jede spezielle Seite einen bestimmten header über CSS definieren.

Unbekannter Benutzer · 3. Juli 2006 20:05

Also ich würde mal sagen der Code müsste so funktionieren, allerdings fängt ListNum bei 0 an zu zählen, wenn du also nicht absichtlich das zweite Bild willst, muss es ListNum = 0 heißen.

Es ginge auch mit einem Image Objekt wie steffenk schrieb, aber das hilft dir ja nicht, weil du ein Background-Image willst. Alternativ ginge noch ein IMG_RESOURCE, der Code sieht ähnlich aus wie bei Image, nur das das Ergebnis nicht ein Imagetag sondern nur der Pfad zum Bild ist.

Falls das alles nicht hilft poste mal für den entsprechenden Bereich den HTML-Quellcode, der im Frontend rauskommt, wenn du das versuchst.

Typo-Kathrin · 4. Juli 2006 07:20

Kitsunet schrieb
Also ich würde mal sagen der Code müsste so funktionieren, allerdings fängt ListNum bei 0 an zu zählen, wenn du also nicht absichtlich das zweite Bild willst, muss es ListNum = 0 heißen.

Es ginge auch mit einem Image Objekt wie steffenk schrieb, aber das hilft dir ja nicht, weil du ein Background-Image willst. Alternativ ginge noch ein IMG_RESOURCE, der Code sieht ähnlich aus wie bei Image, nur das das Ergebnis nicht ein Imagetag sondern nur der Pfad zum Bild ist.

Falls das alles nicht hilft poste mal für den entsprechenden Bereich den HTML-Quellcode, der im Frontend rauskommt, wenn du das versuchst.

Vielen Dank für Eure Hilfe. Der Code hat tatsächlich funktioniert.
Es hat oben bei den marks nur die 10 gefehlt - und - listNum=0 ist natürlich auch richtig!

Danke noch mal!
Je mehr man sich damit beschäftigt, desto mehr blickt man langsam auch durch. Macht echt Spaß!

ONeill · 4. Juli 2006 11:16

Layout und Inhalt sollten getrennt werden.

Typo-Kathrin · 4. Juli 2006 11:20

ONeill schrieb
Layout und Inhalt sollten getrennt werden.

Ist er doch.
Das Hintergrundbild ist doch per css eingebunden.

????

ONeill · 4. Juli 2006 13:17

Dann habe ich den TS Code falsch intepretiert. 🙂
Dann ist ja alles klar 😉

workfare · 26. Juli 2006 17:58

Danke!
Hat funktioniert, allerdings heisst es backgroung-image, Singular!
(Bei Typo-Kathrin steht es auch richtig)