Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

TS/CSS: Typo3 TypoScript Setup

From TYPO3Wiki
Jump to: navigation, search

This code initializes the page...

page = PAGE
page.typeNum = 0

This code tells Typo3 to look at our HTML Template file: fileadmin/templates/blanknew.htm

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/blanknew.htm

This code lets us drop whatever extra HTML (defined in fileadmin/templates/footer.txt) we want into the footer area. You may prefer to add the details of your layout via your primary template file... but you might also consider using this principle to plug in specific modules of code to meet your specifications.

page.10.marks.FOOTER_GOES_HERE = FILE
page.10.marks.FOOTER_GOES_HERE.file = fileadmin/templates/footer.txt

In the interest of modularity, I also set up my dynamic menu TypoScript code as an external file.

page.10.marks.MENU_GOES_HERE  = HMENU
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/menu.txt">

The actual dynamic menu code (found in menu.txt) goes like this...

 # First level menu-object, textual
 page.10.marks.MENU_GOES_HERE.1 = TMENU
 page.10.marks.MENU_GOES_HERE.1 {
 # Level 1: Normal state properties
 NO.allWrap = <div class="menu1-level1-no"> | </div>
 NO.stdWrap.htmlSpecialChars = 1
 # Level 1: Enable active state and set properties:
 ACT = 1
 ACT.stdWrap.htmlSpecialChars = 1
 ACT.allWrap = <div class="menu1-level1-act"> | </div>

 # Level 1: Enable Spacer Menu Item (no link)
 SPC = 1
 SPC.doNotShowLink = 0
 SPC.doNotLinkIt = 1
 SPC.allWrap = <div class="spacer"> | </div>

 }

Additional levels of the menu can also be added, by expanding the menu.txt file. For example, level 2 would look like this...


  # Second level menu-object, textual
  page.10.marks.MENU_GOES_HERE.2 = TMENU
  page.10.marks.MENU_GOES_HERE.2 {

  # Level 2: Normal state properties
  NO.allWrap = <div class="menu1-level2-no"> | </div>
  NO.stdWrap.htmlSpecialChars = 1

  # Level 2: Enable active state and set properties:
  ACT = 1
  ACT.stdWrap.htmlSpecialChars = 1
  ACT.allWrap = <div class="menu1-level2-act"> | </div>
 
  # Level 2: Enable Spacer Menu Item (no link)
  SPC = 1
  SPC.doNotShowLink = 0
  SPC.doNotLinkIt = 1
  SPC.allWrap = <div class="spacer"> | </div>
 
  }

Now we're almost there! This segment tells Typo3 where to put the regular page content. Note: This can be done manually, by placing tt_content -- but that approach won't render some extensions (e.g. cmw_linklist or th_ultracards)

page.10.marks.CONTENT_GOES_HERE < styles.content.get

Finally, this code will allow us to add whatever CSS we want through one or more external stylesheets...

page.includeCSS {
 file1 = fileadmin/templates/stylesheet1.css
 file11 = fileadmin/templates/stylesheet2.css
 file12 = fileadmin/templates/stylesheet3.css
}

That's it!

Back to: Running with TypoScript and CSS

Back to: My first TYPO3 site