Einstieg in TYPO3 [Tag 11]: Customizing eines Templates

Unser bestehendes CSS-Template  wurde heute angepasst und bearbeitet, indem wir das Javascript JQUERY (Mouse-Over-Effect) eingebunden und ein neues Sidemenü erstellt haben.

Diese Aufgabe betrifft das Customizing.

Einbinden des Javascripts: JQERY 

(=> Mouse-Over-Effekt im Menü)

1. Neues Template «Headerdata» im Ordner TS erstellen.
2. Setup bearbeiten:

page.headerData.10 = TEXT
page.headerData.10.value (

<script type="text/javascript" src="fileadmin/templates/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/dropdown.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/cufon-yui.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/Grandesign_Neue_Serif_400-Grandesign_Neue_Serif_700-Grandesign_Neue_Serif_italic_400.font.js"></script>
<script type="text/javascript">
            Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('#mainmenu ul li a', {
        hover: true
       }) ('.button', {
        textShadow: '0px 1px 0px #fff'
       })
</script>
)

3. speichern und schließen
4. +ext MENU in Templates/TS wie folgt ergänzen:

lib.menu = HMENU
lib.menu {
  1 = TMENU
  1 {
    wrap = <ul id="menu"> | </ul>
    NO.wrapItemAndSub = <li> | </li>
    
    CUR = 1
    CUR.wrapItemAndSub = <li class="current"> | </li>
 
  expAll = 1
  }
  2 <.1
}

5. Template/Home öffnen
6. Das soeben geschriebene Template "+ext Headerdata" aus dem TS-Ordner in die Templates der HOME-Seite einbinden (s. "vollständigen Template-Datensatz bearbeiten/Enthält")
7. speichern und schließen

Einbinden des Templates Sidemenü

1. Neues Template «SIDEMENU» im Ordner TS erstellen.
2. Setup bearbeiten:

lib.menu = HMENU

lib.menu {
  1 = TMENU
  1 {
    wrap = <ul id="menu"> | </ul>
    NO.wrapItemAndSub = <li> | </li>
    
    CUR = 1
    CUR.wrapItemAndSub  = <li class="current"> | </li>
  }
  2 < .1
}

lib.sidemenu = HMENU
lib.sidemenu {
  entryLevel = -1
  1 = TMENU
  1 {
   wrap = <li><h2>Sidemenu</h2><div class="side_box"><ul> | </ul></div></li>
    NO.wrapItemAndSub = <li> | </li>
  }
}

Tipp: Nicht vergessen, auch den entsprechenden Marker in die HTML-Index-Datei des Templates zu setzen!

3. speichern und schließen
4. Template/Home öffnen
5. Das soeben geschriebene Template aus dem TS-Ordner in die Templates der HOME-Seite einbinden (s. "vollständigen Template-Datensatz bearbeiten/Enthält")
6. speichern und schließen