Requirements

Contao system requirements

The Contao Manager or Composer installs these extensions automatically:

• Theme Components Bundle version 2.0 or higher
• CSS Style Selector Bundle version 2.1 or higher

Creuva styles the modules for news, events, FAQ, newsletter, comments and listing, but they are optional. The demos only create news and events if the respective bundle is installed.

License

Buying a license

You can get a license for Creuva at contao-themes.net. A license is valid for one domain including subdomains; for multiple websites you need several single licenses or a license for unlimited domains. You may use the theme for private and commercial projects.

Copyright notice

The bottom bar in the footer always contains the link “powered by contao-themes.net”. It is part of the license and may only be removed or changed with a license without copyright link – even if you only use the theme as a base and customize it.

Agencies and transfer

• You can transfer the usage rights to your client once; the agency then loses its rights.
• You need a new license for each additional project (except with the license for unlimited domains).
• Reselling the theme or any of its parts is not allowed.

Demo content and libraries

Texts, images and other media in the demos are for preview purposes only and must not be used for your own websites. The bundled fonts (Plus Jakarta Sans and Fraunces under the SIL Open Font License 1.1) and the required packages are subject to their own licenses; you can find an overview in the bundle’s THIRD-PARTY-NOTICES.md file.

You can find the full license terms in the LICENSE file in the bundle.

Installation

Installation takes two steps: install the package, then set up the theme. You can do the setup in the back end under Layout › Creuva or on the console with creuva:install – both lead to the same result.

1. Install the package

With the Contao Manager

Open the Contao Manager (www.your-domain.com/contao-manager.phar.php), search for creuva in the Discover tab, add the package pdir/creuva-theme-bundle and click Apply changes. Then update the database when the Contao Manager prompts you to.

With Composer

composer require pdir/creuva-theme-bundle
vendor/bin/contao-console contao:migrate

2. Set up the theme in the back end

Log in to the back end as an administrator and open Layout › Creuva. Under Set up you choose what should be created:

For a new website root you enter the title, language and optionally the domain. You need the domain if there already is a website root with the same language and no domain. Below each form you find the matching console command and, after running it, the output.

What gets created

• the theme “Creuva” with the modules main navigation, header, footer – brand, footer navigations, copyright and bottom links
• a page layout of type “Modern” with the template page/layout/creuva, with all modules assigned to their slots
• the image size “Logo” (480 × 120 px, 2x density), if the theme does not have one yet
• the CSS styles for the CSS Style Selector
• the assignment of the layout to the website root

The theme detects the contact, imprint, privacy, accessibility, sitemap and search pages of an existing website by their alias (kontakt, impressum, datenschutz, barrierefreiheit, sitemap, suche …) and links them in the header button, the header search and the footer. Module names and texts follow the language of the website root (German or English).

2. Set up the theme on the console

# Existing website: the website root is queried or passed by ID
vendor/bin/contao-console creuva:install --root=1

# New website with basic pages
vendor/bin/contao-console creuva:install --with-pages --site-title="My Company" --dns=example.org

# Complete demo website with sample content, images, news and form
vendor/bin/contao-console creuva:install --demo

Notes

Error message: This page isn’t working / The page redirected you too many times

Edit the website root and set the protocol under URL settings to http:// or https://, depending on how your site should be accessed.

Demo icons and downloads are missing

Run vendor/bin/contao-console contao:symlinks so that public/files/creuva-demo is created.

Search finds nothing

Build the search index once after the setup: System › Maintenance or contao:crawl.

Demos and styleguide

Creuva comes with four demos. Each one is imported as a website root of its own – in the back end under Layout › Creuva › Set up (option “Import a demo website”) or on the console. In an existing installation, you add the demo alongside with its own domain (--dns) or language (--language).

All demos use only core elements, Creuva elements and template variants, so they work the same in Contao 5.7 and 6. The elements are independent of the demos: whatever a demo shows, you can use on any Creuva website.

Standard / Creative

