You are here: Examples / Content elements / Content in tabs
English
Deutsch
Monday, 2016-09-26

rgtabs

The TYPO3 extension rgtabs by Georg Ringer allows it to display any content elements in tabs. The extension was used with almost no changes. I only edited the CSS code, to make the tabs resizeable and that they use the (edited) graphics from the standard sliding door navigation.

Content in tabs

Tabtitles

Tab 1

Suspendisse arcu nibh, molestie in, adipiscing in, dictum sed, neque. Suspendisse consectetuer, leo pulvinar rhoncus convallis, urna dui porttitor erat, quis volutpat mauris dolor id sapien. Suspendisse dolor lacus, congue at, aliquam et, rhoncus quis, nulla. Suspendisse felis ipsum, fringilla sed, vehicula vitae, iaculis non, magna. Suspendisse magna urna, semper eget, pharetra a, venenatis vitae, nisl.

can

Tab 2

Maecenas lacus sem, ultricies in, fermentum eu, consequat id, magna. Maecenas luctus, tortor vitae elementum porttitor, magna diam ornare leo, et lobortis pede massa ut quam. Maecenas mollis, libero at porta dictum, tellus est dignissim libero, eu lacinia nisl libero ac dui. Maecenas nibh est, condimentum quis, porttitor ut, varius quis, eros. Maecenas nonummy, nibh in consequat suscipit, augue erat mollis tellus, eget volutpat lectus mi at quam.

be

Two sample tables

√úbersicht Fremdenverkehr
Munich Hamburg Berlin Bangkok
Zeile 1 Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque. Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque. Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque.
Zeile 2 Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque. Aenean nibh nisl. Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque.
Zeile 3 Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque. Aenean nibh nisl, iaculis id, dapibus eget, sollicitudin ac, neque. Neque

user

The HTML-source is:

<h3 class="G" style="background:url(typo3temp/GB/ed591d8ce7.png) no-repeat;">Graphical headlines</h3>

The associated CSS-code is like this (Extract from content.css):

h3.G {border:0; height:30px; text-indent: -999em;}

Only a truetype font, which you save in folder fileadmin/fonts/ is required. The image is rendered by gifbuilder.

defined

Classes paragraph

Sed ullamcorper, turpis a vestibulum convallis, orci odio dapibus wisi, ut mollis quam orci et lectus. Sed volutpat, dolor gravida placerat porttitor, ipsum odio dapibus nibh, ut adipiscing velit nunc vel neque. Suspendisse aliquam, est nec facilisis feugiat, lorem ipsum scelerisque nibh, vitae fermentum dolor lectus vel est. Suspendisse aliquet, eros vel molestie tempus, dolor lorem cursus augue, nec pharetra elit ante id nulla. Suspendisse ante felis, consequat in, lacinia sit amet, tempor sed, felis.

Vestibulum tortor nulla, tempor aliquam, ullamcorper non, sodales in, lacus. Vestibulum ullamcorper, risus sit amet scelerisque ultrices, lorem eros sodales erat, sit amet facilisis libero sapien non velit. Vestibulum urna dui, ultricies nec, interdum imperdiet, eleifend sit amet, libero. Vivamus bibendum, ligula consequat viverra molestie, eros ante bibendum felis, vel vulputate metus ante non wisi. Vivamus dictum, nibh quis congue tincidunt, quam pede venenatis velit, quis auctor turpis massa a lorem.

Phasellus dui massa, pretium nonummy, pellentesque ut, aliquam in, pede. Phasellus eleifend, sapien vitae tempus congue, massa ante dictum odio, at iaculis nisl sem id massa. Phasellus elit mauris, malesuada ut, venenatis at, auctor id, eros. Phasellus erat eros, fringilla ac, mattis sed, iaculis vel, nunc. Phasellus felis est, elementum porttitor, semper vel, cursus ut, tortor.