Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-10 of 15 total  RSS 

Vertical Title

   1  
   2  temp.menu = IMAGE
   3  temp.menu { 
   4  wrap = | 
   5  file = GIFBUILDER 
   6  file {
   7  XY = 140,[20.h]+80
   8  backColor = #EEEEEE
   9  20 = TEXT
  10  20 {
  11  case = upper 
  12  angle = 90
  13  text.field = title
  14  fontSize = 39,26
  15  fontFile = fileadmin/fonts/xy.TTF
  16  fontColor = #CCCCCC
  17  offset = 80,[20.h]+60
  18  }
  19  } 
  20  }
  21  
  22  page.10 < temp.menu

Override settings only for print-template

put whatever you like to override inside the condition, 'alt_print' is the page-object of the print version.

   1  
   2  [globalVar = GP:type = 98]
   3  alt_print.10.marks.PAGETITLE.default.10.file.10.fontColor = #000000
   4  #etc
   5  [global]

Content Switch: show a message when no content on a page is inserted

   1  
   2  temp.contentSwitch = COA
   3  temp.contentSwitch {
   4   10 = TEXT
   5   10.value = <div class="error"><span class="bold">*No contentelements*</span>  on this page!</div>
   6   10.if.isFalse.numRows < styles.content.get
   7   20 < styles.content.get
   8  }
   9  
  10  # insert the right path to your template here (look in TSOB):
  11  
  12  page.10.xy.subparts.content < temp.contentSwitch
  13  

Show some useful Page Infos

Note: to function properly insert the right ###markers### in your template.

   1  
   2  # INFOBOX
   3  
   4  temp.author = TEXT	
   5  temp.author.data = page:author
   6  
   7  temp.author_mail = TEXT
   8  temp.author_mail.data = page:author_email
   9  
  10  temp.crdate = TEXT
  11  temp.crdate.data = page:crdate
  12  temp.crdate.strftime = %d. %b, %Y
  13  #temp.crdate.date = d. M, Y
  14  
  15  temp.lastUpdate = TEXT
  16  temp.lastUpdate.data = page:SYS_LASTCHANGED
  17  temp.lastUpdate.strftime = %d. %b, %Y
  18  #temp.lastUpdate.date = d. M, Y
  19  
  20  styles.content.lastUpdate = TEXT
  21  styles.content.lastUpdate {
  22    data = page:SYS_LASTCHANGED
  23    if.isTrue.data = page:SYS_LASTCHANGED
  24    date >
  25    wrap = <span class="text_b">Last update of this page:</span>&nbsp;|
  26    strftime = %d. %b, %Y
  27    data = register:SYS_LASTCHANGED
  28    if >
  29  }
  30  
  31  # Set the right path to your template here:
  32  
  33  page.10.xy.marks.lastUpdate < temp.lastUpdate
  34  page.10.xy.marks.author < temp.author
  35  page.10.xy.marks.author_mail < temp.author_mail
  36  page.10.xy.marks.crdate < temp.crdate
  37  

Automatic Pagetitle

Renders the current Pagetitle as a Gif File. Put it in your Template above the content.

   1  
   2  
   3  # PAGETITLE
   4  
   5  temp.title = IMAGE
   6  temp.title.wrap = <h1>|</h1>
   7  temp.title.file = GIFBUILDER
   8  temp.title.file {
   9    XY = [10.w]+4, 23
  10    backColor = #F6F6F6
  11    10 = TEXT
  12    10 {
  13     text.data = page:subtitle // page:title
  14     fontSize = 18
  15     fontFile = fileadmin/template/fonts/THESASBP.TTF
  16     fontColor = #005277
  17     offset = 0,16
  18     align = left
  19     niceText = 1
  20    }
  21  }
  22  
  23  page.10 < temp.title
  24  

Site Path Navigation

Looks like this:

Home : About : Page1 : Page2

   1  
   2  temp.nav_bc = HMENU
   3  temp.nav_bc.special = rootline
   4  temp.nav_bc.special.range = 1|8
   5  #temp.nav_bc.excludeUidList = 177
   6  temp.nav_bc.1 = TMENU
   7  temp.nav_bc.1 {
   8    NO.linkWrap = |&nbsp;:&nbsp;|*||*| |
   9    NO.stdWrap.htmlSpecialChars = 1
  10    NO.stdWrap.field = nav_title // title
  11    CUR < NO
  12    CUR = 1
  13    #CUR.doNotLinkIt = 1
  14    CUR.stdWrap.htmlSpecialChars = 1
  15  }
  16  
  17  page.10 < temp.nav_bc
  18  

Subvnavigation with Lists (1 Level)

The current Level (one up) is shown above the subnavigation (temp.titleT)

   1  
   2  # SUBNAVIGATION
   3  
   4  temp.titleT = HMENU
   5  temp.titleT.wrap = <div id="cur_level">|</div>
   6  temp.titleT.special = rootline
   7  temp.titleT.special.range = 1|1
   8  temp.titleT.1 = TMENU
   9  temp.titleT.1 {
  10    NO.wrap = <span>|</span>
  11  }
  12  
  13  temp.subnav = HMENU
  14  temp.subnav.entryLevel = 1
  15  temp.subnav.1 = TMENU
  16  temp.subnav.1 {
  17  
  18    wrap = <ul> | </ul>
  19    NO.wrapItemAndSub = <li>|</li>
  20    NO.stdWrap.htmlSpecialChars = 1
  21    NO.ATagParams = | |*||*|class="last"|
  22    ACT < NO
  23    ACT = 1
  24    ACT.wrapItemAndSub = <li class="act">|</li>
  25    ACT.stdWrap.htmlSpecialChars = 1
  26  
  27  }
  28  
  29  temp.subnav_area = COA
  30  temp.subnav_area.10 < temp.titleT
  31  temp.subnav_area.20 < temp.subnav
  32  
  33  page.10 < temp.subnav_area
  34  


Style it with CSS

   1  
   2  /* 1.Level */
   3  #subnav UL { padding:0; margin:0; list-style:none; border-top:5px solid #bcc2be;}
   4  #subnav UL LI A { display:block; text-decoration:none; background:#e4e7e5; padding:4px 2px 4px 7px; width:100%; border-bottom:1px solid #FFF;}
   5  HTML>BODY #subnav UL LI A  { width:auto;}
   6  #subnav UL LI A:hover { background:#f1f3f2 url('bg_nav_arr.gif') no-repeat 152px 8px;}
   7  #subnav UL LI.act A { background:#f1f3f2 url('bg_nav_arr.gif') no-repeat 152px 8px;}
   8  #subnav UL LI A.last { border:0;} 



Suckerfish Navigation with Typoscript (2 Level)

   1  
   2  # Suckerfish Navigation
   3  
   4  temp.nav_main = HMENU
   5  temp.nav_main.entryLevel = 0
   6  #temp.nav_main.excludeUidList = 48
   7  temp.nav_main.1 = TMENU
   8  temp.nav_main.1 {
   9    expAll = 1
  10    wrap = <ul id="nav"> | </ul>
  11    NO.wrapItemAndSub = <li>|</li>||*||*|<li class="last">|</li>|
  12    NO.stdWrap.htmlSpecialChars = 1
  13    ACT < NO
  14    ACT = 1
  15    ACT.wrapItemAndSub = <li class="act">|</li>||*||*|<li class="act last">|</li>|
  16    ACT.stdWrap.htmlSpecialChars = 1
  17  }
  18  
  19  temp.nav_main.2 < temp.nav_main.1
  20  temp.nav_main.2 {
  21    wrap = <ul> | </ul>
  22    NO.ATagParams =
  23    ACT.wrapItemAndSub = <li class="act2">|</li>
  24  }
  25  
  26  page.10 < temp.nav_main
  27  


Note:
For windows IE include the following Javascript Snippet on your page:

   1  
   2  // patch IE's :hover & :focus problems with tags other than <a>
   3  
   4  sfHover = function() {
   5  	var sfEls = document.getElementById("nav").getElementsByTagName("li");
   6  	for (var i=0; i<sfEls.length; i++) {
   7  		sfEls[i].onmouseover=function() {
   8  			sel = document.getElementsByTagName("select");
   9  			for (var i=0; i<sel.length; i++) {
  10  				sel[i].style.visibility = 'hidden';	
  11  			}
  12  			this.className+=" sfhover";
  13  		}
  14  		sfEls[i].onmouseout=function() {
  15  			sel = document.getElementsByTagName("select");
  16  			for (var i=0; i<sel.length; i++) {
  17  				sel[i].style.visibility = 'visible';	
  18  			}
  19  			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  20  		}
  21  	}
  22  	
  23  }
  24  // only win:
  25  if (window.attachEvent) window.attachEvent("onload", sfHover);



