Published in: TYPO3
URL: http://p21304.typo3server.info
Using this TypoScript, you can build an accessible GTMenu which may fully be styled using CSS. We propose using this instead of ANY GMENU which creates ugly code.
It renders a simple TMENU, and wraps an IMG_RESOURCE into the ATagParams by making this a cObject. There will be a podcast on typo3.org sometime soon.
Please note: in order to use {TSFE:lastImgResourceInfo|0} (which reads the width of the last image generated by the gifbuilder) you need TYPO3 4.1
############################# # subpart temp.nav_mainUDM ############################# # temp.menu1 = HMENU temp.menu1 { entryLevel = 0 1 = TMENU 1 { expAll = 1 wrap = <ul id="nav">|</ul> NO = 1 NO.doNotLinkIt = 1 NO.wrapItemAndSub = <li>|</li> NO.stdWrap.cObject = COA NO.stdWrap.cObject{ 10 = TEXT 10 { field = subtitle//title typolink { parameter.field = uid ATagParams.cObject = COA ATagParams.cObject { 20 = IMG_RESOURCE #10 = IMAGE 20.file = GIFBUILDER 20.file { XY = [10.w]+[20.w]+10,70 transparentColor = #ffffff #backColor = #ffffff 20 = TEXT 20 { text.field = title text.case = upper fontSize = 14 fontFile=fileadmin/fonts/someFont.ttf offset = 5,20 fontColor = #787879 niceText = 1 } 30 = BOX 30.dimensions = 0,30,[10.w]+[20.w]+10,35 30.color = #e53827 40 = TEXT 40 < .20 40 { offset = 5,50 fontColor = #ffffff } } 20.stdWrap.dataWrap = class="imageheader" style="width:{TSFE:lastImgResourceInfo|0}px; background-repeat:no-repeat;background-image: url('/|');" } } } } ACT = 1 ACT < .NO ACT { wrapItemAndSub = <li class="current">|</li> } } 2 = TMENU 2 { wrap = <ul>|</ul> NO { wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li> } CUR = 1 CUR { wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li> ATagParams = class="act-2ndlevel" } ACT = 1 ACT < .CUR } }
You need to login to post a comment.