• Pages: home page, services (web design, development, consulting), projects with six project pages, about us with team, pricing, news & knowledge with FAQ and downloads, contact with thank-you page, legal notice, privacy policy, accessibility statement, sitemap, search and a 404 page
• Modules: main navigation, header with CTA and search, footer with four columns and social media links, news list and reader, sitemap, search engine
• Image sizes for every spot in the layout (logo, hero, card, image & text, wide, team, avatar, news, gallery) with several widths, WebP and lazy loading
• News archive with three posts (only with the News bundle installed)
• Files under files/creuva-demo/standard/ (illustrations, icons, PDFs) with alt texts
• Favicon in the website root and the style switcher for trying out the color schemes

Company

A classic company website (“Kessler Metalltechnik GmbH”, Light, color scheme Ocean, square corners):

• Pages: home page with key figures, services and industries; services with machinery; industry solutions; references; company with history, certificates and locations; careers with job offers and online application (file upload); download center; news; contact with contact persons
• Job offers are news items in the archive “Stellenangebote” with the list template news_creuva_job (see News)
• Process steps as a template variant of the description list

Portfolio / Studio

For photographers, architects and creative studios (“Studio Lichtung”, typography Editorial, color scheme Terracotta, small corners):

• Pages: home page with full-screen hero, works with six project pages, image archive (masonry gallery with lightbox), studio with team, services with pricing and FAQ, journal, contact
• Project pages: full-screen hero, project data (facts), text, a different gallery arrangement or a slider with thumbnails on each page, and a link to the next project
• Image tiles (creuva_tile), logo bar and the grid class “Versetzt” (offset, u-grid-offset)

Sports club

For football and sports clubs (“TSV Rotenbach 1921”, Light, color scheme Red, medium corners, crest as logo):

• Pages: home page with next match and latest result, teams with training times and league table, fixtures, club with board and sports park, news, sponsors with packages, membership with online application and membership form (PDF)
• Fixtures and results are events in the calendar “Spielplan”. Their dates are relative to the day of the import, so the next matches are always in the future.
• Content element “Match” and table class “Liga-Tabelle” (league table, u-table-league)

Styleguide

The styleguide shows all elements, template variants, CSS classes and modules of the theme on one page: colors, typography, buttons, lists, tables, media, key figures, accordion, backgrounds, animations, all form fields, breadcrumb and news list. It is independent of the demos and can be added to any Creuva website – under Layout › Creuva › Styleguide or on the console:

vendor/bin/contao-console creuva:styleguide --root=1
vendor/bin/contao-console creuva:styleguide --root=1 --replace   # recreate after a theme update

• Page “Styleguide” (alias styleguide) at the end of the website, not in the navigation, not in the search index and with noindex,nofollow
• its own modules, a form and a news archive with the prefix “Styleguide – "
• files under files/creuva-demo/styleguide/

The demos install the styleguide as well.

Accessibility statement

Every demo comes with the page zugaenglichkeitserklaerung, linked in the footer. Each section is a text element of its own; sections that don’t fit every website (PDF documents, videos, maps, third parties, BFSG, dispute resolution …) are hidden and can be shown via the eye icon. --with-pages creates the page with a placeholder.

Design

You set up the look in the page layout under Creuva design. Below the fields, a live preview shows a heading, buttons and boxes with the current selection.

Color schemes

Each scheme consists of a primary color (buttons, dark areas, links; it also tints backgrounds, borders and text) and an accent color (accents, badges, icons, focus outlines). All schemes meet the WCAG contrast requirements (text 4.5:1, large text and graphics 3:1) in light and dark mode.

You need the key for creuva:install --scheme=…, for the demo.yaml and for links to the style switcher.

Color mode “System”

With “Light or dark by system setting”, the website appears light or dark depending on what the visitor has set in their operating system or browser, and switches along when the setting changes. A small script sets the mode before the first render, so the page doesn’t flash. Without JavaScript, it stays light.

Design per website

In the website root, you can additionally set color scheme, color mode, typography and corner radius under “Creuva design”. These values take precedence over the page layout; a scheme in the website root also replaces the custom colors of the layout. This way, several websites can share one layout and still look different.

The installer and the demos leave the fields in the website root empty (“As in the page layout”), so changes in the page layout become visible right away.

Animations

• The u-reveal-* classes set the direction per element and take precedence; u-reveal-none excludes an element or a whole article.
• Contents that are already visible on load are never hidden; without JavaScript, everything is visible right away.
• Visitors who have “Reduce motion” turned on in their system settings don’t see any animations.
• Hover effects (cards lift, images zoom, arrows move along) are always active.

