Calendar

Follow these steps to place a calendar:

• Select the module Calendar (under Events)
• Make your settings (calendars, first day of the week, redirect page etc.)
• Select the calendar template (template settings)
• cal_default (normal calendar)
• cal_mini (mini calendar)
• Select the custom template mod_calendar_zeroone (template settings)
• Include it in an article with the element type Module

Calendar with event details

Mini calendar

Calendar day view

Events

Event list

Follow these steps to place an event list:

• Select the module Event list (under Events)
• Make your settings (calendars, number of events etc.)
• Select the event template (template settings)
• event_teaser_zeroone (event list with images)
• event_list_zeroone (event list without images)
• event_upcoming (simple event list with date and title only)
• Select the custom template mod_eventlist_zeroone (template settings)
• Select the image size News & Events / List view (image settings)
• Add the CSS class columns (second input field) (expert settings)
• Include it in an article with the element type Module

Simple event list

Event list without images

Event list with images

Event reader

Follow these steps to place the event reader (detail view):

• Select the module Event reader (under Events)
• Select the calendars
• Select the event template event_full_zeroone (template settings)
• Select the image size News & Events / Detail view (image settings)
• Include it in an article with the element type Module

Forms

Forms

When you create a form, select the form template form_wrapper_zeroone in the form settings under Template settings.

The 0.1 theme also includes more templates for form fields, which you select in the respective elements under template settings if the fields should look like in the theme demo.

Checkbox menu:

• form_checkbox_zeroone: stacked
• form_checkbox_inline_zeroone: side by side

Radio button menu:

• form_radio_zeroone: stacked
• form_radio_inline_zeroone: side by side

Submit field:

• form_submit_zeroone

User modules

Login form

Select mod_login_zeroone under template settings so that the login form is already styled to match the theme.

To show the form with placeholders only, select the template mod_login_placeholder_zeroone.

Change password

Select mod_changePassword_zeroone under template settings so that the module is already styled to match the theme.

Lost password

Select mod_lostPassword_zeroone under template settings so that the module is already styled to match the theme.

Registration

Select member_zeroone or member_grouped_zeroone under template settings so that the registration form is already styled to match the theme.

Personal data

Select member_zeroone or member_grouped_zeroone under template settings so that the personal data form is already styled to match the theme.

Form with placeholders

To show form fields in a simple form or registration form with placeholders only and without labels, you have to override the templates. In the left navigation, select Templates under Layout and duplicate the corresponding template with the button New template.

Text field:

form_textfield.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <input type="<?= $this->type ?>" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="text<?php if ($this->hideInput): ?> password<?php endif; ?><?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="<?= Contao\StringUtil::specialchars($this->value) ?>"<?= $this->getAttributes() ?><?php if ($this->label): ?> placeholder="<?= $this->label ?><?php if ($this->mandatory): ?> *<?php endif; ?>"<?php endif; ?>>
<?php $this->endblock(); ?>

Select field:

form_select.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <?php if ($this->multiple): ?>
    <input type="hidden" name="<?= '[]' == substr($this->name, -2) ? substr($this->name, 0, -2) : $this->name ?>" value="">
  <?php endif; ?>

  <select name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="<?= $this->class ?>"<?= $this->getAttributes() ?>>
    <?php foreach ($this->getOptions() as $option): ?>
      <?php if ('group_start' == $option['type']): ?>
        <optgroup label="<?= $option['label'] ?>">
      <?php endif; ?>

      <?php if ('option' == $option['type']): ?>
    	<?php if($option['value'] == '') $option['label'] = $this->label; ?>
        <option value="<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>
      <?php endif; ?>

      <?php if ('group_end' == $option['type']): ?>
        </optgroup>
      <?php endif; ?>
    <?php endforeach; ?>
  </select>
<?php $this->endblock(); ?>

Password field:

form_password.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

    <input type="password" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="text password<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="" autocomplete="new-password"<?= $this->getAttributes() ?><?php if ($this->label): ?> placeholder="<?= $this->label ?><?php if ($this->mandatory): ?> *<?php endif; ?>"<?php endif; ?>>
<?php $this->endblock(); ?>

Textarea:

form_textarea.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <textarea placeholder="<?= $this->label ?>" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="textarea<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" rows="<?= $this->rows ?>" cols="<?= $this->cols ?>"<?= $this->getAttributes() ?>><?= $this->value ?></textarea>
<?php $this->endblock(); ?>

Mega menu

In the 0.1 theme, the mega menu is available from version 1.13.0 (for Contao 4) or 2.3.0 (Contao 5).

You find an example of what it looks like on a finished website in our theme demo.

This is what it could look like on the website:

How do I activate it?

If you have a new Contao installation and have already imported the current theme demo, you can activate the mega menu simply by changing the page layout in the page settings.

  If you can’t select it in your Contao installation yet, edit the navigation module and switch the module template and the navigation template to the templates with the suffix megamenu.

Adding images

You can also add an image for each menu item, which is shown in the mega menu.

News

News list

Follow these steps to place a news list:

• Select the module Newslist (under News)
• Make your settings (archives, number of items etc.)
• Select the news template (template settings)
• news_latest_zeroone (news list with images)
• news_short_zeroone (news list without images)
• news_simple (simple news list with date/author and title only)
• Select the custom template mod_newslist_zeroone (template settings)
• Select the image size News & Events / List view (image settings)
• Add the CSS class columns (second input field) (expert settings)
• Include it in an article with the element type Module

News list with images

News list without images

Simple news list

News reader

Follow these steps to place the news reader (detail view):

• Select the module Newsreader (under News)
• Make your settings (archives, fields)
• Select the news template news_full_zeroone (template settings)
• Select the image size News & Events / Detail view (image settings)
• Include it in an article with the element type Module

Newsletter

Follow these steps to place a newsletter:

• Select the module Subscribe or Unsubscribe (under Newsletter)
• Make your settings (channels, redirect etc.)
• Select the newsletter template nl_default_zeroone (template settings)
• Include it in an article with the element type Module

Subscribe to the newsletter

Unsubscribe from the newsletter

Search

Follow these steps to place a search engine:

• Select the module Search engine (under Applications)
• Make your settings
• Select the custom template mod_search_zeroone (template settings)
• Include it in an article with the element type Module

Login form

Password forms

Personal data

Registration