Platinum sponsors
Tutorials
Challenge (stdWrap/1)
Vous pouvez employer le date et le “strftime”. Chaque propriété a un type de donnée (datatype), "date-conf" et "strftime-conf" qui sont de base dans le manuel PHP
page.10 = TEXT
page.10.field = crdate
page.10.date = d-m-y H:i
Donne
01-07-00 15:48
page.10 = TEXT
page.10.field = crdate
page.10.strftime = %A %e. %B, %I:%M %p
Donne
Saturday 1. July, 03:48 PM
page.10 = TEXT
page.10.field = crdate
page.10.strftime = %A %e. %B, %I:%M %p
config.locale_all = deutsch
Donne
Samstag 1. Juli, 03:48
Challenge (stdWrap/2)
page.10 = TEXT
page.10.data = leveltitle:-2
Challenge (stdWrap/3)
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty = Hello world
Challenge (stdWrap/4)
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty {field = title
required = 1
wrap = <font color="red">|</font>
}
page.10.wrap = <H3>|</H3>
"ifEmpty" (du stdWrap) est une valeur de chaîne de caractères avec des propriétés de stdWrap, tant et si bien que le jeu continue, en utilisant “.field” et “.required” (lequel est retourné si “.field” retourne une valeur vide) et “.wrap” (qui est seulement exécuté si “.required” ne donne pas lieu à un retour de valeur)
Alternativement (en utilisant “.if” au lieu du “.required”)
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty {field = title
if.isTrue.field = title
wrap = <font color="red">|</font>
}
page.10.wrap = <H3>|</H3>
Challenge (cObject/1)
page.10 = COA
# Header to this section
page.10.10 = TEXT
page.10.10 {value = This is the page title:
...
20.wrap = Subtitle: <B> |</B>
20.required=1
}
Challenge (cObject/2)
page.10 = COA
page.10.if.isTrue.field = subtitle
...
Voir le TSref (- > if) pour des propriétés de cet objet. Dans ce cas-ci le ->if renvoie vrai (true) si le fieldvalue du sous-titre n'est pas vide
Challenge (cObject/3)
page.10 = COA
page.10.if.value = 1
page.10.if.isGreaterThan.data = level:1
...
Ici nous comparons deux valeurs. C'est un peu 'backwards' un retour en arrière, mais voilà comment cela fonctionne : "if retourne “true” si le “level” où nous sommes (rootline level, démarre à zéro pour la rootpage) est plus grande que la valeur définies by le “if.value"”
Questions (cObject/4)
Typo3 redimensionne réellement l'image.
Le premier exemple a le nom de fichier "/fileadmin/tsbyex/alligator.jpg".
Le deuxième exemple a le nom de fichier "typo3temp/3de305c72b.jpg". Le nom de fichier est le résultat retaillé d'un “md5-hash” calculé pour l'image lors de la fabrication du code de TypoScript. Notez qu'un changement des propriétés pour “imgResource”, c'est également un nouveau fichier dans le répertoire /typo3temp/ et donc celui ci avec le temps rassemblera beaucoup d'images inutilisées.
Challenge (cObject/5)
Version exhaustive :
page.10 = IMAGE
page.10 {file = fileadmin/tsbyex/alligator.jpg
file.width = 200
imageLinkWrap = 1
imageLinkWrap.enable = 1
imageLinkWrap.JSwindow = 1
}
La version "Rolls Royce":
page.10 = IMAGE
page.10 {file = fileadmin/tsbyex/alligator.jpg
file.width = 200
imageLinkWrap = 1
imageLinkWrap.enable = 1
imageLinkWrap.JSwindow = 1
imageLinkWrap {
bodyTag = <BODY bgColor=black>
wrap = <A href="javascript:close();"> | </A>
width = 400m
height = 300
JSwindow = 1
JSwindow.expand = 22,30
}
}
... donne pour résultat:
La fenêtre est fermée avec un clic sur l'image qui est limitée au une dimensions maximale de 400x300. La taille de la fenêtre Javascript est basée sur la taille de l'image mais 22 et 30 Pixels sont ajoutés afin de mettre des bords à la fenêtre.
Challenge (cObject/6)
page.10 = IMG_RESOURCE
page.10 {file = fileadmin/tsbyex/alligator.jpg
file.width = 200
}
page.10.stdWrap.wrap = <table border=1 cellpadding=30 background="|"><tr><td><BR><font color=white size=4><B>Hello World</b></font></td></tr></table>
(la dernière ligne est une ligne !)
Challenge (cObject/7)
page.5 = TEXT
page.5.value = Before ruler
page.5.wrap = | <BR>
page.10 = HRULER
page.10 {lineThickness = 3
lineColor = red
}
page.10.stdWrap.spaceAfter = 20
page.10.stdWrap.spaceBefore = 10
page.15 = TEXT
page.15.value = After ruler
Ceci a comme conséquence :
Notez que nous avons du mettre une étiquette <BR> après le "Before ruler" text. Dans le cas contraire, l'espace ci-dessus n'aurait pas fonctionné. Le code HTML:
Before ruler<BR>
<img src="clear.gif" width=1 height=10 border=0><BR>
<table border=0 cellspacing=0 cellpadding=0 width=99%>
<tr>
<td bgColor="red"><img src="clear.gif" width=1 height=3></td>
</tr>
</table>
<img src="clear.gif" width=1 height=20 border=0><BR>
After ruler
Challenge (cObject/8)
page.bodyTagMargins = 0
page.10 = OTABLE
page.10 {tableParams = border=0 cellpadding=0 cellspacing=0 width=1
offset = 0,20
10 = TEXT
10.value = What a cute little alligator! Dear Lord, may it never grow up!
10.wrap = |<BR>
20 = IMAGE
20.file = fileadmin/tsbyex/alligator.jpg
20.file.width=200
30 = CLEARGIF
30.width=250
30.stdWrap.wrap = <BR> |
}
Challenge (cObject/9)
page.10 = TEMPLATE
page.10 {template = FILE
template.file = fileadmin/tsbyex/template.html
workOnSubpart = DOCUMENT
marks.SIMPLE_WORD = TEXT
marks.SIMPLE_WORD.field = title
subparts.LINK = TEXT
subparts.LINK.current = 1
subparts.LINK.typolink {parameter.data = leveluid:1
wrap = <B>|</B>
target = _blank
}
}
Challenge (PHP_SCRIPT1)
Voir le fileadmin/tsbyex/test_calculate.inc
Essayer ce TypoScript (avec votre Gabarit d'essai) :
page.10 = PHP_SCRIPT
page.10.file = fileadmin/tsbyex/test_calculate.inc
Voici le résultat
Essayer d'entrer quelques nombres et de cliquez "Calculate!"
Voici la liste du code :
<?
if (is_object($this)){if (t3lib_div::GPvar("submit")){// Calculate result.
// Disable cache, because the result must not be cached:
$GLOBALS["TSFE"]->set_no_cache();
// Get values:
$value_1 = t3lib_div::GPvar("value_1");$value_2 = t3lib_div::GPvar("value_2");// Output result:
$content.="Result is: ".($value_1 + $value_2);
} else {// Draw the form:
$content.='
<form action="index.php?id='.$GLOBALS["TSFE"]->id.'&type='.$GLOBALS["TSFE"]->type.'&no_cache=1" method="POST">
<input type="Text" name="value_1"> + <input type="Text" name="value_2"> =<br>
<input type="Submit" name="submit" value="Calculate!">
</form>
';
}
} else die("You MUST include this script as a PHP_SCRIPT cObject.");?>
Particulièrement, je voudrais que vous notiez que le “URL” du formulaire est la page courante et que le paramètre “&no_cache=1” est envoyé. Ce paramètre force le script de “index_ts.php” à "exécuter" le TypoScript du Template (restituant de ce fait les cOjects).Si ce paramètre n'est pas placé, nous pourrions au lieu d'obtenir ce résultat, voir le formulaire du fait du cache des pages!
Challenge (PHP_SCRIPT2)
Dans vos scritps “include” vous pouvez employer la fonction “$this->enablefields("[table-name>]")” pour obtenir de la partie provenant de la “Where-clause” les enregistrements “deselects” d'une table, du moment qu'ils sont soit en “cache” ou “hidden” ou “timed” ou encore user-disabled” - basés sur les paramétrages dans “tables.php”.
Voilà pourquoi il est brillant ! Il vous fournit une manière “blindée” pour obtenir des résultats corrects pour vos “SQL-queries” en tenant compte des dispositifs dissimulés du “start-/endtime” et du “fe_group” pour les enregistrements retournés - si ces dispositifs apparaissent.
Essayer cet exemple :
dans votre template (votre template de test)
page.10 = PHP_SCRIPT
page.10.file = fileadmin/tsbyex/test_enablefields.inc
Allez sur le site:
|pages|| AND NOT pages.deleted AND NOT pages.hidden AND (pages.starttime<=985903309) AND (pages.endtime=0 OR pages.endtime>985903309) AND pages.fe_group IN (0,-1)|
|tt_content|| AND NOT tt_content.deleted AND NOT tt_content.hidden AND (tt_content.starttime<=985903309) AND (tt_content.endtime=0 OR tt_content.endtime>985903309) AND tt_content.fe_group IN (0,-1)|
|tt_address|| AND NOT tt_address.deleted AND NOT tt_address.hidden|
Comme vous pouvez voir, la fonction va afficher avec le debug() function, voyez le fichier /”/fileadmin/tsbyex/test_enablefields.inc” le résultat de la “WHERE-clause”.
Pour toutes les “table”, "page", "tt_content" et "tt_address" le champ “deleted” ne peut contenir “true”. Ce champ “deleted” est disposé pour les enregistrements supprimés de Typo3. Ainsi toutes les tables sont 'checked' sur leur “hidden-field”
Mais apparemment, la table "tt_address" n'a pas de champs “startime” et “endtime” au contraire de "pages" et de "tt_content".
Une rapide vérification dans “tables.php”:
(pages)
...
$tc[pages] = Array (
"ctrl" => Array (
"label" => "title",
"tstamp" => "tstamp",
"sortby" => "sorting",
"title" => "Page|Side|Seite|Side|Pagina|Page",
"type" => "doktype",
"delete" => "deleted",
"crdate" => "crdate",
"cruser_id" => "cruser_id",
"enablecolumns" => Array (
"fe_group" => "fe_group",
"disabled" => "hidden",
"starttime" => "starttime",
"endtime" => "endtime"
),
"mainpalette" => 1,
"useColumnsForDefaultValues" => "doktype,fe_group,hidden"
...
(tt_content)
$tc[tt_content] = Array (
"ctrl" => Array (
"label" => "header",
"sortby" => "sorting",
"tstamp" => "tstamp",
"title" => "Pagecontent|Sideindhold|Seiteninhalt|Sideinnhold|Contenuto pagina|Contenu de la page",
"delete" => "deleted",
"type" => "CType",
"enablecolumns" => Array (
"fe_group" => "fe_group",
"disabled" => "hidden",
"starttime" => "starttime",
"endtime" => "endtime"
),
"typeicon_column" => "CType",
"typeicons" => Array (
...
(tt_address)
$tc[tt_address] = Array (
"ctrl" => Array (
"label" => "name",
"default_sortby" => "ORDER BY name",
"tstamp" => "tstamp",
"delete" => "deleted",
"title" => "Address|Adresse|Adresse|Adresse|Indirizzo:",
"enablecolumns" => Array (
"disabled" => "hidden"
),
"thumbnail" => "image"
),
...
Ces exemples montrent où les "enablefields" sont configurés.
“Code” de "/fileadmin/tsbyex/test_enablefields.inc"
<?
debug("pages",1);debug($this->enableFields("pages"),1);debug("tt_content",1);debug($this->enableFields("tt_content"),1);debug("tt_address",1);debug($this->enableFields("tt_address"),1);?>
Challenge (imgResource/1)
page.bgImg.import {cObject = TEXT
cObject.value = fileadmin/tsbyex/alligator.jpg
cObject.override {required = 1
field = media
listNum = 1
wrap = uploads/media/ |
}
}
page.bgImg.width = 200
Challenge (GIFBUILDER/1)
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file {XY = [20.w]+20, 30
colbacks = olive
20 = TEXT
20.text.field = title
20.offset = 10,20
20.niceText = 1
20.fontSize= 20
20.fontFile = t3lib/fonts/verdana.ttf
20.fontColor = #660000
20.emboss {offset = -2,-2
highColor = olive : +30
lowColor = olive : -30
blur = 30
opacity = 80
}
}
Résultat:
Notez les définitions de couleur dans la propriété “.emboss”. Le TSref indique que la valeur est "GraphicColor" laquelle a une option qui nous laisse arithmétiquement changer la valeur de couleur. Dans ce cas-ci, la couleur "high" (light) est éclaircie (linear brightness value) de “30” et la "low" est obscurcie de même de “30”. Malheureusement, Typo3 (ImageMagick...) ne supporte pas le mode “blend” (combinaison) "multiply" et "screen" qui sont habituels pour beaucoup des programmes de manipulation d'image. Ces modes auraient été plus correctes dans ces situations.
Challenge (GIFBUILDER/2)
page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file {XY = 200, 160
colbacks = silver
20 = TEXT
20.text.field = title
20.offset = 0,120
20.niceText = 1
20.align=center
20.fontSize= 40
20.fontFile = t3lib/fonts/verdana.ttf
20.fontColor = yellow
# Left, top
30 = IMAGE
30.file = fileadmin/tsbyex/alligator.jpg
30.file.width=50
30.offset = 5,5
# Left, bottom
31 < .30
31.align = , b
31.offset = 5,-5
# Right, top
32 < .30
32.align = r , t
32.offset = -5,5
# Right, bottom
33 < .30
33.align = r , b
33.offset = -5,-5
}
Résultat:
Les propriétés “.align” et “.offset” sont reliées entre elles comme vous voyez. Si vous spécifiez l'alignement à "r,b" (right - bottom), l'excentrage est relatif à cette position et vous devez spécifier "-5, -5" pour décaler l'image vers le haut et la gauche.
Notez, en outre, comment la syntaxe de TypoScript est utilisée pour copier le premier objet à la position adéquate dans l'autre objet, nous préservant de ce fait de redondances qu'auraient impliqué la définition du même nom de fichier à plusieurs reprises, encore et encore… Voilà comment il apparaît dans le “Object Browser”:
Challenge (GIFBUILDER/3)
Ajoutez:
# Left border
40 = BOX
40.color = red
40.dimensions = 0,0,2,160
# Right border
41 < .40
41.align = r
# Top border
42 < .40
42.dimensions = 0,0,200,2
# Bottom border
43 < .42
43.align = ,b
}
Résultat:
Challenge (TMENU/1)
...
wrap = <tr><td nowrap> | </td></tr>
target = page
NO {afterImg = media/bullets/bullet1_n.gif
afterROImg = media/bullets/bullet1_h.gif
afterImgTagParams = hspace=2
RO = 1
after = <br>
...
Challenge (TMENU/2)
...
after = <br>
ATagBeforeWrap = 1
linkWrap= <font face=Verdana size=1 color=black> | </font>
}
}
page.10.3 < page.10.2
page.10.3.wrap >
page.10.3.NO.before = <font size=1> </font>
page.10.2.expAll = 1
(afin d'avoir assez d'items de menu, j'ai dû déplacer quelques pages provenant de "Another site in...")
Challenge (TMENU/3)
page.10 = HMENU
page.10.1 = TMENU
page.10.1.target = page
page.10.1 {expAll = 1
wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1 hspace=200 height=1 vspace=3 border=0></td></tr> | </table>
NO.linkWrap = <font face=Arial size=2 color=black><b> |</b></font>
NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0><br> | </td></tr>
NO.ATagBeforeWrap = 1
ACT < .NO
ACT = 1
ACT.linkWrap = <font face=Arial size=2 color=red><b> |</b></font>
}
page.10.2 = TMENU
page.10.2 {wrap = <tr><td nowrap> | </td></tr>
target = page
NO {afterImg = media/bullets/bullet1_n.gif
afterROImg = media/bullets/bullet1_h.gif
afterImgTagParams = hspace=2
RO = 1
after = <br>
ATagBeforeWrap = 1
linkWrap= <font face=Verdana size=1 color=black> | </font>
}
ACT < .NO
ACT =1
ACT.linkWrap = <font face=Verdana size=1 color=red> | </font>
}
Challenge (TMENU/4)
temp.challengeMenu = HMENU
temp.challengeMenu.stdWrap.wrap = <TABLE width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#004828"><TR><TD><TABLE border="0" width="100%" cellspacing="1" cellpadding="2">|</TABLE></TD></TR></TABLE>
temp.challengeMenu.entryLevel = 0
temp.challengeMenu.1 = TMENU
temp.challengeMenu.1.target = _top
temp.challengeMenu.1.NO {allWrap = <TR><TD bgcolor="#638E7B" align="center" valign="top" width="5"><IMG src="/typo3/sysext/cms/tslib/media/bullets/blackdot.gif" width="5" height="9"></TD><TD bgcolor="#638E7B" width="160"> | </TD></TR>
ATagBeforeWrap = 1
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C"> | </FONT>
stdWrap.case = upper
}
temp.challengeMenu.1.ACT < temp.challengeMenu.1.NO
temp.challengeMenu.1.ACT = 1
temp.challengeMenu.1.ACT {linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="white"> | </FONT>
}
temp.challengeMenu.2 = TMENU
temp.challengeMenu.2.target = _top
temp.challengeMenu.2.NO {allWrap = <TR><TD colspan="2" bgcolor="#D0DCD8">|</TD></TR>
ATagBeforeWrap = 1
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
stdWrap.case = upper
}
temp.challengeMenu.2.ACT < temp.challengeMenu.2.NO
temp.challengeMenu.2.ACT = 1
temp.challengeMenu.2.ACT {allWrap = <TR><TD colspan="2" bgcolor="#FFFBE7">|</TD></TR>
linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
}
page.noLinkUnderline =1
page.10 < temp.challengeMenu
Exemple (TMENU)
temp.leftmenu = HMENU
temp.leftmenu.entryLevel = 0
temp.leftmenu.1 = TMENU
temp.leftmenu.1.target = _top
temp.leftmenu.1.collapse = 1
temp.leftmenu.1.wrap = <table border=0 cellpadding=0 cellspacing=0> | </table>
temp.leftmenu.1.NO {allWrap = <TR><TD colspan=2><img src="clear.gif" width=1 height=5></TD></TR><TR><TD colspan=2> | </TD></TR>
ATagBeforeWrap = 1
linkWrap = <b><font face="verdana" size=1 color=black> | </font></b>
stdWrap.case = upper
}
temp.leftmenu.2 = TMENU
temp.leftmenu.2.target = _top
temp.leftmenu.2.wrap = | <TR><TD><img src="clear.gif" width=1 height=10></TD><TD></TD></TR>
temp.leftmenu.2.NO {allWrap = <TR><TD><img src="clear.gif" width=10 height=1></TD><TD> | </TD></TR>
after = <BR><img src="/typo3/sysext/cms/tslib/media/bullets/stipler3.gif" height=1 vspace=1> |*||*| <img src="clear.gif" width=1 height=1><BR>
ATagBeforeWrap = 1
linkWrap = <font face="verdana" size=1 color=black> | </font>
}
page.10 < temp.leftmenu
Résultat:
Challenge (IMGMENU/1)
...
dWorkArea = 77,15
NO.distrib = 0, 15
NO.10 = TEXT
NO.10 {text.field = title
fontSize = 11
fontColor = black
niceText = 1
offset = 0,0
imgMap.explode = 3,2
}
NO.20 = BOX
NO.20 {dimensions = 0,3,120,1
color = white
}
}
page.10 < temp.topmenu
Note que le "||" du "NO.20" est supprimé afin que la ligne blanche apparaisse sous chaque élément!
Challenge (IMGMENU/2):
...
NO.20 = BOX
NO.20 {dimensions = 0,3,120,1
color = |*| white || black |*|
}
}
Résultat:
Challenge (GMENU/1)
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {XY = [10.w]+20,20
colbacks = olive
10 = TEXT
10.text.field = title
10.offset = 0,13
10.align = center
10.niceText = 1
10.emboss {
offset = -2,-2
highColor = olive : +30
lowColor = olive : -30
blur = 30
opacity = 80
}
}
page.10.1.RO < page.10.1.NO
page.10.1.RO = 1
page.10.1.RO {
10.emboss.offset = 2,2
}
Exemple élaboré (GMENU)
Mettre ceci dans le champ “Constants”:
buttonH = 25
buttonColor = #ccccff
Mettre ceci dans le champ “Setup”:
temp.topmenuText = TEXT
temp.topmenuText {text.field = title
offset = 10,17
fontFile = fileadmin/fonts/arial_bold.ttf
fontSize = 15
niceText = 1
}
temp.topmenu = HMENU
temp.topmenu.1 = GMENU
temp.topmenu.1.target = _top
temp.topmenu.1.accessKey = 1
temp.topmenu.1.NO { XY = [100.w]+22, {$buttonH} colbacks = {$buttonColor}10 = IMAGE
10.file = GIFBUILDER
10.file {XY = 6,30
colbacks = {$buttonColor} : *0.5100 = SCALE
100.width = 6
100.height = {$buttonH}}
10.mask = GIFBUILDER
10.mask {XY = 6,30
10 = IMAGE
10.file = media/buttons/maskpart1.tif
100 = SCALE
100.width = 6
100.height = {$buttonH}}
20 = IMAGE
20.file = GIFBUILDER
20.align = r
20.file {XY = 6,30
colbacks = {$buttonColor} : *0.5100 = SCALE
100.width = 6
100.height = {$buttonH}}
20.mask = GIFBUILDER
20.mask {XY = 6,30
10 = IMAGE
10.file = media/buttons/maskpart2.tif
100 = SCALE
100.width = 6
100.height = {$buttonH}}
30 = IMAGE
30.file = GIFBUILDER
30.offset = 6,0
30.file { XY = [100.w]+10,{$buttonH} colbacks = {$buttonColor} : *0.5100 < temp.topmenuText
100.hide = 1
}
30.mask = GIFBUILDER
30.mask {XY = [40.w], [40.h]
40 = IMAGE
40.file = media/buttons/maskpart3.tif
60 = SCALE
60.width = [100.w]+10
60.height = {$buttonH}100 < temp.topmenuText
100.hide = 1
}
100 < temp.topmenuText
}
temp.topmenu.1.RO < temp.topmenu.1.NO
temp.topmenu.1.RO=1
temp.topmenu.1.RO.100.fontColor = white
page.10 < temp.topmenu
Résultat:
Challenge (GMENU/2)
page.10 = HMENU
page.10.1 = GMENU
page.10.1.NO {XY = [10.w]+20,20
colbacks = olive
4 = IMAGE
4.file = media/buttons/middle.gif
4.tile = 10
5 = IMAGE
5.file = media/buttons/left.gif
6 = IMAGE
6.file = media/buttons/right.gif
6.align = r
10 = TEXT
10.text.field = title
10.offset = 0,13
10.align = center
10.niceText = 1
}
Challenge (GMENU_LAYERS/1)
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden;
xPosOffset =-10
lockPosition = x
expAll=1
NO {colbacks = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.text.field = title
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.wrap = |<BR>
page.10.2.NO {colbacks = |*| #99cccc || #99cccc : *1.2 |*|
XY = 120, 20
10 = TEXT
10.text.field = title
10.offset = 5,13
10.niceText = 1
20 = BOX
20.dimensions = 0,0,2,20
20.color = #660000
21 < .20
21.align = r
22 = BOX ||
22.dimensions = 0,0,120,2
22.color = #660000
23 = |*||*| || BOX
23.dimensions = 0,0,120,2
23.color = #660000
23.align = ,b
}
Résultat:
Commentaires: Les objects GIFBUILDER 22 et 23 sont activées par optionSplit. Dans le cas du "22" optionSplit assigne "BOX" comme valeur pour le premier item du menu. Dans le cas du "23" optionSplit assigne "BOX" comme valeur seulement pour le dernier item. Référez-vous à l'exemple optionSplit de TSref.
Challenge (GMENU_LAYERS/2)
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden;
yPosOffset =-30
lockPosition = y
expAll=1
NO {wrap = |<BR>
colbacks = |*| #ff6600 || #ff6600 : -30 |*|
XY = 130, 15
10 = TEXT
10.text.field = title
10.text.case = upper
10.offset = 5,10
10.niceText = 1
10.fontFace = t3lib/fonts/verdana.ttf
10.fontSize = 8
10.spacing = 2
20 < .10
}
RO < .NO
RO=1
RO.backColor = #ff9900
}
page.10.2 = GMENU
page.10.2.wrap = |<BR>
page.10.2.NO {colbacks = |*| #99cccc || #99cccc : *1.2 |*|
XY = 120, 20
10 = TEXT
10.text.field = title
10.offset = 5,13
10.niceText = 1
20 = BOX
20.dimensions = 0,0,2,20
20.color = #660000
21 < .20
21.align = r
22 = BOX ||
22.dimensions = 0,0,120,2
22.color = #660000
23 = |*||*| || BOX
23.dimensions = 0,0,120,2
23.color = #660000
23.align = ,b
}
Résultat:
La chose principale est de changer l'orientation du GMENU_LAYERS ici est de réarranger les paramètres pour les couches dynamiques (dynamic layers):
layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden;
yPosOffset =-30
lockPosition = y
Quand vous appliquerez le menu sur une page, vous aurez besoin de fignolez (“tweek”) ces paramètres pour adapter le design de la page afin que le menu apparaisse correctement avec les coordonnées spécifiées.
Entre autres choses astucieuses dans ce menu, il y a
20 < .10
Ceci crée une copie du textobject, parce que sans le texte, il tend à être trop faiblard. Ainsi c'est un “workaround” (contournement) du fait que nous ne disposons pas de la version "bold" de la police. Voilà à quoi il ressemblerait sans:
