Events/calendar

Event list

Templates:

• event_teaser_nature: event list with images and teaser
• event_list_nature: event list with teaser only
• event_upcoming: simple list of events

Image sizes:

• Events mit Teaser (einspaltiges Layout) – events with teaser (one-column layout)
• Events mit Teaser (zweispaltiges Layout) – events with teaser (two-column layout)

Event reader

Templates:

• event_full_nature: event details
• event_full_nature_header: header image

Calendar

Templates:

• cal_default_nature: normal calendar
• cal_mini: mini calendar

Modal dialogs

Create a module

To add a modal dialog, go to the front end modules and create a new module of type Modal. There you can set a link, give it additional classes and edit the actual content of the modal dialog. You can include the module anywhere, e.g. in an article.

Example

Navigation

Navigation templates:

• nav_default_nature: main navigation
• nav_default_nature_aside: subpage navigation

Custom templates:

• mod_navigation_nature: main navigation
• mod_navigation_nature_aside: subpage navigation

Mega menu

To display a mega menu, select the template mod_navigation_nature_megamenu for the module type Navigation menu.

You can customize the mega menu with variables in _custom_variables.scss:

$megamenu-width: 100%; // Breite des Megamenü
$megamenu-right: 0px; // Abstand zum rechten Bildschirmrand
$megamenu-background-color: $boxes-background; // Hintergrundfarbe
$megamenu-background-color-home: $megamenu-background-color; // Hintergrundfarbe nur für die Startseite
$megamenu-item-width: 20%; // Breite der Spalten, z. B. 20% für 5 Spalten
$megamenu-padding: 20px 60px 5px 30px; // Innenabstand oben, rechts, unten, links
$megamenu-link-lvl2-color: #000; // Schriftfarbe Level 2
$megamenu-link-lvl2-color-hover: $primary; // Schriftfarbe Level 2 bei Mouse Hover
$megamenu-link-lvl3-color: #4a4a4a; // Schriftfarbe Level 3
$megamenu-link-lvl3-color-hover: $link-hover; // Schriftfarbe Level 3 bei Mouse Hover
$megamenu-border-color: $primary; // Rahmenfarbe

Further customization

How do I keep the mega menu open on hover?

Create a .js file, e.g. custom.js, with the following content. You can include the file in the page layout under External JavaScripts.

jQuery(document).ready(function($) {
  $('.megamenu .level_1 > .navbar-item').hover(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
    $(this).find('.navbar-dropdown.level_2').css('display', 'flex');
  });

  $('body').click(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
  });
});

News

News list

Templates:

• news_latest_nature_col2: news list with images and teaser (two columns)
• news_latest_nature_col3: news list with images and teaser (three columns)
• news_short_nature: news list with teaser only
• news_simple: simple list of news

Image sizes:

• News / Zweispaltig (two columns)
• News / Dreispaltig (three columns)

News reader

Templates:

• news_full_nature: news details
• news_full_nature_header: header image