I want to create a menu with Typoscript, but it's doesn't work.
I have no code generate. My <body> is empty.
Here my Typoscript code:
# Default PAGE object:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/template.html
page.shortcutIcon = fileadmin/templates/favicon.png
page.stylesheet = fileadmin/templates/css/styles.css
page.10.workOnSubpart = DOCUMENT
######################################################
#
# Configuration of SUBPARTS
#
######################################################
# Define the subparts, which are inside the subpart DOCUMENT
page.10.subparts {
##############################################
#
# Subpart NAVMENU
#
##############################################
# The subpart NAVMENU outputs the meta navigation
# at the top right corner of the page
NAVMENU = HMENU
NAVMENU.wrap = <ul>|</ul>
# Only display special pages here: Contact and Imprint
METANAV.special = list
# LIST NEEDS MODIFICATION:
# Take your page IDs!
# Change the values in the following list!
NAVMENU.special.value = 70, 92, 74, 91
NAVMENU.1 = TMENU
NAVMENU.1 {
# NO: default formatting
NO = 0
NO {
# Each entry is wrapped by
# <li> </li>
allWrap = <li>|</li>
}
}
}
######################################################
#
# Configuration of MARKERS
#
######################################################
# Define the markers inside the subpart DOCUMENT
page.10.marks {
}
Here is the tutorial helping me to make my menu: http://wiki.typo3.org/Templating_Tutorial_-_Basics
You have a METANAV in between your NAVMENU configuration:
NAVMENU = HMENU
NAVMENU.wrap = <ul>|</ul>
# Only display special pages here: Contact and Imprint
METANAV.special = list
Change the last line to NAVMENU as well or use curly braces. Make sure in your Template html file a DOCUMENT subpart exsts and inside that subpart a NAVMENU subpart exists. Only then you will see output.
The answer form Daniel is right.
And there are different states of a menu. NO is the default state and you do not need to deactivate it (it's wrong: NO = 0). Only if you need more states you have to set each one like ACT = 1 (CUR = 1 and so on).
NAVMENU= HMENU
NAVMENU {
special = list
special.value = 70, 92, 74, 91
1 = TMENU
1.wrap = <ul>|</ul>
1{
NO{
wrapItemAndSub = <li class="menu-normal">|</li>
}
ACT=1
ACT{
wrapItemAndSub = <li class="menu-active">|</li>
}
}
}
Related
I'm using the field Frontend-Layout at my TYPO3 7.6-Backend. Because my website will have four different departments with different colours in frontend.
So I'm using:
TCEFORM {
pages {
layout {
altLabels {
0 = [ blue]
1 = [ orange ]
2 = [ green]
3 = [ yellow]
}
}
}
} ### TCEFORM
At my FLUIDTEMPLATE I'll wrap an <div>-wrapper, to set my different languages globally at my stylesheet. f.e. div.wrap.blue { background-color:blue;}
<div class="wrap
{f:if(condition:'{data.layout} == 0',then:'blue')}
{f:if(condition:'{data.layout} == 1',then:'orange')}
{f:if(condition:'{data.layout} == 2',then:'green')}
{f:if(condition:'{data.layout} == 3',then:'yellow')}">
...
This works perfect for me.
But how can I slide (or inherit) the frontend-layout-info from my parent-page to the subpages on my pagetree? I don't want to choose the frontend layout in page properties everytime, if I will add a new page into my pagetree. This must be working automatically. Is this possible? With slide?
For example
*ROOT
+ parent blue
~~ sub blue 1 /* these pages also have frontend layout 0 */
~~ sub blue 2
+ parent orange
~~ sub orange 1
+ parent green
...
+ parent yellow
...
Thebks for your opinion or tips ..
I don't think it's dead simple to set the {data.layout} layout recursively without manipulating the database. I have three 'solutions' coming to mind to solve your problem:
1) Create four Backend Layouts that you can select for your current and childpages. (Basically rinse and repeat what you have done for your first backend layout)
2) Using your layout modes you could try setting a body class using typoscript like so (i did not test this):
page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = data.layout
page.bodyTagCObject.wrap = <body class="color-|">
3) Use a similar typoscript but update the value using typoscript conditions such as [pidInRootline]
page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.wrap = <body class="blue">
[PIDinRootline = 1]
page.bodyTagCObject.wrap = <body class="orange">
[global]
[PIDinRootline = 2]
page.bodyTagCObject.wrap = <body class="green">
[global]
# and so on
I had your same problem and this typoscript worked fine for me,
the result is what you wanted to reach.
as you can see the 20.10 object is used when frontend layout is set on the page, while the 20.20 object is used when frontend layout is not set and takes it in slide mode:
page {
bodyTagCObject >
bodyTagCObject = COA
bodyTagCObject {
stdWrap.noTrimWrap = |<body |>|
20 = COA
20 {
wrap = class="|"
10 = TEXT
10 {
if.isTrue.data = page:layout
data = page:layout
noTrimWrap = |page-layout-| |
}
20 = TEXT
20 {
if.isFalse.data = page:layout
data = levelfield:-2, layout, slide
noTrimWrap = |page-layout-|
}
}
}
}
I hope I have been helpfull.
Is it possible to build menu in TypoScript which is based on couple of list of id's for example:
List one:
20 = HMENU
20.special = list
20.special.value = 35, 56, 51, 43, 22
List two
30 = HMENU
30.special = list
30.special.value = 43, 1, 25, 98
etc..
I need to insert in the footer section a six column menu with different links to different site. Any ideas how to do that in one menu?
What about using directory menu ?
Create a folder in which you put all the pages you want in your menu.
Create a constant with the id of the folder.
Then create a menu like this one:
# Links list
20 = HMENU
20 {
special = directory
special.value = {$constants.page.footer.links}
1 = TMENU
1 {
noBlur = 1
NO {
wrapItemAndSub = <li>|</li>
ATagTitle.field = subtitle // title
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = subtitle // title
}
CUR = 1
CUR {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = subtitle // title
}
}
}
As the title says, I need to list the content of all child-pages on the parent-page, after its own content. Or the thing I really need is, one page with content and and a menu which links to the different headers of the content. e.g. athe parent-page with content:
**Parent Head**
parent text
*first subhead*
first subtext
*second subhead*
second subtext
and the menu should look like:
Parent
-first subhead
-second subhead
I thought it would be easier if the parent-page "collects" the content of the child-pages.
The other solution was, that the child-pages would be links to extern URLs, to the specific c-IDs of the different contents of the parent-page. But I think this isn't that easy for the website owner, who doesn't know anything about where he can find the right c-ID in the web-page-source-code.
So how would You make that? Or how can I realize the thing with the child-page-content?
EDIT: Have a solution now. Just have to fix, that the submenu will be displayed without childpages.
Here is the code:
temp.contentnav = CONTENT
temp.contentnav {
table = tt_content
select {
pidInList = 7
orderBy = sorting
where = colPos=0
languageField=sys_language_uid
}
renderObj = TEXT
renderObj {
field = header
wrap= <li>|</li>
typolink.parameter.field=pid
typolink.parameter.dataWrap=|#{field:uid}
typolink.ATagParams = class="linkClass"
if.isTrue.field=header
}
wrap = <ul id="submenuClass"> | </ul>
}
page.10.marks.MENU.2.NO.after.cObject < temp.contentnav
Try something like this
temp.pageIds = HMENU
temp.pageIds.entryLevel = 1
temp.pageIds.1 = TMENU
temp.pageIds.1 {
NO.stdWrap.field = uid
NO.allWrap = |,
NO.doNotLinkIt = 1
}
lib.container = CONTENT
lib.container.table = tt_content
lib.container.select {
pidInList.cObject < temp.pageIds
}
There is a content element "Menu/Sitemap" with has an option to render subpages with content.
If you want to do it via TypoScript, render the menu, and then replace the menu items with content of them.
# Pseudocode on menuitem
# assuming you are using css_styled_content
1.allStdWrap.cObject < styles.content.get
# Set pid for CONTENT object from styles.content.get to the uid of the page
# which gets rendered
1.allStdWrap.cObject.select.pidInList.data = uid
Can't provide you with an working snippets atm.
I have a project which has multiple websites. Please check the screen shot.
Now, I want to build a menu in "Red", which will contain "Blue", "Post" and "Blog Page" websites. And each tab, that is Blue, Post and Blog Post should display the pages in their websites.
Example:
Red Menu
-Blue
--jQueryTestPage
--Home
--Fluid
--Contact
--Form
-Post
--HomePage
--Contact Us
-Blog Page
--Startsite
--Sitemap
I'm very new to Typo3 and I'm unable to understand how to create menus for these pages. I am using Typo3 6.0.4
Thanks in advance
UPDATE
So far I have the following typoscript code for the menu
lib.mainMenu = HMENU
lib.mainMenu.entryLevel=0
lib.mainMenu.special=list
lib.mainMenu.special.value=19,5,2
lib.mainMenu.1 = TMENU
lib.mainMenu.1 {
wrap = <ul id="mainMenu">|</ul>
expAll = 0
NO.allWrap = <li class="mainMenuiItem">|</li>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.allWrap = <li class="mainMenuItemActive">|</li>
ACT < .CUR
}
The above code gives me
Red Menu
-Blue
-Post
-Blog Page
But I want is
Red Menu
-Blue
--jQueryTestPage
--Home
--Fluid
--Contact
--Form
-Post
--HomePage
--Contact Us
-Blog Page
--Startsite
--Sitemap
lib.mainMenu.1 means first level. So add additional levels:
lib.mainMenu.2 < lib.mainMenu.1
lib.mainMenu.3 < lib.mainMenu.1
But afaik you need to use "directory" instead of "list". "list" just renders the pages and not the subpages.
And remove entryLevel=0 - if you use special, you should not use entryLevel.
lib.mainMenu = HMENU
lib.mainMenu {
special=directory
special.value=19,5,2
1 = TMENU
1 {
wrap = <ul id="mainMenu">|</ul>
expAll = 0
NO.allWrap = <li class="mainMenuiItem">|</li>
# afaik you do not need RO
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.allWrap = <li class="mainMenuItemActive">|</li>
ACT < .CUR
}
2 < .1
2 {
wrap = <ul>|</ul>
NO.allWrap = ...
CUR.allWrap = ...
}
3 < .2
}
As you're hardcoding the values anyway, you can use special=directory and put in the parent page items manually.
lib.completeMenu = COA
lib.completeMenu {
10 = TEXT
...
# Make Typolink to page 19
}
20 = HMENU
20 {
special=directory
special.value=19
...
# Your menu, just for the first part
}
30 < .10
30.value = ...
# The next typolink to page 5
40 < .20
40.special.value = 5
...
# your menu, for the second part
# repeat this for all the desired steps
}
To avoid writing the same ID multiple times, you can use constants like {$blueRootPage}
PS: above TS is untested
My typo3 websites has a menu with the follwing typoscript definition:
lib.footernav = HMENU
lib.footernav.special = directory
lib.footernav.special.value = 38
lib.footernav.entryLevel = 0
lib.footernav.1 = TMENU
lib.footernav.1.NO {
ATagParams = class = "footer-link"
}
The menue works just fine. What I want to do is, change the link text into an image, like this:
<a class="footer-link" href="index.php?id=43&L=1">Facebook</a>
to
<a class="footer-link" href="index.php?id=43&L=1"><img src="facebook.gif"/></a>
How can I do that?
If it helps I could also create a new menu for this facebook link.
I recommend to use the "Media" field of the menu's target pages to define, which pages in the menu should be displayed using an image. The Media field can be found in the "Resources" tab of the page properties. It is the perfect solution for your problem because it allows you to freely choose any image for any menu item:
For menu items that you want to appear as an image, use the Media field of the corresponding menu page and select an image to use. For all menu items that you want to appear as text, simply leave the Media field empty.
Here is the TS code to create that behavior:
1 = TMENU
1.NO {
ATagParams = class="footer-link"
# Replace menu item text with image if defined in page tab "Resources"-->"Media"
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}
}
UPDATE FOR TYPO3 6.2 WITH FAL:
TYPO3 6.2 includes FAL – a new media resource management system. As the resources tab of the page properties is now also based on FAL, you need a different TypoScript approach to access those image(s). Here is an up-to-date solution:
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.override.cObject = FILES
stdWrap.override.cObject {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
titleText.data = file:current:title // field:nav_title // field:title
altText.data = file:current:alternative // field:nav_title // field:title
}
# start with first image
begin = 0
# show only one image
maxItems = 1
}
}
}
The parameter begin defines which of multiple images should be used (e.g. if you need one image as a headline background for the page and another one as an icon in the menus).
If you increase the maxItems parameter, multiple images will be returned (if multiple images are defined in the resources tab).
If you want to append/prepend the image to the menu text instead of replacing it, you have to change stdWrap.override.cObject to after.cObject or before.cObject in the above code.
Another solution is to define a custom class for each link, then change the background image only for according links. This way you can fully control the menu's appearance by css:
lib.footernav.1.NO {
ATagParams = class="footer-link {field:title}"
ATagParams.insertData = 1
}
Results in following html:
<a class="footer-link Facebook" href="index.php?id=43&L=1">Facebook</a>
css:
.Facebook {
background: transparent url(facebook.gif) no-repeat;
text-indent:9999px;
}
EDIT: I recommend the above solution, because it's a quick and fairly clean setup to address a single menu item. However, if you like a clean example from the typoscript textbook:
lib.footernav = COA
lib.footernav.10 = HMENU
lib.footernav.10 {
special = directory
special.value = 38
excludeUidList = 99
1 = TMENU
1.NO {
ATagParams = class = "footer-link"
}
}
lib.footernav.20 = TEXT
lib.footernav.20 {
field = title
typolink.parameter = 99
typolink.ATagParams = class = "footer-link"
}
Assuming that your facebook menu item is page ID 99
Like so lib.footernav.1.NO.stdWrap.wrap = <img src="|.gif" />?
Make sure to add a wrap.htmlSpecialChars = 1 to avoid breaking the HTML code if an editor enters HTML special chars.
lib.footerSocialMedia = HMENU
lib.footerSocialMedia {
special = directory
special.value = 167
1 = TMENU
1 {
wrap = <ul class="social-list right">|</ul>
expAll = 1
noBlur = 1
NO {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.htmlSpecialChars = 1
stdWrap.field =
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
ACT = 1
ACT {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.field =
stdWrap.htmlSpecialChars = 1
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
}
}
First you need to add image in media of page under Page->edit and then add the image in media. Further, use the following typoscript:
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}