You can adjust duration, distance and delay with CSS:

:root {
  --reveal-duration: 0.6s;   /* default 0.8s */
  --reveal-distance: 1.5rem; /* default 2.5rem */
  --reveal-stagger: 60ms;    /* delay per element in the grid */
  --hover-lift: -4px;        /* lift of cards on hover */
}

Fonts

Plus Jakarta Sans and Fraunces ship with the theme and are self-hosted, so there are no requests to Google. The browser only loads Fraunces if the typography “Editorial” is selected.

Elements and modules

Creuva comes with its own content elements and modules and styles the Contao core elements. The Styleguide shows how everything looks together.

Content elements

Hero

The hero image comes in several shapes:

• Organic – image with an organic mask
• Rounded – the whole image with a shadow and an accent shape behind it
• Image unchanged
• Image unchanged with accent shape – no shadow and no cropping, ideal for cut-out images with a transparent background
• Full screen (text on the image) – hero across the full width, portrait format on phones

The badge appears as a small card with check marks, one line per point. Image and text are optional.

Logo bar

You link the logos via the file metadata (“Link” field). In dark mode the logos sit on a light surface so that dark and colored logos stay readable. The exceptions are the background „Primär (dunkel)“ (primary, dark) and the class u-logos-original, both meant for white logos. The logo bar is also available as a module, e.g. for the prefooter slot above the footer.

Match

Without a result, the element shows the kick-off time (next match); with a result, it shows the final score. The matching table class is „Liga-Tabelle“ (league table, u-table-league): a compact table with centered numbers; your own team is highlighted if it is bold in the table.

Modules

A full-width contact section below the footer columns is an HTML module with the class c-footer-contact in the footer slot (see the standard demo for an example).

Styled core elements

Creuva also styles:

• the Contao core elements: text, list, description list, table, image, gallery, content slider, accordion, downloads (with file type and size, e.g. “PDF · 245 KB”), hyperlink, code, top link, forms, breadcrumb, search
• the news modules (list as cards, reader, archive menu, pagination)
• events (list with date badge, reader, month and mini calendar, menu), FAQ, newsletter, comments and listing
• the elements of the Theme Components Bundle 2.0: content box, teaser box, price box, feature element, simple box, icon tile, modal
• select fields in forms, without JavaScript

Accordion

Each entry is a card with a round plus/minus toggle. To add an icon in front of the question, set a class on the accordion element: u-accordion-icon (question mark), u-accordion-info or u-accordion-chat. You can add an icon of your own with CSS, see Custom CSS.

Sections with a background

You can also select the background classes (u-bg-muted, u-bg-accent, u-bg-primary) on an article – the article then becomes a full-width section with a background.

Every article has section spacing at the top and bottom. If two articles without a background or with the same background follow each other, the top spacing of the second one is dropped so it doesn’t double up. You can adjust individual articles in the CSS Style Selector under „Abstände“ (spacing).

Topics

• Template variants
• Headlines and text
• Sliders and galleries
• News and events

CSS classes

All Creuva classes are available as styles in the CSS Style Selector, in the CSS style section of content elements, articles and modules. So you don’t need to remember any class names – you just select them.

Categories and groups

The classes are sorted into categories (e.g. „Abstände“, spacing) and, within them, into groups (e.g. „Innenabstand oben und unten“, top and bottom padding). Each group appears in the element as a select field with exactly one style. An element only shows the groups that fit its type – „Raster“ (grid), for example, only on element groups, „Buttons“ only on hyperlink and text elements.

Categories and groups are normal records. Under Layout › CSS styles you can change them, sort them by drag and drop and add your own categories and groups. Sections and element types always apply to the whole group.

Importing the classes

The classes are imported

• automatically by creuva:install,
• once by contao:migrate on existing websites, as long as no Creuva group exists yet,
• after a theme update with new classes, by this command:

vendor/bin/contao-console creuva:css-styles

The import only adds what is missing. Your changes in the back end – titles, element types, removed styles, your own categories and groups – are kept.

Switching from the Style Manager

The classes are still stored in the CSS class field, so the front end stays unchanged. After the update, contao:migrate creates the Creuva groups and transfers the selection. You recreate your own Style Manager groups as CSS styles. Afterwards you can delete the tables tl_style_manager_archive and tl_style_manager as well as the styleManager columns.

Overview of the classes

Element colors

Cards, icon boxes, testimonials, price cards and the boxes of the Theme Components Bundle get a surface (white, gray, light accent, primary or accent color) or just a colored outline. On dark surfaces, text, links and kickers automatically switch to the contrast color.

You set the circle behind the icon of an icon box separately. With the primary and accent color the icon turns white; this works with single-colored SVG icons. SVG icons are colored in the color scheme; with u-icon-original they keep the colors of the file (e.g. multicolored icons). PNG and JPG images always keep their colors.

For key figures, the selection applies to each individual number. Without a selection they only have a light surface on a dark background, and with u-card-none not even there.

Technically, the classes only set CSS variables (--card-bg, --card-border, --icon-bg …) that all cards read – see Custom CSS.

Search and SEO

Search

The Creuva header can show a magnifying glass (field Search in the header, legend Search). It opens a search field above the page – also with Ctrl+K (⌘+K) or / – and sends the search terms to the selected search results page. Without the checkbox, no magnifying glass appears.

The results page holds the core module Website search. Creuva styles it with its own templates: a large search field, results as cards with the page path, highlighted search terms and an optional image, plus tips when nothing was found.

creuva:install --with-pages and the demos create the page „Suche“ (search; hidden, noindex, not in the search index) and activate the search in the header. In a demo definition of your own, header: { search: suche } (alias of the results page) is enough.

The page layout only adds the main section to the search index. Header, footer and copyright therefore don’t show up in the search results.

vendor/bin/contao-console contao:crawl

Search engines and link previews

On all indexable pages, the Creuva layout outputs Open Graph tags and twitter:card: title, description, address (as in the canonical link, without tracking parameters), language (og:locale, e.g. de_DE) and a preview image of 1200 × 630 px.

For the preview image, the layout uses, in this order:

1. on pages with a news reader, the image of the news item – the item then appears as og:type “article” with publication and modification date
2. the first hero, image or other element with an image in the main section, also inside element groups
3. the Preview image for social networks in the website root (metadata, field creuvaOgImage)

SVG files are skipped, WebP, AVIF and GIF are output as PNG, and JPEG stays JPEG. Smaller images are not upscaled.

Canonical

Website roots created by creuva:install have the canonical tag enabled. On existing websites, you enable it in the website root. The Styleguide is set to noindex,nofollow.

Update

You update Creuva like any other Contao bundle, using the Contao Manager or Composer:

composer update pdir/creuva-theme-bundle

Then run the database migrations – in the Contao Manager via Update database or on the console:

vendor/bin/contao-console contao:migrate

The migrations apply changes to the page layout, CSS styles and settings. Your content and the design settings of the website root are kept.

After the update

Depending on the update, these steps may be useful:

creuva:css-styles only adds missing categories, groups and styles. Changes you made in the back end are kept. The --root option specifies the ID of the website root that contains the style guide.

You can find what changed in each version in the changelog on GitHub.

Issues

If you run into problems during installation or setup, or you notice a display error of the theme in a particular browser, please create a new ticket or write to us at support@pdir.dev.

Ticket overview Create new ticket

Known limitations

# 1 Accessibility tools and animations of the Theme Components Bundle have no effect

The accessibility tools (contrast, font size) and the scroll animations of the Theme Components Bundle use the generatePage and parseFrontendTemplate hooks. Contao does not run these for page layouts of type “Modern”. The settings in the website root therefore have no effect in the Creuva layout.

Creuva comes with its own animations, see Animations.

# 2 Demo icons and downloads are missing on Windows

The demo files (SVG icons, PDFs) are loaded directly from files/creuva-demo/ and need the symlink public/files/creuva-demo (contao:symlinks). On Windows this fails without administrator rights or developer mode.

For local development, a directory junction helps:

mklink /J public\files\creuva-demo files\creuva-demo

creuva:install --reset and contao:symlinks cannot handle an existing junction and abort. Remove the junction beforehand with rmdir public\files\creuva-demo (this only deletes the link).