Accordion

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.

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.

Under button size you can change the size of the button: .btn-sm (small), .btn-lg (large).

With button full width the button spans the entire available width: .btn-block.

Carousel

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.

Wrapper start

Wrapper stop

Place the teaser box element

Inside the wrapper elements, place an element of type Teaserbox (under Contao Themes). Assign the template ce_cthemes_teaserbox_carousel to the content element. You can choose a headline, a text, a link and an image. For the image, select the image size Carousel to get the right size.

In the end, the structure of the elements should look like this:

Customize the appearance

By adding more classes you can change the text color and the look of the button. You make these settings in the Teaserbox element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

Change the slide effect

Add the class fade to the element of type Wrapper start (content slider) to change the slide effect to a fade effect.

Example

Content box

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.

Customize the appearance

By adding more classes you can change the text color, background and the look of the buttons. You make these settings in the content element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

You can also add the classes bg-zeroone-2, bg-zeroone-3 or bg-zeroone-4 under expert settings to show the content box in one of the primary colors.

Examples

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).

The element of type Content container start needs the col attribute .columns under Advanced CSS classes.

Place the content elements

Between the wrapper elements, place the elements you want to show side by side. Select the col attribute .column under advanced CSS classes.

You can also define more classes, e.g. column widths for certain resolutions or column gaps. You find more information in the Spectre documentation under Flexbox grid and Responsive.

Example

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 35px

Change the alignment

Under advanced CSS classes, in text alignment (under classes for content elements), you can change the alignment of the headline. You can select the following classes:

• text-left: left-aligned
• text-center: centered
• text-right: right-aligned
• text-justify: justified

Headlines with dots

• Select the element type Headline
• Select the content element template ce_headline_zeroone (up to Contao 4.13) or content_element/headline/dotted_zeroone (Contao 5.0 and later)
• Under Expert settings, add the CSS class headline-dotted (second input field)

The headline would then look like this:

Media elements

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)

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.

Under Template settings, select the template ce_text_hero_parallax_zeroone (up to Contao 4.13) or content_element/text/parallax_zeroone (Contao 5.0 and later).

This is what the finished parallax element should look like:

Price box

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.

Customize the appearance

By adding more classes you can change the text color, background, text alignment and the look of the buttons. You make these settings in the content element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

To center the content, select .text-center under text alignment.

You can also add the classes bg-zeroone-2, bg-zeroone-3 or bg-zeroone-4 under expert settings to show the price box in one of the primary colors.

Examples

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.

Under Image settings you select the image shown in the background.

Under advanced CSS classes, make the following settings:

• select .column under Add col attribute
• select .col-mx-auto under Offset

This is what the finished quote element should look like:

Sticky teaser box

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.

Replace the template content with the following code:

<div class="<?= $this->class ?> block sticky-teaserbox full-height"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="inside">
        <?php $this->block('content'); ?>
    
        <?php if ($this->addImage): ?>
            <figure class="image_container float_above" style="background-image:url('<?= $this->picture['img']['src'] ?>')"></figure>
        <?php endif; ?>
    
        <div class="content">
            <?php if ($this->headline): ?>
            <<?= $this->hl ?>>
                <?php if($this->page != ""): ?><a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?php endif; ?>
                    <?= $this->headline ?>
                <?php if($this->page != ""): ?></a><?php endif; ?>
            </<?= $this->hl ?>>
        <?php endif; ?>
    
        <?= $this->text ?>
    
        <?php if($this->page != ""): ?>
            <div class="pageLink">
                <a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?= $this->pageText ?></a>
            </div>
        <?php endif; ?>
    </div>
    
    <?php $this->endblock(); ?>
    </div>
</div>

Place the content elements

Now place elements of type Teaser Box (under Contao Themes) and select the template you just created.

Styling

Go to the file manager, edit custom.scss in zeroOne/scss and add the following SCSS code. You may have to reload the page with Ctrl + F5 or clear the script cache for the changes to take effect.

.ce_ct_teaserBox.sticky-teaserbox {
  padding: 0;
  
  .content {
    width: 50%;
    margin-left: 50%;
    padding: 80px 200px 80px 80px;
  }

  .image_container {
    display: none;
    width: 50%;
    background-size: cover;
    height: 100%;
    background-position: center;
    position: absolute;
  }

  .inside {
    height: 100vh;
    align-items: center;
    
    h1, h2, h3, h4, h5, h6 {
        width: 100%;
        text-align: left;
        padding: 0;
    }
    
    .pageLink {
        width: 100%;
    }
  }
  
  p {
  	font-size: 18px;
  }

  .pageLink a {
    @extend .btn;
  }
}

.sticky-container {
  position: relative;

  .sticky-column {
    position: absolute;
    width: 50%;
    height: 100%;
    padding-top: 0;
    content: "";
    left: 0;
    top: 0;

    .sticky-column-background {
      background: center center/cover no-repeat;
      background-image: inherit;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: 10;

      @for $i from 1 through 20 {
        &:nth-of-type(#{$i}) {
          z-index: #{$i};
        }
      }
    }
  }
}

@media (max-width: 1280px) {
    .ce_ct_teaserBox.sticky-teaserbox .content {
        padding: 20px 80px;
    }
}

@media (max-width: 960px) {
    .ce_ct_teaserBox.sticky-teaserbox {
        .content {
            padding: 20px 40px;
        }
    
        p {
            font-size: 16px;
        }
    }
}

@media (max-width: 600px) {
    .sticky-container .sticky-column {
        display: none;
    }
    
    .ce_ct_teaserBox.sticky-teaserbox {
        .content {
            width: 100%;
            margin: 0;
            padding: 20px;
        }
        
        .image_container {
            display: block;
            width: 100%;
            position: relative;
            height: 300px;
        }
        
        .inside {
            height: inherit;
        }
    }
}

Additional JavaScript

Add the following JavaScript in the layout under Custom JavaScript code. jQuery must also be loaded under jQuery.

Alternatively, you can create a JavaScript file and include it in the layout.

<script>
jQuery(document).ready(function($) {
	if( $(".sticky-teaserbox").length > 0 ) {
        $(".sticky-teaserbox").closest(".mod_article").removeClass("block");
        $(".sticky-teaserbox").closest(".mod_article").addClass("sticky-container");
        $("<div class='sticky-column'></div>").insertBefore(".sticky-teaserbox:nth-of-type(1)");
    }
    $(".sticky-teaserbox").each( function() {
        var style = $(this).find(".inside > .image_container").attr("style").replace(/\"/g, "'"); // replace for ie11
        $(".sticky-column").append('<div class="sticky-column-background" style="'+style+'"></div>');
    });
})	
</script>

Example

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 table

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.

Then place an element of type Tabs navigation inside the content containers.

In the Tabs navigation element you define the individual tabs under Tabs settings. Always enter a unique value and a label.

After the tabs navigation element, add one element of type Tabs wrapper (start) and one of type Tabs wrapper (stop).

Inside the tab wrapper elements, add the content as text elements. Under Expert settings, enter the respective value from the tabs navigation element as the CSS class.

This is what it should look like in the end:

Teaser box

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:

You can also add an image by ticking Add an image under Image settings. Under Image alignment you choose whether the image is aligned left or right.

A teaser box with an image is then shown as in the following screenshots.