Style it with CSS:

   1  
   2  /* 1. Level */
   3  #nav, #nav UL { padding:0; margin:0; list-style:none;}
   4  #nav LI { float:left; padding:5px 21px 3px 21px; background:#3477b5; border-top:5px solid #1b5e96; border-bottom:4px solid #3477b5;}
   5  #nav LI.last { background-image:0;}
   6  #nav LI A { display:block; color:#FFF; text-transform:uppercase; font-size:10px; font-weight:bold; letter-spacing:1px;}
   7  #nav LI:hover , #nav LI.sfhover { background:0; background:#1b5e96; border-top-color:#1b5e96; border-bottom-color:#1b5e96;}
   8  #nav LI.act { background:0; background-color:#e4e7e5; border-top-color:#e4e7e5; border-bottom-color:#e4e7e5;}
   9  #nav LI.act A { color:#1b5e96;}
  10  
  11  /* 2. Level */
  12  #nav LI UL { position:absolute; width:20em; left:-999em; margin:7px 0 0 -21px;}
  13  HTML>BODY #nav LI UL { margin-left:0px;}
  14  #nav LI UL LI { width:15em; background:#FFF; border:1px solid #E0E1DB; border-width:0 1px 1px 1px; padding:0 0 0 7px;}
  15  #nav LI:hover UL LI A, #nav LI.sfhover UL LI A { text-transform:none; letter-spacing:normal; font-weight:normal; color:#1b5e96; padding:4px 2px 4px 2px;}
  16  #nav LI UL LI:hover, #nav LI UL LI.sfhover  { background:#f1f3f2 url('bg_nav_arrt.gif') no-repeat right 8px; border-bottom-color:#E0E1DB;}
  17  #nav LI UL LI.act2 { background-color:#f1f3f2;}
  18  
  19  #nav LI:hover UL, #nav LI.sfhover UL { left:auto;}
  20  #nav A { text-decoration:none;}
  21  #nav A:hover { text-decoration:none;}



Show Image from Page Properties (Headerimage)

Note:
1. Set the page type to 'advanced'
2. Upload an image in the page properties/Field 'Files'

   1  
   2  # HEADER IMG
   3  
   4  temp.headerimg = IMAGE
   5  temp.headerimg {
   6    //default image
   7    file = fileadmin/template/img/headerimg/darts.jpg
   8    
   9    // override it with an image inserted in page properties in field
  10    file.import.data = levelmedia: -1, "slide"
  11    file.import = uploads/media/
  12    file.import.listNum = 0
  13    file.import.override.field = media
  14    
  15    border = 0
  16    altText = xy
  17    titleText = xy
  18  
  19  }
  20  
  21  page.10 < temp.headerimg
  22  

Language Switch


   1  
   2  # LANGMENU
   3  
   4  temp.langMenu = HMENU
   5  temp.langMenu.special = language
   6  temp.langMenu.special.value = 0,1,2
   7  temp.langMenu.special.normalWhenNoLanguage = 0
   8  temp.langMenu.1 = GMENU
   9  temp.langMenu.1.NO {
  10    9 = IMAGE
  11    9.file = fileadmin/template/img/uk_d.gif || fileadmin/template/img/de_d.gif || fileadmin/template/img/fr_d.gif
  12  }
  13  
  14  temp.langMenu.1.ACT < temp.langMenu.1.NO
  15  temp.langMenu.1.ACT = 1
  16  temp.langMenu.1.ACT.9.file = fileadmin/template/img/uk.gif || fileadmin/template/img/de.gif || fileadmin/template/img/fr.gif
  17  
  18  page.10 < temp.langMenu
  19  
« Newer Snippets
Older Snippets »
Showing 1-10 of 15 total  RSS