Suche
Teilen
startseite » forum

Dynamisches CSS - Nur wo einfügen

  • heikehk heikehk
    T3PO
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    28. 01. 2011, 12:24

    Hi,

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

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

    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?

    1. // XHTML 1.0. trans statt HTML 4 doctype der Website
    2. //
    3.  
    4. config {
    5. 	doctype = xhtml_trans
    6. 	htmlTag_langKey = de
    7. 	xmlprologue = none
    8. 	}
    9.  
    10.  
    11. // Definition der Seite
    12. //
    13.  
    14. page = PAGE
    15. // 0 = HTML
    16. page {
    17. typeNum = 0
    18.  
    19. [b]bodyTagCObject = HTML
    20. bodyTagCObject.value.field = subtitle
    21. bodyTagCObject.value.wrap = <!!=|>
    22.  [/b]
    23. // HTML Layoutvorlage einbinden
    25. 20.template = FILE
    26. 20.template.file = fileadmin/templates/layout.html
    27. 20.workOnSubpart = DOKUMENT
    28.  
    29. includeCSS {
    30.     file1 = fileadmin/templates/yaml/patches/layout_2col_left_13.css
    31.     file2 = fileadmin/templates/yaml/core/base.css
    32.     file3 = fileadmin/templates/yaml/navigation/nav_shinybuttons.css
    33.     file4 = fileadmin/templates/yaml/navigation/nav_vlist.css
    34.     file5 = fileadmin/templates/yaml/screen/basemod.css
    35.     file6 = fileadmin/templates/yaml/screen/basemod_2col_left_13.css
    36.     file7 = fileadmin/templates/yaml/screen/content.css
    37.     file8 = fileadmin/templates/yaml/print/print_003_draft.css
    38.     file8.media = print
    39. }
    40.  
    41. // Einbinden der CSS und JAVA für IE6 und dem PNG-Script für IE6
    42. // Internet Explorer 6
    43. [browser = msie] AND [version = <7]
    44. page.headerData.4    = TEXT
    45. page.headerData.4.value (
    46. 	<!--[if lte IE 7]>
    47. 	<link href="fileadmin/yaml/core/patch_2col_left_13.css" rel="stylesheet" type="text/css" />
    48. 	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
    49. 	<script>
    50. 	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');
    51. 	</script>
    52. 	<![endif]-->
    53. )
    54. [end]
    55.  
    56. // page Objekt schließen um mit Condtitions arbeiten zu können 
    57. } 
    58. // Ersetzen der Marker in der Vorlage
    59. // Wegen Condition UNTERSEITE ausgeklammert
    60.  
    61.         // CSS Klasse für Unterseite setzen, wenn nicht Willkommensseite
    62.         page.20.marks.UNTERSEITE = TEXT
    63.       	page.20.marks.UNTERSEITE.value = subpage
    65.        		page.20.marks.UNTERSEITE.value = 46 
    66. 	[globals]
    67.  
    68.  
    69.         // OWL-Banner einfügen und mit Alt und Title Tag ausstatten
    70. 	page.20.marks.BANNER = HTML
    71.         // BANNER.file.import = uploads/media/
    72. 	// BANNER.file.import.data = levelmedia:-1, slide
    73. 	// BANNER.file.import.listnum = 0
    74. 	page.20.marks.BANNER.value = <img src="fileadmin/templates/images/Header_OWL.png" alt="OWL, Objektfotografie - Webdesign - Layout" />
    75.  
    76. 	// Navigation oben erstellen
    77. 	page.20.marks.MENU_TOP = HMENU
    78. 	page.20.marks.MENU_TOP {
    79. 		special = directory
    80. 		special.value = 36
    81. 		1 = TMENU
    82. 		1.noBlur = 1
    83. 		1.NO = 1
    84. 		1.NO.linkwrap = <span>|</span>
    85. 		}
    86. 	page.20.marks.MENU_OBEN = HMENU
    87. 	page.20.marks.MENU_OBEN {
    88. 	        special = directory
    89. 	        special.value = 37
    90. 	        expAll = 0
    91. 	        wrap = <div class = "hlist"><ul>|</ul></div>
    92. 	        1 = TMENU
    93. 	        1.noBlur = 1
    94. 	        1.NO = 1
    95. 	        1.NO.wrapItemAndSub.insertData = 1
    96. 	        1.NO.wrapItemAndSub = <li id="{field:subtitle}">|<li>
    97. 	        }	
    98.   	page.20.marks.MENU_LINKS = HMENU
    99. 	page.20.marks.MENU_LINKS {
    100. 	        entryLevel = 2
    101.        	        wrap = <div class = "vlist"><ul>|</ul></div>
    102. 	        1 = TMENU
    103. 	        expAll = 1
    104. 	        1.noBlur = 1
    105. 	        1.NO = 1
    106. 	        1.NO.wrapItemAndSub = <li>|<li>
    107. 		}
    108.         // OWL-Kontaktinfo unten einfügen und mit Alt und Title Tag ausstatten
    109. 	page.20.marks.FUSSZEILE = HTML
    110. 	page.20.marks.FUSSZEILE.value = <img src="fileadmin/templates/images/hhk.png" alt="alttext" />

    Danke schon mal

    Heike

  • 1
  • 0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    29. 01. 2011, 03:33

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

    1. // Auslesen, welche Bilddatei von den Redakteuren angegeben wurde
    2. temp.banner = TEXT
    3. temp.banner {
    4. 	data = levelmedia: -1, "slide"
    5. 	listNum = 0
    6. }
    7.  
    8. // Eine CSS-Datei laden, bei der der Dateipfad zum Bild mit einem Marker
    9. // ersetzt wird
    10. page.headerData.998 = TEMPLATE
    11. page.headerData.998.template = FILE
    12. page.headerData.998.template.file = fileadmin/cssdatei.css
    13.  
    14. // Nun den Marker durch den Namen der Bilddatei ersetzen
    15. page.headerData.998.marks.BANNER < temp.banner

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

    1. <style type="text/css">
    2. <!--
    3. #pr_banner {background-image: url(http://www.domain.de/uploads/media/###BANNER###);}
    4. -->
    5. </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...

  • heikehk heikehk
    T3PO
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2011, 11:07

    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

  • 0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2011, 14:15

    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.

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

    Daran liegt es also nicht!

    SP

  • heikehk heikehk
    T3PO
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2011, 14:40

    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

  • lisardo lisardo
    Jedi-Meister
    0 x
    306 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2011, 18:04

    Hallo,

    So müsste es gehen: 

    1. page.20.marks.BANNER = IMAGE
    2. page.20.marks.BANNER.file {
    3.     import = uploads/media/
    4.     import.data = levelmedia: -1, slide
    5.     import.listNum = 0
    6.     width=xyz
    7.     height=xyz
    8.  
    9. }

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

    Gruß
    Peter, [url=http://www.typo3-lisardo.de]TYPO3 @ lisardo (Augsburg)[/url]

  • heikehk heikehk
    T3PO
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    31. 01. 2011, 21:56

    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

  • heikehk heikehk
    T3PO
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    08. 02. 2011, 11:06

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

    1. // Hintergrundbild über Konstante wechseln, indem die CSS für body überschreiben wird.
    2.  
    3. page.temp.10 = COA
    4. page.temp.10 {
    6.   value (
    7.      body {
    8.        background:#fbf5e4;
    9.        color:#4b4945;
    10.        background-image:url({$bg_Img});
    11.        background-position: bottom left;
    12.        background-repeat:no-repeat;
    13.        }
    14.    .page { 
    15.        background-image:url({$headerImg});
    16.        background-position: top left;
    17.  
    18.  
    19.     )
    20. }
    21.  
    22. page.headerData.10 = COA
    23. page.headerData.10 {
    24.   10 = TEXT
    25.   // Wichtig nur .value Übertragung klappt !!
    26.   10.value < page.temp.10.value
    27.   10.wrap = <style type="text/css"><!-- | --></style>
    28. }

    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:

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

    Durch die Definition: [b]#cat=seitenBilder=basic;type=file;label=templateHgBild[/b]
    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

  • 1
Präsentiert von