简体   繁体   中英

TYPO3 Custom css class for menu links

I'm developing a new website on TYPO3 6.2 using the Bootstrap Package.

I want to add a custom css class to menu links via backend and print the CSS classes in my template. So if I go on the Typo3 backend:

Page > Any page Properties > Appearance or Behavior Tab > Custom CSS class (I would like to have a field that I can type the classes)

So I could type my CSS class there like " span3 orange " for Page 2 and " span4 green " for Page 3, empty for Page 1. And in my HTML I want to print that css classes like this in the menu:

<ul>
    <li><a href="page-1"> Page 1 </a></li>
    <li><a href="page-2" class="span3 orange"> Page 2 </a></li>
    <li><a href="page-3" class="span4 green"> Page 3 </a></li>
</ul>

How can I do that?

  • Note 1: This is a huge website with thousands of pages, so I would be able to add classes for each page.
  • Note 2: Note that the menu right now is being generated via TypoScript and being called in my Fluid Template.

You could also explain how to print that css classes on the body tag or on any other part of the page:

<body class="span3 orange">

You could use the page field "frontend-layout" unless you don't use it for other purposes. A custom field would require an own mini-extension.

The you write a fluid condition for the css class, whenever the other frontend layout is selected. Location for the condition ist the template partial redering the menu.

http://wiki.typo3.org/Fluid#f:if.2C_f:then.2C_f:else

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM