I'm building a custom menu type and need to change the "outerOuterWrap" of this menu.
This is what i got:
tt_content.menu.20.102 < tt_content.menu.20.default
tt_content.menu.20.102 {
special = list
stdWrap {
outerWrap = <ul class="csc-menu csc-menu-102">|</ul>
}
1 = TMENU
1.NO {
(...)
}
}
And it will be rendered to:
<nav class="csc-default" id="c1416">
<ul class="csc-menu csc-menu-102">
(...)
</ul>
</nav>
How do I add a class to the nav tag without section_frame or layout? So that I get:
<nav class="csc-default custom-class" id="c1416">
Thank you!
I think this is in Line 454 of css_styled_content/static/setup.txt:
tt_content.stdWrap.innerWrap.cObject.default.20.20.10.value = csc-default
so you would need to set this value from inside your menu definition, just for your menu. Of which I'm not sure if it's possible.
Related
I would like to have a menu mixing pages and sections from current page.
For example on page1:
section1_from_page1
section2_from_page1
page2
page3
And on page2:
section1_from_page2
page1
page3
Until now, all I'm able to do is to build a new section menu with TypoScript :
lib.sectionnavigation = HMENU
lib.sectionnavigation {
1 = TMENU
1 {
sectionIndex = 1
sectionIndex.type = header
sectionIndex.useColPos = -1
NO {
ATagBeforeWrap = 1
linkWrap = <span> | </span> <span class="bar"></span>
allWrap = <li> | </li>
allWrap.insertData = 1
}
}
special = list
special.value.data = page:uid
}
And then add this menu in the Main.html partials from bootstrap_package, with f:cObject :
<f:cObject typoscriptObjectPath="lib.sectionnavigation" />
However, that means that I have to maintain "format" (<li><span>...</span><span class="bar"></span></li>) in both the TypoScript and the Main.html partial which is not convenient.
For example, if I change the menu so that I don't need the bar class span, I'll have to update the partial and the TypoScript!
From what I've understood, bootstrap_package defines the main menu in setup.txt:
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
levels = 2
includeSpacer = 1
as = mainnavigation
}
And then used this in the Main.html partial:
<f:for each="{mainnavigation}" as="mainnavigationItem">
My first plan was to try to built an new array (similar to the one in {mainnavigation}) using TypoScript but I couldn't find a way!
I also tried to use a MenuProcessor but didn't succeed either.
Any help would be really appreciated!
Thank you.
You should use the possibility to identify the current page in typoscript menus with the option to replace the complete rendering for a menu item.
The rendering for current page in a menu can be defined with ACT or CUR (ACT identifies all pages in the root line: current page, parent, grand parent, ...). In your case it may not differ, but you might play it safe:
lib.MainMenu = HMENU
lib.MainMenu {
wrap = <ul class="nav">|</ul>
1 = TMENU
1 {
NO {
wrapItemAndSub = <li><span> | </span> <span class="bar"></span></li>
}
CUR = 1
CUR.doNotShowLink = 1
// insert your section menu here:
CUR.before.cObject < lib.sectionnavigation
}
}
I recently changed form css_styled_content to fluid_styled_content. In my custom grid element I would like to render 'Content Element Layout' to this container. After switching to FSC it's not working anymore. How to get the fluid style content classes of an element via typoscript in my custom element? I render the element purely via typoscript like this:
Right now:
<div class="row test"> ... </div>
Via typoscript:
plugin.tx_myplugin.setup.my_1col {
preCObject = LOAD_REGISTER
preCObject {
containerClasses.cObject = COA
containerClasses.cObject {
10 = TEXT
10 {
value = equal-height
fieldRequired = flexform_equalHeight
noTrimWrap = | ||
}
...
stdWrap.insertData = 1
stdWrap.trim = 1
}
containerAttributes.cObject = COA
containerAttributes.cObject {
10 = TEXT
10 {
data = register: containerClasses
noTrimWrap = | class="row test |"|
}
}
}
..
}
How to get the fluid style content classes of an element via typoscript in custom element ... e.g.?:
Goal:
<div class="row frame frame-default frame-layout-0"></div>
On TYPO3 version 8 those fields are frame_class and layout
Should something like this be sufficient?
plugin.tx_myplugin.setup.my_1col{
stdWrap.wrap= <div class="frame frame-{field:frame_class} frame-layout-{field:layout}">|</div>
insertData=1
}
I have menu with 2 level. All links are clickable but I want to disable 1 link. This link is being used for opening submenu
<li class="sub-link">link1
<ul id="sub-menu">
<li>sublink</li>
<li>sublink2</li>
</ul> <!-- sub-menu -->
</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
I want to disable link 1. I have such typoscript:
lib.menu.main = HMENU
lib.menu.main {
special = list
special.value = 22,154,88
alwaysActivePIDlist = 22
1 = TMENU
1.NO = 1
1.wrap = <ul>|</ul>
1.NO.wrapItemAndSub = <li>|</li>
1.IFSUB=1
1.IFSUB.wrapItemAndSub = <li class="sub-link">|</li>
2 < .1
2.wrap = <ul id="sub-menu">|</ul>
2.NO.wrapItemAndSub = <li>|</li>
}
How I can decide this problem?
So i got two possibilities for you to solve this problem:
The first one is to read the Typo3-Documentation and look up for "optionSplit" and "doNotLinkIt"-options. They should help you solving your problem within typoscript.
The other is to solve it using Javascript/JQuery. You could select the (in your example above) FIRST item of the menu and replace the link with whatever you want.
$(document).ready(function(){
$('.menu a').first().attr('href', '#');
});
I made you a fiddle with the whole example:
https://jsfiddle.net/bdrsssv7/
Make sure you do not insert the Javascript in the HTML template because it will not be available on pages with other html-templates then.
Just do a js-file and insert it via typoscript like this:
page.includeJS.file1 = fileadmin/yourTemplateLocation/yourFile.js
I hope one of the two solutions i mentioned could help you
Excluding a specific PID (18) from the menu in Typoscript:
lib.menu = HMENU
lib.menu {
special = rootline
special.range = 2,0
1 = TMENU
1 {
NO {
allWrap = <li> | </li>
doNotLinkIt.override = 1
doNotLinkIt.override.if {
value = 18
equals.field = uid
}
}
}
}
OR exclude multiple specific PIDs (18,19,20) from the menu
lib.menu.1.NO.doNotLinkIt.override.if {
value = 18,19,20
isInList.field = uid
}
I integrate a one page parallax template in typo 3 in this i want to get a menu like below so i can access specific content on click , in a subpart of page object.
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>PRICING</li>
<li>CONTACT</li>
<li>Call: +23-689-90 </li>
</ul>
Try
temp.contentnav = CONTENT
temp.contentnav {
table = tt_content
select {
pidInList = this
orderBy = sorting
where = colPos=0
languageField=sys_language_uid
}
renderObj = TEXT
renderObj {
field = header
wrap=|
typolink.parameter.field=pid
typolink.parameter.dataWrap=|#{field:uid}
if.isTrue.field=header
}
}
So you will get an menu of all items. Then again, you won't like that the menu item's title is taken from the header field. If your site is very small and you keep control over it, why don't you just hardcode this (look at the source, by default, each article has an id).
PS I copied that from http://www.typo3wizard.com/en/snippets/menus/content-element-navigation.html
EDIT on your getting started with TS question:
In your HTML Template:
<html>...
<!-- ###CONTENTNAV### START --><!-- ###CONTENTRIGHT### END -->
...</html>
In your TypoScript setup:
page.10.subparts {
# we fill the "subpart" (that's how this type of marker is called) with the temp object
CONTENTNAV < temp.contentnav
}
So the caret pointing left tells TYPO3 that in that region ("subpart"), it should add the content menu you've created with the TS snippet.
Note that you can also use "Marks" (###CONTENTNAV###, don't need start and end commentary, assign with page.10.marks) and the more modern fluid templates (<f:format.html>{contentnav}</f:format.html>), which are the future. You could start here: http://typo3buddy.com/typo3-template-tutorial/fluid/
I create menu for my site its working fine but now problem is that i want to add custom class to every li to first level.
My Typo script Below For menu i add class to every li but 2 li class call for all other except first and last. So have idea what need to do for it ?
lib.header_top_right = COA
lib.header_top_right {
10 = HMENU
10 {
wrap = <div class="menu-main-container">|</div>
entryLevel = 0
1 = TMENU
1 {
expAll = 1
wrap = <ul id="menu-main-1" class="main-nav">|</ul>
target = _top
NO {
wrapItemAndSub = <li class="home">|</li>|*|<li class="service">|</li>|*|<li class="contact">|</li>|*|<li class="l">|</li>|*|<li class="contact">|</li>
stdWrap.wrap = <span class="nav-title">|</span><span class="hr"> </span>
}
ACT < .NO
ACT = 1
CUR < .NO
CUR = 1
CUR {
stdWrap.wrap = <span class="nav-title">|</span><span class="hr"> </span>
}
}
}
}
Let's say you have three menu items for the first level. "Home", "Service" and "Contact".
Your optionsplit would work like that:
wrapItemAndSub = <li class="home">|</li>||<li class="service">|</li>||<li class="contact">|</li>
In general you can split the value (wrapItemAndSub in your case) in three parts with: |*|
first |*| middle |*| last
You could split each part with: ||
firstsubpart1 || firstsubpart2 |*| middlesubpart1 ...
There are 4 rules to do the split:
The priority is: last, first, middle
If the middle part is emtpy, the last part of the first is repeated
If the first and middle part is empty, the first part of the last gets repeated before the last
The middle gets repeated
You can find some examples and this explanation in the typo3 docs - optionsplit
Although you could reach your goal with the optionsplit, I wouldn't recommend it that way. If your sitestructure is and always will be fix, the optionsplit solution is ok. If your sitestructure changes and an additional link would be added to your first level you would have to change your typoscript for the menu. To "access" each first level menu via css you also could do something like this:
wrapItemAndSub= <li class="menu{field:uid}" id="menu{field:uid}">|</li>
wrapItemAndSub.insertData=1
The result would be something like:
<li class="menu1" id="menu1">Home</li>
<li class="menu2" id="menu2">Service</li>
<li class="menu3" id="menu3">Contact</li>