Metis Theme
Documentation
Documentation
Table of contents
- Installation
- Page templates
- Block Areas
- Block templates
- Containers
- Skins
- Custom Colors
- Content-Block custom styles
1. Installation
1.1 Marketplace installation
Connect to the community in the dashboard (System & Settings -> Marketplace) and install the package.
Go to Extend Concrete -> Add Functionality and install the Theme.
1.2 Manual installation
Unzip the file in your packages/ directory of your Concrete5 installation.
Go to Go to Extend Concrete -> Add Functionality and install the Theme.
2. Page templates
Metis comes with the following page templates:
3. Block Areas
3.1 Block Areas - Full Page template:
The full page template provides the following block areas:
- topbar left (global)
- topbar right (global)
- top navigation (global)
Block area for the navigation/Autonav block (spans over the entire width) - Main area
Area for you main content. - footer 1 (global)
left side of the footer. The width dynamically adjusts with the content. - footer 2 (global)
right side of the footer The width dynamically adjusts with the content. - footer 3 (global)
full container width of the footer -
footer 4 (global)
bottom right area inside the footer. The width dynamically adjusts with the content.
*the contents of global areas are reused on all pages.
The copyright on the bottom left of the footer always displays the current year and the name of your site set in your site settings (Dashboard -> System & Settings -> Basics -> Name & Attributes)
3.2 Block Areas - sidebar left templates:
The "sidebar left" AND "sidebar left 2" provide the following block areas:
- topbar left (global)
- topbar right (global)
- top navigation (global)
Block area for the navigation/Autonav block (spans over the entire width) - Left sidebar
sidebar area to the left of the main content. On mobile devices the sidebar stacks on top of the main area. Use "sidebar left 2" to reverse the stacking order. - Main area
Area for you main content. - footer 1 (global)
left side of the footer. The width dynamically adjusts with the content. - footer 2 (global)
right side of the footer The width dynamically adjusts with the content. - footer 3 (global)
full container width of the footer -
footer 4 (global)
bottom right area inside the footer. The width dynamically adjusts with the content.
Differences "sidebar left" and sidebar left 2":
On "sidebar left 2" the stacking order on mobile devices of the main area and the sidebar area are reversed.
The contents of global areas are reused on all pages.
The copyright on the bottom left of the footer always displays the current year and the name of your site set in your site settings (Dashboard -> System & Settings -> Basics -> Name & Attributes)
3.3 Block Areas - sidebar right templates:
The "sidebar right" AND "sidebar right 2" provide the following block areas:
- topbar left (global)
- topbar right (global)
- top navigation (global)
Block area for the navigation/Autonav block (spans over the entire width) - Right sidebar
sidebar area to the left of the main content. On mobile devices the sidebar stacks on top of the main area. Use "sidebar right 2" to reverse the stacking order. - Main area
Area for you main content. - footer 1 (global)
left side of the footer. The width dynamically adjusts with the content. - footer 2 (global)
right side of the footer The width dynamically adjusts with the content. - footer 3 (global)
full container width of the footer -
footer 4 (global)
bottom right area inside the footer. The width dynamically adjusts with the content.
Differences "sidebar right" and sidebar right 2":
On "sidebar right 2" the stacking order on mobile devices of the main area and the sidebar area are reversed.
The contents of global areas are reused on all pages.
The copyright on the bottom left of the footer always displays the current year and the name of your site set in your site settings (Dashboard -> System & Settings -> Basics -> Name & Attributes)
4. Block templates
Metis Theme comes with custom block templates for most of the core blocks.
Currently Metis Theme provides templates for the following blocks:
- Accordion
- Autonav
- Breadcrumbs
- Content Block
- Document Library
- FAQ
- Feature / Feature Link
- Gallery
- Hero image
- image
- Image slider
- Next & Previous Nav
- Pagelists
- Search
- Share this page
- Testimonial
- Top Navigation Bar
- Topic List
Additionally the following blocks provide more than one template:
4.1. content block
Metis CTA
this content block template styles the content for a call to action element. The content gets centered (horizontally and vertically) with additional padding.
On hover the border gets a subtle glow in the primary color.
Metis CTA 2
this content block template styles the content for a second call to action element. The content gets centered (horizontally and vertically) with additional padding.
On hover the border gets a subtle glow in the secondary color.
4.2 Pagelist
Metis Basic List
This template reacts to your block settings and adjusting itself accordingly. This makes it a very versatile template. Check out the demo to see some examples.
Metis Cards List
Displays the pages as Cards. The cards reacts to your block settings. Works best with thumbnails on. To display the cards it uses a custom grid that responsively adapts to the available space.
Metis Horizontal Cards List:
Displays horizontally aligned cards. This gives you more space for the description. The cards reacts to your block settings. The cards stack vertically on mobile devices and smaller displays. Works best with thumbnails on.
Metis Cards 2
Displays a responsive grid of square cards with hover animations. It uses a custom grid that responsively adapts to the available space. On mouse over (hover) The page description and a button (if set in the block settings) slide from the bottom up. This obviously works best with thumbnail image on.
Pay attention to the lengths of your headlines so it doesn't overflow and gets cut of. You may also want to truncate the page description in the block settings to avoid overflowing issues.
default
a basic list with almost no styling.
Basic List
a very basic list with no styling.
4.3 Search
Basic search (default)
A basic search field
Metis Search 2
Search field suitable for use in a sidebar or other confined spaces. The block title stacks on top of the search field.
4.4 Share this page
default
Default icons next to each other
Metis Share Button 1:
Displays a share button that on click reveals the icons to the right
4.5 Hero image
Metis Hero Image (default)
Responsive image with horizontally and vertically centered text and button. Darkens the image to improve readability.
Metis Hero Image 2
Responsive image with left aligned text and button. Has a subtle gradient overlay using the primary and secondary colors. This works great for top header images like you can see on a lot of pages on this entire demo site.
Video hero
Use this block template to display a video-background on your hero image block.
This requires simply a custom page attribute to be set.
How to setup the custom attribute:
- Navigate to "Pages & Themes" -> "Attributes"
- Use "Add Attribute" and choose "Image/File"
- Use hero_video_file as the Handle (make sure to use exactly that handle) and give it a Name like "video hero file". Choose the input format of your choice and click "Save".
You can now use that page-attribute to select a video file per page.
The video will adhere to the block settings of the hero-image block. Make sure to also select an image in the block settings as a fallback.
4.6 Autonav
Hemera HorizontalNav
Horizontal Menu, displaying the child pages beneath their parents. Can be used in footer sections. The nav is responsive and stacks on mobile devices and confined spaces.
Metis Sidebar-Nav
Vertical menu. Can be used in sidebars and other confined spaces. The Sidebar-Nav has no fixed with and uses the available space.
Metis Sidebar-Nav 2
Vertical menu with collapsed subpages and toggle animation. Can be used in sidebars and other confined spaces. The Sidebar-Nav has no fixed with and uses the available space.
Keep in mind that the parent page of a subpage is not clickable with this template.
4.7 FAQ
Default
Two column design with the questions on the left and the answers on the right. Stacks on top of each other on mobile devices and smaller screens.
Metis Grid FAQ Closed
Displays two-column grid with collapsible FAQ entries. A click on the question reveals the answer. In this template all the questions are closed by default.
Metis Grid FAQ Open
Displays two-column grid with collapsible FAQ entries. A click on the question closes the answers. In this template all the questions are open by default.
4.8 Feature
Default
Displays a feature card with a subtle border-animation on hover. The block template adapts to your block settings.
4.9 Feature-Link
Default
Displays a feature-link card with a subtle border-animation on hover. The block template adapts to your block settings. It supports Buttons and Images.
Metis image feature
Displays a card that uses the set feature-image as a background. It has a subtle border animation on hover as well and also supports buttons.
4.10 Gallery
Default
A masonry style layout gallery. It shows the name of each picture and uses elegant animations on hover. On click the image zooms into fullscreen with the caption displayed at the bottom. Its fully responsive and supports touch input.
Simple Gallery
Displays a simple, clean grid of images. On hover the name of the image gets revealed accompanied by an elegant animation. On click the image zooms into fullscreen with the caption displayed at the bottom. Its fully responsive and supports touch input.
4.11 Image Slider
Metis Theme uses Swiper.js for its image slider templates. They are fast and support touch-input.
Metis comes with 4 image slider templates. Check out the demos to see them in action.
4.12 Image
Default
Default template. Includes a fix for chromium based browsers where scaled images can look pixelated.
Article img
Gives the image rounded corners and a light border in the primary color.
4.13 Top Navigation Bar
The Top Navigation Bar provides a offcanvas-navigation on mobile devices and smaller screens.
It supports search, transparent and sticky block settings. On multi-language sites it provides a dropdown to select the language.
With the "transparent" block setting selected the template adds a blur to the transparent background to improve readability.
5. Containers
"Containers are pre-designed sections that allow you to arrange blocks in complex layouts, enhancing the design and functionality of your pages. They provide a structured way to group content, ensuring consistency across your site and allowing for sophisticated page designs without extensive custom coding."
-- Concrete5 Documentation
Metis Theme ships with four containers:
1. two column container
Creates two columns each with their own block-area. On mobile devices the left column stacks on top of the right column.
The content is vertically centered. (not possible with grid-area-layouts)
--> Handle = two_col
2. two column reverse stacked
Same as the two column container. Except on mobile devices the right column stacks on top of the left column. (reverse stacked)
--> Handle = two_col_reverse
3. two column cta
This is meant to be used as a call to action element.
--> Handle = two_col_cta
4. two column hero
This is meant to be used as a hero element. It adds lots of padding, centers the columns vertically, stacks the columns in reverse and centers the text/contents on mobile devices.
--> Handle = two_col_hero
Containers needs to be setup in the dashboard. To setup the containers go to:
Dashboard -> Pages & Themes -> Containers
Use the "Add Container" Button to add a new container.
Give your container a name and add the corresponding handle.
6. Skins
Included are 5 predefined Skins:
- default
- green
- purple
- orange
- red
To select a Skin go to: Dashboard -> Pages & Themes -> Themes, then click the button "configure" on Metis Theme.
Under the section "Active Skin" use the drop-down menu to choose a skin. Click on "Save".
All skins can also be edited in the color customizer.
7. custom colors
Metis Theme comes with fully customizable colors giving you the ability to have complete control over the look of your site.
The Theme automatically utilizes relative colors ensuring a consistent look without having to manually set a lot of custom colors.
That way you only have to set a handful of custom colors to completely transform the look of your site.
To utilize Concrete5's customizer go to: Dashboard -> Pages & Themes -> Themes, then click the button "configure" on Metis Theme.
Under the section "Customize Theme" click on the button "Launch Customizer"
In the customizer you can edit the following colors:
Primary
This is the primary color of the site.
Secondary
This is the secondary color of the site.
Light
Is used for lighter elements that require contrast.
Dark
Used for the darker elements of the site.
Text color
the color of the text. (except headings. headings are using the primary and secondary colors)
Background
Sets the background color of the site.
8. Predefined styles for the content block (CKEditor)
The theme provides some predefined styles to use in the text editor. (Using the dropdown menus for "Styles" and Headings.
Headings
First set a heading. Then use the "Styles" drop down menu to choose a style. You can choose from the following heading-styles:
Display heading styles
If you need larger headings than the standard headings use "Display" (1-6) styles.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Adding Buttons
You can transform any link you set inside the editor into a button. Simply create a link and select it and choose a button with the "Styles" dropdown menu.
Some examples are:
My Button Button Primary
My Button Button Secondary
My Button Button Success
My Button Button Info
My Button Button Outline-Primary
My Button Button Outline-Secondary
My Button Button Outline-Success
My Button Button Outline-Info
There are a lot more variants to choose from.