Dynamisches CSS - Nur wo einfügen

Hi,

ich habe auf der Suche, wie ich meine Hintergründe für die jeweiligen Unterseiten elegant einfügen kann, diese Beschreibung gefunden:

http://www.greenbanana.ch/no_cache/blog/artikel/datum/2010/11/22/titel/dynamisches-css-mit-typo3-marker/

In meinem Typoscript löse ich das Problem zur Zeit über eine Übergangslösung mit dem Feld Subtitle, welches dann den passenden Body-Tag einfügt.

Die Sache hat nur den Haken, dass ich dann für jede angelegte Seite eine entsprechende Klasse anlegen muss und dass dann zusätzlich auf jeder Seite der passende Subtitle eingetragen werden muss.

Mir wäre aber lieber, wenn ich einfach ein Bild in die Ressourcen laden würde, welches im Zweifel vererbt wird und ich würde das Ganze dynamisch einfügen.

Lieder haben meine Versuche allein die Bilddatei aus den Ressourcen zu laden nicht funktioniert (beim Banner stehen die Zeilen, die nichts machen.... dass da dann theaoretisch jetzt page.20.marks dazukommen müsste weiß ich)

Ich hatte schon eine Variante aus dem TypoScript Kochbuch aus dem Hanser Verlag probiert, allerdings weiß ich nicht, wo das Ganze eingetragen werden muss. Bei mir war bei diesen Versuchen dann kein HTML mehr da bzw. zwischendrin hatte ich einen Stand, dass kein CSS-Code eingetragen wurde.

Kann mir jemand sagen wo ich denn Code aus der obigen Beschreibung einfügen müsste, wenn ich will, dass das klappt und was ich bei dem Zugriff auf die Bilddatei in den Ressourcen falsch mache?

// XHTML 1.0. trans statt HTML 4 doctype der Website
//
 
config {
	doctype = xhtml_trans
	htmlTag_langKey = de
	xmlprologue = none
	}
 
 
// Definition der Seite
//
 
page = PAGE
// 0 = HTML
page {
typeNum = 0
 
[b]bodyTagCObject = HTML
bodyTagCObject.value.field = subtitle
bodyTagCObject.value.wrap = <body class="|">
 [/b]
// HTML Layoutvorlage einbinden
20 = TEMPLATE
20.template = FILE
20.template.file = fileadmin/templates/layout.html
20.workOnSubpart = DOKUMENT
 
includeCSS {
    file1 = fileadmin/templates/yaml/patches/layout_2col_left_13.css
    file2 = fileadmin/templates/yaml/core/base.css
    file3 = fileadmin/templates/yaml/navigation/nav_shinybuttons.css
    file4 = fileadmin/templates/yaml/navigation/nav_vlist.css
    file5 = fileadmin/templates/yaml/screen/basemod.css
    file6 = fileadmin/templates/yaml/screen/basemod_2col_left_13.css
    file7 = fileadmin/templates/yaml/screen/content.css
    file8 = fileadmin/templates/yaml/print/print_003_draft.css
    file8.media = print
}
 
// Einbinden der CSS und JAVA für IE6 und dem PNG-Script für IE6
// Internet Explorer 6
[browser = msie] AND [version = <7]
page.headerData.4    = TEXT
page.headerData.4.value (
	<!--[if lte IE 7]>
	<link href="fileadmin/yaml/core/patch_2col_left_13.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
	<script>
	DD_belatedPNG.fix('body.startseite, body.sub_leistung, .page_margins, .page.subpage, #header, .hlist, .hlist ul li a, .hlist ul li strong,  .hlist ul li a:focus, .hlist ul li a:hover, .hlist ul li a:active, img');
	</script>
	<![endif]-->
)
[end]
 
// page Objekt schließen um mit Condtitions arbeiten zu können 
} 
// Ersetzen der Marker in der Vorlage
// Wegen Condition UNTERSEITE ausgeklammert
 
        // CSS Klasse für Unterseite setzen, wenn nicht Willkommensseite
        page.20.marks.UNTERSEITE = TEXT
      	page.20.marks.UNTERSEITE.value = subpage
	[PIDinRootline = 46]
       		page.20.marks.UNTERSEITE.value = 46 
	[globals]
 
 
        // OWL-Banner einfügen und mit Alt und Title Tag ausstatten
	page.20.marks.BANNER = HTML
        // BANNER.file.import = uploads/media/
	// BANNER.file.import.data = levelmedia:-1, slide
	// BANNER.file.import.listnum = 0
	page.20.marks.BANNER.value = <img src="fileadmin/templates/images/Header_OWL.png" alt="OWL, Objektfotografie - Webdesign - Layout" />
 
	// Navigation oben erstellen
	page.20.marks.MENU_TOP = HMENU
	page.20.marks.MENU_TOP {
		special = directory
		special.value = 36
		1 = TMENU
		1.noBlur = 1
		1.NO = 1
		1.NO.linkwrap = <span>|</span>
		}
	page.20.marks.MENU_OBEN = HMENU
	page.20.marks.MENU_OBEN {
	        special = directory
	        special.value = 37
	        expAll = 0
	        wrap = <div class = "hlist"><ul>|</ul></div>
	        1 = TMENU
	        1.noBlur = 1
	        1.NO = 1
	        1.NO.wrapItemAndSub.insertData = 1
	        1.NO.wrapItemAndSub = <li id="{field:subtitle}">|<li>
	        }	
  	page.20.marks.MENU_LINKS = HMENU
	page.20.marks.MENU_LINKS {
	        entryLevel = 2
       	        wrap = <div class = "vlist"><ul>|</ul></div>
	        1 = TMENU
	        expAll = 1
	        1.noBlur = 1
	        1.NO = 1
	        1.NO.wrapItemAndSub = <li>|<li>
		}
        // OWL-Kontaktinfo unten einfügen und mit Alt und Title Tag ausstatten
	page.20.marks.FUSSZEILE = HTML
	page.20.marks.FUSSZEILE.value = <img src="fileadmin/templates/images/hhk.png" alt="alttext" />

