https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/The following pages explain each element of the 0.1 theme and describe how exactly you can use it. Accordion Buttons Carousel Content box Grid Headlines Media elements Parallax Price box Quote Sticky teaser box Tables Tabs Teaser boxHugoen-UShttps://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/accordions/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/accordions/For the accordion, simply select the content element template ce_accordionSingle_zeroone or ce_accordionStart_zeroone for the single element or the accordion start element. The accordion is based on the Spectre accordion and works entirely without JavaScript, so the j_accordion template does not need to be included in the page layout.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/buttons/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/buttons/To place a button, follow these steps: Select the element type Hyperlink Enter the link address/link text (hyperlink settings) Up to Contao 4.13: select the content element template ce_hyperlink_button_zeroone (template settings) Contao 5.0 and later: select the content element template content_element/hyperlink/button_zeroone (template settings) In the tab Advanced CSS classes, under Button style (in classes for content elements), you can assign more classes to change the look of the button: .btn-primary, .btn-link, .btn-success, .btn-error.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/carousel/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/carousel/Note This feature is only available from 0.1 theme version 1.5.0. The carousel is based on the Spectre carousel and works entirely without JavaScript. Place the wrapper elements First you need an element of type Wrapper start (content slider) and Wrapper end. Select the template ce_sliderStart_carousel or ce_sliderStop_carousel for the content elements. The js_slider template does not need to be activated in the layout.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/contentbox/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/contentbox/Note This feature is only available from 0.1 theme version 1.5.0. Place the content element Place an element of type Content Box (under Contao Themes) and select the template ce_cthemes_contentbox_zeroone. With the grid you can show several elements side by side.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/grid/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/grid/The theme is based on Spectre CSS, which among other things lets you show elements side by side and, at the same time, in a single column on mobile devices. Place the content container To show two text elements side by side, for example, first add one element of type Contao Themes (content container start) and one of type Contao Themes (content container end).https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/headlines/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/headlines/Change color and size Select the element type Headline Under expert settings you can assign different CSS classes (second input field): primary-color-dark: headline in the dark primary color primary-color-light: headline in the light primary color headline-35: headline is always 35pxhttps://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/media/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/media/Download(s) Select the element type Download or Downloads Make your settings Up to Contao 4.13: select the content element template ce_download_zeroone or ce_downloads_zeroone (template settings) Contao 5.0 and later: select the content element template content_element/download/download_zeroone or content_element/downloads/downloads_zeroone (template settings) Gallery Select the element type Gallery Make your settings Up to Contao 4.13: select the content element template ce_gallery_zeroone (template settings) Contao 5.0 and later: select the content element template content_element/gallery/gallery_zeroone (template settings) YouTube video Select the element type YouTube Make your settings Up to Contao 4.13: select the content element template ce_youtube_zeroone (template settings) Contao 5.0 and later: select the content element template content_element/youtube/youtube_zeroone (template settings)https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/parallax/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/parallax/For a parallax element, create a new article, edit the article settings and enter the following CSS classes under expert settings (second input field): hero parallax fullwidth. In the article, place a text element and add, for example, a headline and a text. Under image settings you select the image.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/pricebox/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/pricebox/Note This feature is only available from 0.1 theme version 1.5.0. Place the content element Place an element of type Price table (under Contao Themes) and select the template ce_cthemes_pricebox_zeroone. With the grid you can show several elements side by side. If the price boxes should have no spacing to the left and right, select .col-gapless (in more classes for columns) under Advanced CSS classes in the content container start.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/quote/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/quote/For a quote element, create a new article, edit the article settings and enter the following CSS classes under expert settings (second input field): hero quote text-center. In the article, place a text element and add a headline. You don’t need to fill in the text field, as it is not output. As it is a mandatory field, it is enough to add, for example, just an empty line.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/sticky-teaserbox/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/sticky-teaserbox/The sticky teaser box element is based on the NATURE theme element and is not a feature of the 0.1 theme, but you can build it yourself with template, SCSS and JavaScript adjustments. Create a template Create a new template under Templates and select ce_cthemes_teaserbox.html5. It is best to rename the template, e.g. to ce_cthemes_teaserbox_sticky.html5.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/tables/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/tables/To place a table, follow these steps: Select the element type Table Define the table entries Up to Contao 4.13: select the custom template ce_table_zeroone (template settings) Contao 5.0 and later: select the custom template content_element/table/table_zeroone (template settings) Under Expert settings you can define more CSS classes in the second input field to change the look of the table: table-striped: striped table table-hover: hover effect table-scroll: scrollable tablehttps://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/tabs/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/tabs/For a tabs element, first place one element of type Content container start and one of type Content container end. In the element Content container start, enter the class tabs in the second input field under Expert settings.https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/teaserbox/Mon, 01 Jan 0001 00:00:00 +0000https://relaunch.pdir.de/docs/en/contao/themes/zeroone/elements/teaserbox/To place a teaser box, follow these steps: Select the element type Teaser Box (under Contao Themes) Add a headline and text, and fill in the link address/text in the teaser box settings Select the custom template ce_cthemes_teaserbox_zeroone (template settings) By default the teaser box is then shown as in the following screenshot: