I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package.
My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my template. So, for example, if I navigate to the Typo3 backend:
Page > Any page Properties > Appearance or Behavior Tab > Custom CSS class (I envision having a designated field where I can input the desired classes)
This way, I could specify my CSS class as "span3 orange" for Page 2 and "span4 green" for Page 3, leaving it empty for Page 1. Subsequently, in the HTML code, I aim to include these CSS classes in the menu like so:
<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 this be achieved?
- Note 1: It is worth noting that this website comprises numerous pages, hence the need to add distinct classes for each individual page.
- Note 2: Currently, the menu is being dynamically generated through TypoScript and incorporated into my Fluid Template.
Furthermore, I would also appreciate guidance on how to render these CSS classes on the body tag or any other section of the page:
<body class="span3 orange">