Danke schon mal

Heike

Wenn die Banner-Grafik statt als Image als CSS-Hintergrund-Grafik eingebunden werden könnte, fiele mir ne Lösung ein:

// Auslesen, welche Bilddatei von den Redakteuren angegeben wurde
temp.banner = TEXT
temp.banner {
	data = levelmedia: -1, "slide"
	listNum = 0
}

// Eine CSS-Datei laden, bei der der Dateipfad zum Bild mit einem Marker
// ersetzt wird
page.headerData.998 = TEMPLATE
page.headerData.998.template = FILE
page.headerData.998.template.file = fileadmin/cssdatei.css

// Nun den Marker durch den Namen der Bilddatei ersetzen
page.headerData.998.marks.BANNER < temp.banner

Hier noch schnell das Beispiel für die einzubindende CSS-Datei (die wie ein Template geparst wird):

<style type="text/css">
<!--
#pr_banner {background-image: url(http://www.domain.de/uploads/media/###BANNER###);}
-->
</style>

Achja, wichtig ist, dass das Feld levelmedia in der Grundkonfiguration von Typo3 auch zu den Feldern dazu genommen wird, die sliden (so dass nicht auf jeder Unterseite wieder die Bannergrafik angegeben werden muss).Das lässt sich ja im Install-Tool einstellen...

Hallo simpannar,

danke für die Antwort. Wahrscheinlich liegt bei mir der Hund begraben in der Tatsache, dass ich diese Einstellungen im Install nicht habe.

Was genau muss ich denn wo einstellen, damit das funktioniert?

Ich bin irgendwie davon ausgegangen, dass das eine immer verfügbare Option ist.

Gruß
Heike

hab mich vertan, das levelmedia-feld muss tatsächlich nicht gesetzt werden.

Hab gerade nochmal einen Blick in die localconf.php geworfen. Da hab ich nix drin.

['FE']['addRootLineFields'] = 'subtitle, description, keywords, author';

Daran liegt es also nicht!

SP

Hab ich denn da oben beim Banner irgendwas falsch geschrieben?
Muss ich noch irgendwas vorher definieren?
Sollte ich vor dem Page Bereich vielleicht erst alles mit Temporären Variablen ermitteln und dann nur noch Werte übergeben?
Oder müssen meine Temporären Variable im Page definiert werden, damit ich sie dort verwenden kann?

Wenn ich normalerweise was programmiere, dann weiß ich schon wie ich mit Variablen umgehen kann, aber bisher kann ich noch nicht verstehen, wie das in Typoscript genau zu machen ist. #angry##angry#

Komme mir grad etwas blöd vor...😢

Gruß
Heike

Hallo,

So müsste es gehen:

page.20.marks.BANNER = IMAGE
page.20.marks.BANNER.file {
    import = uploads/media/
    import.data = levelmedia: -1, slide
    import.listNum = 0
    width=xyz
    height=xyz

}

Funktioniert zumindest bei mit immer.
Also aufpassen: IMAGE, nicht HTML.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

Vielen Dank für die Info.
Ich werde das morgen mal ausprobieren. Hoffe dass das klappt.
Heute habe ich mal eine Typoscript Pause eingelegt...

Eine Frage nur für morgen, eher zwei 😉

Muss ich Variablen, die ich innerhalb des Seitenaufbaus verwenden möchte vor meiner Definition von page = PAGE erstellen oder müssen die zwingend nach der Definition von page erfolgen, wenn ich auch auf Inhalte der Seite abfragen möchte...

Und die zweite:

kann ich irgendwie den Wert einer Variablen an einer bestimmten Stelle ausgeben, so dass ich prüfen kann was passiert?
Ich hatte nun schon mehr fach den Fall, dass ich plötzlich keine Seite mehr erstellt bekommen habe, wenn ich zwischendrin eine Abfrage hatte, da wäre es schön zu sehen, wie die Werte gesetzt waren und wo es mein Script ins Nirwana geschossen hat.

Das was der Template-Object Browser so anbietet kommt mir teilweise spanisch vor.

Gruß
Heike

Also, ich habe es für mich folgendermaßen gelöst:

// Hintergrundbild über Konstante wechseln, indem die CSS für body überschreiben wird.

page.temp.10 = COA
page.temp.10 {
  insertData = 1
  value (
     body {
       background:#fbf5e4;
       color:#4b4945;
       background-image:url({$bg_Img});
       background-position: bottom left;
       background-repeat:no-repeat;
       }
   .page { 
       background-image:url({$headerImg});
       background-position: top left;

    
    )
}

page.headerData.10 = COA
page.headerData.10 {
  10 = TEXT
  // Wichtig nur .value Übertragung klappt !!
  10.value < page.temp.10.value
  10.wrap = <style type="text/css"><!-- | --></style>
}

Damit baue ich nun für alle Seiten einen kleinen CSS-Bereich nach den eigentlichen CSS-Definitionen auf. Unter Umständen ist das nicht sooo elegant, aber etwas eleganteres ist mir nicht eingefallen 😉

Im Root-Template habe ich entsprechende Konstanten für die Hintergrund-Bilder erstellt. Da der Header sich auch Content-Abhängig ändern soll, ich aber nicht jede Seite mit einen Extra-Feld ausstatten wollte, ist das die für mich optimalste Lösung.

Ist keine Konstante im Template-Bereich gesetzt, gilt die in einer der nächsthöheren Ebenen definierte.

In den Konstanten steht die Bilddatei inklusive Pfad und ist so definiert:

#cat=seitenBilder=basic;type=file;label=templateHgBild
bg_Img=fileadmin/templates/images/bg_OWL.png
#cat=seitenBilder=basic;type=file;label=templateLogo
headerImg=

Durch die Definition: #cat=seitenBilder=basic;type=file;label=templateHgBild
Kann ich im Konstanten-Editor sogar das Bild durch hochgeladene Ressourcen ersetzen. Ich kann dort dann zwar auch Bilder hochladen, aber irgendwie bekomme ich diese nicht integriert. Aber vielleicht finde ich das ja dann noch 😉

Alles Liebe

Heike