Supermint theme documentation

Welcome to Supermint

A theme for CMS concrete5 .

Note

To help those in need, this documentation has been copied and pasted from the web archive page, and edited somewhat for clarity. A perfunctory comparison of the documented options has been made by running supermint in concrete5 version 8.4.2 , however full testing has not been done, and there is no assurance that theme features are functioning as documented. As you read, please also consider that the English here was generously translated from French by the original author.

Fundamental principles:

• Use as much as possible of existing blocks of Concrete5
• Very intensive use of custom template for blocks
• Use just as intensive classes for blocks and areas
• Regular use of pages and files attributes
• Anything that is not regulated by the above mentioned ways will be through the options themes of the in the dashboard

So if you master well the custom templates, and classes for block areas and the attributes, you will take great pleasure in creating your site with Supermint.

If these concepts are still unclear or unknown, do not worry, in a few hours (if not minutes), through this documentation and the editor documentation.concrete5.org you will master these principles and will join the group of happy users.

Installation instructions

If you have never installed a package on a Concrete5 site, read this first: https://documentation.concrete5.org/editors/dashboard/add-functionality

• Installing Concrete5 on your server

  If you choose to install a starting point from Supermint, please do it on a fresh Concrete5 installation. When you will install Concrete5 on a server you have two choice of content, choose Empty Site.

  <example image missing>

• Manual installation of Supermint

  1. Unzip this file in your site’s packages/ directory.
  2. Login to your site as an administrator.
  3. Find the Add Functionality page in your dashboard.
  4. Find this package in the list of packages awaiting installation.
  5. Click the install button.

Installation page & Starting points

Once the install button has been clicked you will see a gallery with all Starting points available. For each, you see a button for a preview, another to choose it. Once your choice has been made, click on bottom on the install button. This can take some time, don’t refresh or leave the page !

• LAST STEP

  Read this documentation to discover how to play with Supermint !

---

Extend Supermint

The best way to customize theme files and keep the update functionality is to know what you want to change.

• If you want to customize css:

  Create a file named supermint.css placed at root/application/themes/supermint/css/supermint.css

• If you want modify a page-type:

  Copy/paste the page-type file from packages/theme_supermint/themes/supermint/left_sidebar.php into root/themes/supermint/left_sidebar.php and modify it as you want

• If you want to add a page-type:

  Add a file into root/application/themes/supermint/my_page_type.php. After go to dashboard > page-types > add a page type, name it and give as handle the file name (my_page_type). This page type will be available now when you will create a new page.

• If you want to modify the header.php or footer.php

  or any other files from Supermint theme elements folder:

  Copy/paste the header file

  from packages/theme_supermint/themes/supermint/elements/header.php

  to root/application/themes/supermint/elements/header.php

  and change what you want into this.

---

Original reference: web.archive.org page

Color Customization

Concrete5 has a theme customization built-in the core. This system is powerful to personalize theme colors, it became a bit limited for other options like toggle (on/off), Fonts (From Google fonts), Select options.

In this case we choose to use this theme customization only for color settings, others settings are available in the theme options section, in the dashboard.

Personalize colors

First of all, if you are not familiar with this system, read this documentation .

Now it will be important to understand how Supermint are built for colors.

Four colors

Almost all colors from the theme are calculated from four basic colors : Primary, Secondary, Tertiary, Quaternary. If you play with these colors on the left of this page you will see that lots of elements are changing. This is to made your customization’s life easier. Just change some colors and all the website becomes yours!

Need more controls? You have it!

Some colors in the theme customization panel are transparent with a cross: It is because this color are calculated or kept from one of basic colors. If you want to cut this link, feel free! Choose a color and you will have finest customization.

---

Original reference: web.archive.org page

Options framework

Supermint is powered by a unique options system that lets you customize many different parts of the theme without any code. These options are saved as presets, which are “collections” of options. These presets can be applied to certain pages or the entire site, which is very convenient to have different site appearance.

---

Theme Options

Here you will find all options available in the theme option page of Supermint with an explanation, type and default value (with the base preset).

Layout

For each page of the site play with these options to fine tune design details as optional Area, Boxed layout, Side-bar size.

---

Enable responsive layout -

If enabled, all layouts will be adapted for small screen. If disabled the site will be rendered as desktop on mobile & tablets.

• type : toggle
• default : On
• id : responsive

---

Display wide Top Area -

Display an Area under the logo to add some wider content.

• type : toggle
• default : Off
• id : display_top_area

---

Display Top Bar -

Display zone with Logo Area, right Header content. Disable this for the Wide navigation style.

• type : toggle
• default : On
• id : display_top_bar_area

---

Top Bar width size -

Add or remove a column for logo in the top-bar.

• type : select
• default : Normal
• id : logo_col_size

---

Layout mode -

Each page templates can be displayed in a wide or a Boxed format. Boxed format use the color ‘boxed-background-color’ as background.

• type : select
• default : Wide
• id : layout_mode

---

Sidebar width size -

Add or remove a column in the sidebar.

• type : select
• default : Normal
• id : sidebar_size

---

Sidebar padding -

Add space between the sidebar border and the content.

• type : select
• default : Normal
• id : sidebar_padding

---

Sidebar offset -

Add Space between sidebar and the Main content area.

• type : select
• default : None
• id : sidebar_offset

---

Content padding -

Add or remove space between border and content in the Main content area.

• type : select
• default : Normal
• id : content_padding

Blocks templates

In this section you find options to control Block’s custom template details

Page List

Options for the Built-in “Autonav” block

---

Display tag filtering -

Display tag filtering on templates that support this feature.

• type : toggle
• default : On
• id : isotope_display_tags

---

Display Keyword filtering

Display keyword filtering on templates that support this feature

• type : toggle
• default : On
• id : isotope_display_search

---

Feature

Options for the Built-in “Feature” block

Display button -

Display a link button on certain Feature block template

• type : toggle
• default : On
• id : feature_link_button

---

Button text

The default text to add on the button

• type : text
• default : More
• id : feature_link_text

---

Autonav

Options for the Built-in “Autonav” block

Icon class on left of each navigation title

Pick an icon from the Font Awesome Library. This icon will be used throught all autonav template.

• type : awesome
• default : -
• id : default_nav_block_icon

---

Display icon on Horizontal template

• type : toggle
• default : Off
• id : autonav_horizontal_icon

---

Supermint Navigation

This section display options common for the navigation’s types

---

Navigation Style -

Choose the navigation style

• type : select
• default : Regular drop-down mode
• id : navigation_style

---

Disable Auto embed navigation

If disabled, a global area will let you put whitch block you want for nav.

• type : toggle
• default : Off
• id : disable_embed_nav

---

Choose a page for searching result -

Display Search box in the top of the page if a page is selected. Add a block search on this page to display result.

• type : page
• default : 0
• id : display_searchbox

---

Display search input in the mobile version -

• type : toggle
• default : On
• id : display_searchbox_mobile

---

Hidden dropdown on small screen -

• type : toggle
• default : On
• id : hidde_dropdown_small_screen

---

Auto hidden Mobile bar

If enabled, the small toolbar is hidde during scroll.

• type : toggle
• default : Off
• id : auto_hidde_top_bar

---

Display icon on first level if available

If the atrtribute ‘icon’ is filled on a first-level page it will be displayed in the top-nav

• type : toggle
• default : On
• id : first_level_nav_icon

---

Make regular nav FLAT

Once enabled, this options remove all gradient and shadow from the regular type navigation. Usefull for light colors

• type : toggle
• default : Off
• id : first_level_regular_flaterize

---

Items spacing

Set horizontal space between each nav items on regular nav

• type : range
• default : 20px
• id : nav_item_spacing

---

Dropdown mode

Options When the nav is in dropdown mode

---

Fix the navigation bar on top -

If enabled, the nav bar will be fixed on top. You will need to disable the auto-embeding of navigation and placing the autonav block into the ‘Responsive Navigation’ Area

• type : toggle
• default : Off
• id : wide_navbar_fixed

---

Dropdown Width -

Set width for dropdown in main navigation when it’s on dropdown mode

• type : range
• default : 220px
• id : nav_sub_level_width

---

Dropdown multicolumns

Options When the nav is in dropdown mode and the attribute “Display multi-columns dropdown” is activated

---

Multicolumns position -

Display multi-columns nav as full width or under parent

• type : select
• default : Aligned on left of the parent
• id : full_width_multicolumn

---

Number of link per columns -

This setting allows you to set the number of items by columns (only if the “break by parent” (below)) is deactivated

• type : range
• default : 5link
• id : `nav_multicolumns_item_per_column

---

Activate the break by parent -

The number of columns is determined by the number of child page in second level.

• type : toggle
• default : On
• id : break_columns_on_child

---

Large Dropdown mode

Options When the navigation style is is set on “Wide Large drop-down mode”

---

Remove the regular place take by the navigation -

This advanced option let to control when the auto-embed nav is set on off and we want to play with this navigation place.

• type : toggle
• default : Off
• id : wide_navbar_colapse

---

Contains navigation width to the content width -

If enabled, it disable the full width feature and display navigation as large as the content

• type : toggle
• default : Off
• id : wide_navbar_contained

---

Display the stack ‘Site Logo’ on left -

If enabled the content of the stack will be displayed on left

• type : toggle
• default : On
• id : wide_navbar_display_logo

---

Lateral mode

Options When the nav is diplayed on left

---

Choose the font-family for links

By choosing an element you select which font (not size) to use for links in the navigation

• type : select
• default :-
• id : lateral_nav_element_font

---

Font size for links items

• type : range
• default : 14px
• id : lateral_nav_element_size

---

Make links uppercase

• type : toggle
• default : Off
• id : lateral_nav_element_uppercase

---

Activate the harmonize-text script

This script tries to harmonize title width to create a unique design. For now can display width smaller sometimes but always visible.

• type : toggle
• default : Off
• id : lateral_nav_element_harmonized

---

Responsive full width mode

Options when the nav shown on mobile

---

Display the stack ‘Site Logo’ on the mobile nav -

If enabled the content of the stack will be displayed at left.

• type : toggle
• default : On
• id : display_logo_mobile_nav

---

Display the regular Area Logo on Mobile -

If disabled, the Logo will be hidden when the mobile nav is shown.

• type : toggle
• default : Off
• id : display_main_logo_on_mobile

---

Font size for links items -

• type : range
• default : 20px
• id : full_screen_nav_font_size

---

Responsive Lateral Nav (mmenu)

Options the autonav template is “Supermint Mmenu”

---

Choose the theme -

By choosing an element you select which font (not size) to use for links in the navigation

• type : select
• default : Light gray background
• id : mmenu_theme

---

Choose the Position -

By default, the menu will always slide the page out to the right but you can change it.

• type : select
• default : Left
• id : mmenu_position

---

Pane shadow -

Enable if you want the page to have a shadow to emphasize it is in front of the menu.

• type : toggle
• default : Off
• id : mmenu_shadow

---

Display Icon -

• type : toggle
• default : Off
• id : mmenu_display_icon

---

Mega menu options

Options when a parent page displays a Stack as mega-menu

---

Mega menu position when dropdown mode -

Display a mega menu as full width or under parent

• type : select
• default : Full width mega-menu with percent based columns width
• id : full_width_mega

---

Mega columns width -

Columns width in pixels for mega menu when aligned to the left

• type : range
• default : 200px
• id : mega_columns_width

---

Block title when exist -

Display the block name as title

• type : toggle
• default : Off
• id : display_title_mega_menu

---

Slide Navigation options

Options available when navigation is set on “slide” mode

---

Navigation Event -

Choose the event that activates the sliding menu (not on dropdown)

• type : select
• default : Click
• id : nav_event

---

Navigation Double click management -

Choose to open/close or go to the url on second click

• type : select
• default : Go to the Url
• id : nav_dbl_click_event

---

Open on load -

If enabled, Subnavs will be open if they are one subpage active. If disabled subnavs are closed on page load.

• type : toggle
• default : Off
• id : nav_open_on_load

---

Display little arrow on right -

• type : toggle
• default : Off
• id :nav_slide_arrow

---

Sub-page icon -

The icon from FontAwesome displayed on left of each sub-page.

• type : awesome
• default : -
• id : default_nav_icon

---

Display pane title -

Display the first level page title & link on the top of each subnav panes.

• type : toggle
• default : Off
• id : display_pane_title

---

Navigation column -

How many columns you want in the sub navs

• type : select
• default : Four
• id : nav_columns

---

Columns margin -

Set space between columns in percent

• type : range
• default : 2%
• id : nav_columns_margin

---

Open speed -

Set the speed to open the nav

• type : range
• default : 300ms
• id : nav_open_speed

---

Close speed -

Set the speed to close the nav

• type : range
• default : 300ms
• id : nav_close_speed

---

Slide speed -

Set the speed when subnavs slide

• type : range
• default : 300ms
• id : nav_slide_speed

---

On mouse leave delay -

Set the wait time for close the nav, after the mouse leaves the nav

• type : range
• default : 1000ms
• id : nav_mouseleave_delay

---

Shorten description on subnavs -

If set to 0 all description text will be displayed

• type : range
• default : 0Char
• id : nav_shorten_desc

---

Footer

Options for the Footer section

---

Display Footer -

• type : toggle
• default : On
• id : display_footer

---

Footer column -

How many columns you want in the footer

• type : select
• default : One Half and two
• id : display_footer_column

---

Make Footer Global -

If enabled, Block on footer will be Globals

• type : toggle
• default : On
• id : footer_global

---

RAW HTML Credits -

If you want to change it, feel free

• type : textarea
• default : Designed by MyConcreteLab Powered by concrete5
• id : footer_credit

---

Disable Footer login links -

If enabled, you will not see login links in the footer

• type : toggle
• default : Off
• id : disable_footer_login

Popup

Here you can set transitions for popups

CSS transitions for popup

content at start -

CSS only

• type : textarea
• default :-
• opacity: 0;
• transform: translateY(-20px) perspective( 2000px ) rotateX( 10deg );
• id : popup_content_start_css

---

content animate it -

CSS only

• type : textarea
• default : opacity: 1;
• transform: translateY(0) perspective( 600px ) rotateX( 0 );
• id :popup_content_animate_css

---

content animate out -

CSS only

• type : textarea
• default : opacity: 0;
• transform: translateY(-20px) perspective( 2000px ) rotateX( 10deg );
• id : popup_content_out_css

---

Button type for popup

Here you can set the type of button for popup

Button type for popup -

Choose between three styles of button

• type : select
• default : Push
• id : popup_button_type

---

Button color for popup -

Choose between four colors

• type : select
• default : Primary
• id : popup_button_color

Miscellaneous

Activate iFrame z-index script -

Fix an iFrame z-index issue on certain condition.

• type : toggle
• default : Off
• id : fix_iframe_zindex

---

Original reference: web.archive.org page

Site settings

Site Options

Take the control of your concrete5 installation with labels and other background changes. Here you will find all options available in the theme option page of Supermint with a explanation, type and default value (with the base preset).

Marketplace

Choose settings for Marketplace integration

---

Marketplace Enabled -

Enable marketplace integration

• type : toggle

---

Marketplace Intelligent Search -

Enable intelligent search integration

• type : toggle

Concrete5 news

Choose settings for concrete5 News integration

---

News Overlay -

Display an overlay with up-to-date news from concrete5 once per day

• type : toggle

---

Concrete5 News -

Enable concrete5 news within your site

• type : toggle

White label

Personalize the CMS itself

---

Concrete5 Logo -

Absolute path to custom Concrete5 Logo. Image should be 23px width and height.

• type : file
• default : 0
• id : concrete-white_label-logo

---

Concrete5 Name -

The name of the CMS

• type : text

Miscellaneous

A section for miscellaneous settings

---

Default jpeg image compression - This setting allow you to control the quality of thumbnails generated by concrete5. Big value creates nice image, but slow loading.

• type : range

---

Original reference: web.archive.org page

Slider Options

Fine tune slider or carousels on different custom templates.

Page-list Carousel

Supermint offers multiple custom templates for the built-in page-list block that display pages into a slider or carousel. Below you will find options to take the control of different settings.

---

Default number of Pages to show -

How many items per view by default. This can be overriden by custom classes on the block itself (eg: column-4)

• type : range
• default : 3blocks
• id : carousel_slidesToShow

---

Default Margins -

Default Margins between items. This can be overriden by custom classes on the block itself (eg: carousel-margin-10).

• type : range
• default : 10px
• id : carousel_margin

---

Display Dots -

Display small dots under the pages.

• type : toggle
• default : On
• id : carousel_dots

---

Display Arrows -

Display Arrow on top right of pages.

• type : toggle
• default : On
• id : carousel_arrows

---

Infinite -

Infinite loop sliding

• type : toggle
• default : On
• id : carousel_infinite

---

Center Mode -

Enables centered view with partial prev/next slides.

• type : toggle
• default : Off
• id : carousel_centerMode

---

Adaptive Height -

Enables adaptive height for single slide horizontal carousels.

• type : toggle
• default : On
• id : carousel_adaptiveHeight

---

Auto Play -

• type : toggle
• default : On
• id : carousel_autoplay

---

Scroll Speed -

• type : range
• default : 300ms
• id : carousel_speed

---

Auto Play Speed -

• type : range
• default : 5000ms
• id : carousel_autoplaySpeed

---

Display meta -

Display Meta information like user. You need also to activate the Date display option in the block edit.

• type : toggle
• default : On
• id : carousel_meta

Stack Carousel

Supermint offers a custom template for Stack displayer that displays blocks into a carousel or slider. Below you will find options to take control of different settings of this Carousel.

---

Default blocks to show -

How many block per view by default. This can be overriden by custom classes on the block itself (eg: margin-10).

• type : range
• default : 3block
• id : stack_carousel_slidesToShow

---

Margins -

Margins between items

• type : range
• default : 10px
• id : stack_carousel_margin

---

Display Dots -

• type : toggle
• default : On
• id : stack_carousel_dots

---

Display Arrows -

• type : toggle
• default : On
• id : stack_carousel_arrows

Display Arrow on top right of blocks

---

Infinite -

Infinite loop sliding

• type : toggle
• default : On
• id : stack_carousel_infinite

---

Center Mode -

Enables centered view with partial prev/next slides.

• type : toggle
• default : Off
• id : stack_carousel_centerMode

---

Adaptive Height -

Enables adaptive height for single slide horizontal carousels.

• type : toggle
• default : On
• id : stack_carousel_adaptiveHeight

---

Auto Play -

• type : toggle
• default :On
• id : stack_carousel_autoplay

---

Scroll Speed -

• type : range
• default : 300ms
• id : stack_carousel_speed

---

Auto Play Speed -

• type : range
• default : 5000ms
• id : stack_carousel_autoplaySpeed

---

Simple slide

The custom template “Supermint simple” on the built-in “image-slider” block use great CSS3 animation for image transitions. You can pick the one you love.

---

Image Slider Transition -

• type : select
• default : Soft scale
• id : image_slider_effect

Image Slider

Options when ‘Supermint Slider’ is chosen as custom template for the Image Slider block.

---

Image to show -

How many items per view

• type : range
• default : 1image
• id : image_slider_slidesToShow

---

Margins -

Margins between images

• type : range
• default : 10px
• id : image_slider_margin

---

Display Dots -

Display small dots under the pages

• type : toggle
• default : On
• id : image_slider_dots

---

Display Arrows -

Display Arrows on top right of blocks

• type : toggle
• default : On
• id : image_slider_arrows

---

Infinite -

Infinite loop sliding

• type : toggle
• default : On
• id : image_slider_infinite

---

Adaptive Height -

Enables adaptive height for single slide horizontal carousels.

• type : toggle
• default : On
• id : image_slider_adaptiveHeight

---

Auto Play -

• type : toggle
• default : On
• id : image_slider_autoplay

---

Auto Play Speed -

• type : range
• default : 5000ms
• id : image_slider_autoplaySpeed

---

Scroll Speed -

• type : range
• default : 300ms
• id : image_slider_speed

---

Original reference: web.archive.org page

Font Options

Here you will set all font family from 600+ Google fonts, font size, font variant used into the site. This is a super powerful feature; easy to play with.

Fonts from Google

In this section you will choose which font is assigned to which element. You also need to choose one or more variations : styles such as bold and italics have their fonts.

Examples:

Choose a font for paragraphs. We will take for example the font Roboto because it offers several variations: Choose as font for paragraphs Roboto. Once loaded you will see example display on the right.

<image missing>

Now next to Variants you will see Regular which is the mandatory style for any font. So that the text in bold and italic appears good in your website, you should choose the corresponding variants. In this case select the 300, 300 Italic, 700 and 700 Italic. We intentionally deviating the Regular style that we do not like so much.

Note

Many police place has only mode Regular. Bold and italic will therefore rendering random manner following browsers.

Choose a Variant as default

Once several variants displayed a new menu item appears below, to choose which version to use by default. In this example if we select 600, all paragraphs will be displayed in bold. If we select 300, all paragraphs will light mode, what we want, so select it.

The ‘Subsets’ are only used for some languages, if you need select the ones that suit you.

Font size

Here you can adjust the size of each element typography.

Font Variations

Select any item in this section to capital. This style is often appreciated for h4, h5, h6.

Responsive text

In this section, you can choose to calculate different font sizes for the different screen sizes. The ratio for widescreen multiply the size as said split tablet and phones.

Example:

Note

For paragraphs, we select a size of 16px.

Ratios:

Wide screen: 16 * 1.2 = 19px

Tablet: 16 /1.2 = 13px

Phones: 16 /1.3 = 12px

If 1 is selected, no change will be made in sizes chosen in the section “Font size” above.

---

Global page Font -

This font is used on all elements except those below

• type : font
• default : Roboto
• id : p

---

Fonts for alternate text -

Choose a font for the alternate class (available in the WYSIWYG editor)

• type : font
• default : Pacifico
• id : alternate

---

Fonts for Titles level-1 -

H1

• type : font
• default : Roboto Condensed
• id : h1

---

Fonts for Titles level-2 -

H2

• type : font
• default : Roboto Condensed
• id : h2

---

Fonts for Titles level-3 -

H3

• type : font
• default : Roboto Condensed
• id : h3

---

Fonts for Titles level-4 -

H4

• type : font
• default :Roboto
• id : h4

---

Fonts for Titles level 5 -

H5

• type : font
• default : Roboto
• id : h5

---

Fonts for Titles level 6 -

H6

• type : font
• default : Roboto
• id : h6

---

Fonts for small tags into heading -

You can add rythm to your heading by adding a \ tag into it

• type : font
• default : Roboto Condensed
• id : small

Fonts size

Choose font-size in pixels for elements.

---

Paragraph size is defined in the Theme Customization Panel This option is only defined in the theme customization

---

H1 -

• type : range
• default : 50px
• id : h1_size

---

H2 -

• type : range
• default : 35px
• id : h2_size

---

H3 -

• type : range
• default : 25px
• id : h3_size

---

H4 -

• type : range
• default : 20px
• id : h4_size

---

H5 -

• type : range
• default : 17px
• id : h5_size

---

H6 -

• type : range
• default : 16px
• id : h6_size

---

‘Lead’ class -

• type : range
• default : 14px
• id : lead_size

---

‘Alternate’ class -

• type : range
• default : 0.8em
• id : alternate_size

---

Fonts size (in em) for small tag in titles -

• type : range
• default : 0.8em
• id : small_tag_size

Font variation

Make H1 uppercase -

• type : toggle
• default : Off
• id : h1_upp

---

Make H2 uppercase -

• type : toggle
• default : Off
• id : h2_upp

---

Make H3 uppercase -

• type : toggle
• default : Off
• id : h3_upp

---

Make H4 uppercase -

• type : toggle
• default : On
• id : h4_upp

---

Make H5 uppercase -

• type : toggle
• default : Off
• id : h5_upp

---

Make H6 uppercase -

• type : toggle
• default : Off
• id : h6_upp

Responsive text

Size above are used on regular display (between 980px & 1200px). To keep proportionalities, fonts are tailored to bigger & smaller screens with a ratio. You can adjust the ratio if the result does not satisfy you on your tablet or phone.

---

Ratio for bigger desktop screen (more that 1200px) -

I think the most popular screen size

• type : range
• default : 1.24
• id : wide_ratio

---

Ratio for Portrait tablets -

• type : range
• default : 1.3
• id : w724_ratio

---

Ratio for Phones & tablets -

• type : range
• default : 1.3
• id : full_ratio

---

Text minimum limit. -

This option prevent to have too small text on tablet or mobiles.

• type : range
• default : 12
• id : size_minimum

---

Original reference: web.archive.org page

Presets

In the Dashboard under “Supermint options” there are three choices,

• Theme options
• Sliders
• Fonts

each with its own options page that has a preset dropdown selector. All options are saved in the database, grouped into presets. Each preset therefore contains general options of the theme, the sliders and fonts. The other two choices

• Site settings
• Presets

do not have a preset dropdown selector on the page.

Presets selector

The choice of presets available is displayed on the top left, in each page of options. When you save a page of options, they will only be saved in the preset THAT is displayed on the top left.

Manage Presets

On the Theme presets page, you can set as default, add, delete, rename, export, and import presets.

Apply presets to whole site

To set a preset for the whole site, go to the Dashboard->Supermint Options->Presets page, then in the “Manage presets” section click on the button “Set as Default”.

Apply presets to pages

Sometimes we need a site that has some pages with a different appearance. For this we can create different preset, set one for the whole site and apply another to certain pages.

Overview

To apply a preset on a page only, go to the Customize theme page and set the attribute Preset Option.

Details

1. Exit edit mode (go back to site) by clicking on the pencil in the editing toolbar.
2. Goto the page that needs editing.
3. Click on the gear in the editing toolbar upper left.
4. Follow concrete5 page edit drop down documentation. Click on the “Design” selection

---

5. Under the Theme box, click on “Customize” in the theme icon.

---

6. Pick one of the presets radio buttons.

---

7. Click on the “Save” button
8. Click on the “This page” button

---

Original reference: web.archive.org page

---

Original reference: web.archive.org page

Navigation

Discover how to manage different type of navigation, mega-menu, columns…

Choosing a navigation type

The first thing to ask is what is the type of navigation that best suits the project. Once that choice is made, go to theme options pages in the sub topic Navigation / navigation style and select from options the wanted type. Then read the section below that corresponds to the choice. Only the Mega-menu is common to both types of navigation.

1. In the dashboard choose Supermint Options->Theme options

2. Choose a navigation option

• Disable auto embed navigation: Supermint has an auto embed navigation system. For those that need more controls on autonav block, an option in the theme option page allows disabling the auto embedding navigation. In this case add an autonav block on the Navigation top Area with Supermint or Supermint Dropdown custom template on it.

Regular drop-down mode

Once type Regular drop-down mode is selected, choose from three kinds of display sub-menu, default, Multi-columns or Mega-Menu.

1. Default

Simple dropdown ( Default behavior ), where Multicolumns position is set to “Aligned left on parent”

Example:

2. Multi-columns

Display children as column Activated by an attribute.

This mode requires that there is at least one level below the root level pages. In this case, activate it by going to the attributes of the root of this page and check the Display multicolumns dropdown. Then fine-tune the display of columns through options for this mode .

---

Example:

---

Details:

1. Go to the page to be edited.
2. Click the gear icon, then choose “Attributes”.

3. Scroll down on the left pane to the Supermint Navigation section, click the button “Display multi-columns dropdown” to activate , then scroll down on the right pane to “Display multi-columns dropdown”. Click the check box labeled “Display multi-columns dropdown”. Click the save the changes button.

4. Go to Dashboard->Supermint Options->Theme options->Supermint Navigation. Scroll down to the section “Dropdown multicolumns mode”. Choose a number of links per columns smaller than the total number of links assigned to the upper level menu. The result should be similar to the example figure at the top of this section.

3. Mega-Menu

Display columns where content is keep from a Stack. Activated by the existence of a stack

1. Go to Dashboard->Supermint Options->Theme options->Mega Menu
2. Choose a “Mega columns width” with the slider.

3. Notice the wider columns in the dropdown menus.

---

Slide mode

The sliding navigation is an original effect where the full page slides down to reveal the subnav. Find many options to take control of the system in the options theme page.

1. Go to Dashboard->Supermint Options->Theme options->Supermint Navigation
2. Choose Navigation Style “Slide mode”

---

These subnav can be displayed in 3 different ways.

1. Type 1: Level 1 & level 2 with description
2. Type 2: Level 1, level 2 & level 3
3. Type 3: Level 1 & level 2 without description

Choose which type thanks to the page attribute on the root level page :

< image missing >

Case study:

Imagine a site with four top-level pages: Home, About, Work and Services.

• The Home page has no children. The attribute is left unchanged (fig 1).
• The About page contains three sub-pages. We will use here the type 1, subpages appear here with a small description.
• The Work page contains four subpages containing itself several sub pages: category pages (level2) and pages of work (level3). In this case we use the type 2 that displays the categories belonging and work there.
• The Services page that contains a large number of services. We use here the type 3 to display a large number of pages at level 2. This type of navigation is also suitable for products of ecommerce, portfolio and articles.

---

Mega menu

Both systems can display rich dropdown content. The mega-dropdown is just the display from a Stack on the dashboard. The system shows one stack by columns (with capabilities for assembling blocks on each other for certain columns) and can display the block name optionally.

Add a Mega-menu under a page

• Create a stack named with the handle of the root page. If the root page is “My Page” the handle would be “my-page” so the name of the stack will be “mega_menu_my-page” (note the difference between _ and -).
• Then, add the block to the stack. On each block, optionally click and choose “Advanced” to name the block. This name can be optionally displayed on top of the block, into the mega menu.
• Each block is rendered in a new column. To stack different block down the previous, start the name of the block by “-follow-“. In this case the block will be rendered UNDER the previous. So a block to be called “Our Features” call it “-follow-Our Features” to place it under the previous.

---

Lateral Mode

Lateral navigation is a modern way to display page links. It also uses the quaternary color but this is overridable with the color chosen in the theme customization. Find some options in the related section .

This navigation is activated by selecting theme in the navigation style option .

< example is missing >

Header & footer

See in the example, a logo on top and content on footer. Both are blocks kept from stack to allow complete creativity and liberty on what to put on.

• The header stack must be named Lateral Navigation Header
• The Footer stack must be named Lateral Navigation Footer

Link style

For the navigation links choose the font-family from the one chosen in the font section, to exactly fit the design expectations. Optionally choose to uppercase links.

---

Wide Large Top drop-down mode

This Mode displays a full width bar with items inside. This mode works well when the top bar is hidden . The logo comes from a stack named Site Logo.

< Example is missing >

Mobile navigation

There are different ways to achieve a navigation for small screen.

• The first is to add an autonav in the Sitewide Responsive Navigation. On this block set as custom template Supermint Full Screen or Supermint Mmenu. Both display a top bar once the screen is smaller that 768px. Both can display a logo on this bar, where content are taken from the Stack Site Logo, display a search box on the right if a result page is choosen in the theme option page. Both have options in the theme option page. Try it to find which one fits the design expectations.
• The second way is to work with lateral navigation that provides a button on a small screen to open/close the lateral navigation.

---

Original reference: web.archive.org page

Block - Area - Layout classes

How to intensely use custom templates & classes for both Blocks, Area & Layouts

Blocks

Blocks embed with the themes and blocks from the CMS with custom templates

You may have noticed that there is no tons of block-type in the Supermint package and in the same time you have noticed that Supermint is the theme that contains the largest number of feature … Where is the error?

That’s simple:

Themes provided with ten blocks, once installed, just overload the sidebar until losing any legibility and fun to use, so With Supermint all generally available functionality through standard block are integrated with existing type-block via the Custom template or other system such as clips. Everything is easier and the race to the largest number of standard block becomes accidental.

Many custom templates for many blocks are available with supermint. They allow to fully integrate the CMS functionality to Supermint and especially to enrich the display functionality. Available are templates for blocks such as page list, Autonav, Image block, Image slider, FAQ, …

Learn more about block models. Go here

Page list

Carousel, Sliders, Portfolio, Filtering.. Endless possibilities with page-list templates!

Navigation

Different templates for the autonav block

Image

All custom templates and classes for the built-in image block

Image Slider

Use custom templates to display image slider in different ways

Testimonials

Supermint has a template for the built-in testimonial block

Features

Multiple custom templates for the feature block

Pie chart

Impress visitors with a highly customizable, very easy to implement and responsive pie chart.

FAQ

Supermint can display Frequently asked question as a accordion. Just add the custom template on the block to enable the awesome.

All others

All other built-in blocks of Concrete5 that Supermint supports

---

Original reference: web.archive.org page

Blocks Navigation

Different templates for the autonav block

Autonav block has a number of customized templates. Four are used for navigation and the header are automatically loaded by the theme. The others can be added anywhere on a page. It is the ones that we will see it in detail.

Warning

Supermint, Supermint Dropdown are specialized for the top-nav. It can’t be used in a page content

Examples:

navigation-default & navigation-vertical-box-color

navigation-boxed & navigation-simple

navigation-breadcrumb

Blocks, Image

All custom templates and classes for the built-in image block.

Supermint use intensivly the built-in image block in different way. Discover how to play with custom templates and custom classes

Custom Classes

Smoked Classes

Add a subtle color overlay on image to fit exactly with your color scheme

• black-smoked
• primary-smoked
• secondary-smoked
• tertiary-smoked
• quaternary-smoked
• white-smoked

No Text class

Disable the displaying of Heading in image

• no-text

Height Classes

Used in Supermint Header to set the height of the banner. The value is relative to a percent of the display (80 = 80% of the browser view area)

• height-80
• height-50
• height-30

Miscellaneous

into-columns is used when the Supermint Header template is placed in a area smaller than a full width container or if you want to see headline that take all the width of the image.

• into-columns

Custom templates

Supermint Header

Below is the Supermint Header custom template. This template supports multiple Custom classes as smoked or height. It also uses the file title and description (or from the block itself if filled) to display Headlines. This headline functionality can be disabled by adding no-text custom class.

<example missing>

Supermint Header doesn’t need to be placed in a full width area. It can also display image where you want in the page. The only thing is that th e height is set relative to the screen and the image is cropped to fit the dimension and that you must set the class into-columns to set reset the width of the headline container.

---

Below we have added a content block under the image block with the custom class image-caption-inside.

Supermint 2 columns

Here the text is come from the “Alt.text” field in the image block. This template also support smoked class.

< example missing >

Supermint Hover

In the live demonstration the images bounce when hovered with the cursor.

• This template follow the design line as Feature block.

• This template supports Custom class smoked.

Supermint caption

This custom work exactly as the default template for the image block but with a caption.

Set it outside

or inside the image, set the color (primary,..)

and for inside, set if it will show only when over.

All these settings can be set by Custom classes on the block.

---

Original reference: web.archive.org page

Blocks, Image Slider

There are two types of image sliders.

• supermint-simple - a manual slide show controlled by the user with a choice of transitions.
• supermint-slider - an automatic slide show with many options

Adding a slider block

1. Reference the concrete5 add a block documentation. In the Multimedia section choose the Image slider block.
2. Drag and drop the block into the intended area.

Edit Sliders Custom Template

1. Reference the concrete5 in page editing documentation.
2. Click on the slider block to begin editing.

3. Choose the Design and Custom Template option in the pop up menu.

---

4. Then choose the gear icon in the edit menu bar.

---

5. In Custom Template there are two sliders that can be selected.

• supermint-simple
• supermint-slider

6. The design of the image-slider is made to be displayed in full width. If the block is inserted into a small Area, like columns, the custom class into-columns must be applied on the block.

---

7. The Supermint options can be selected in the dashboard. Click on Sliders.

---

8. See the theme dashboard.

Supermint Simple

A manual slide show controlled by the user with one admininstrative option Image Slider Transition.

Supermint Slider

An automatic or manual slide show with many options.

---

Original reference: web.archive.org page

Blocks, Testimonial

Supermint has a template for the built-in testimonial block.

The Testimonial block gives you all the informational fields you need to relate a good testimonial, including a photo, testimonial / bio text, name, position, and website name and link.

Adding a testimonial block

1. Reference the concrete5 add a block documentation. In the Social Networking section choose the Testimonial block.
2. Drag and drop the block into the intended area.

Edit Testimonial

Once the block is dropped the edit form will pop up. Enter the testimonial data then click save. A picture can be added later if not available now.

Edit Custom Template

Click on the block to be edited. Select Design and Custom Template

Click the gear icon. Make changes to the options. Click save.

Supermint Hover

The option Supermint Hover puts a circular border around the photo and centers the photo over the centered text. When the mouse hovers over the block, the block bounces.

Note

Even though there is the ‘Text Size and Color’ option to change the text alignment, it is always centered!

Default

The default option (none selected) removes the circular border from the photo and floats the photo to the left.

The ‘Text Size and Color’ ‘A’ button option to align text is functional. Here text is shown right aligned.

---

Original reference: web.archive.org page

Blocks, Features

Multiple custom templates for the feature block.

Address Template

Block Button

Features Box

Callout Template

Table

Tiny Box

Tiny

---

Original reference: web.archive.org page

Blocks, Pie Chart

Create highly customizable, very easy to implement and responsive pie chart to impress your audience.

Pie like a breeze

Flat Pie Chart is a plugin from Rendro that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.

Blocks, FAQ accordion

Supermint can display frequently asked questions as an accordion.

Adding an FAQ block

1. Reference the concrete5 add a block documentation. In the Navigation section choose the FAQ block.
2. Drag and drop the block onto the intended area.

---

3. A modal pops up automatically, to create the first entry for the FAQ block.

Editing an FAQ block

1. Reference the concrete5 in page editing documentation.
2. Click on the FAQ block to begin editing.
3. In the pop up menu click on Edit block.

---

4. A modal will allow adding, removing, editing and reording questions.

Adding an accordion to the FAQ block

1. Reference the concrete5 in page editing documentation.
2. Click on the FAQ block to begin editing.
3. Choose the Design and Custom Template option in the pop up menu.

---

4. Then choose the gear icon in the edit menu bar.
5. In Custom Template there is one choice for Supermint Accordion that can be selected.

Blocks, all others

All other built-in block of Concrete5 that Supermint support

Content Block

Custom templates

Adding a content block

1. Reference the concrete5 add a block documentation. In the Basic section choose the Content block.
2. Drag and drop the block into the intended area.

Popup template

This template opens the content of the Content block in a popup when a button is pressed! What is written in the block will be displayed in the popup.

Overview

• In the first line put a <button> tag inside an <h3> heading tag.
• In the second line write the text to be popped in a <p> paragraph tag.
• Set Popup in the custom template.

See the step by step details below.

Edit the content block

1. Reference the concrete5 in page editing documentation.
2. Click on the Content block to begin editing.
3. In the popup menu choose Edit Block

---

4. In the content editor choose Source

---

5. In the content editor source add html for the button and the text to be popped. Then click on Ok.

---

6. In the content editor click on Save

---

7. Choose the Design and Custom Template option in the pop up menu.

---

8. Choose the gear icon in the edit menu bar, choose the Custom Template Popup , then Save.

---

9. Exit edit mode by clicking the pencil in the concrete5 edit bar menu, then publish the changes.

---

10. Try the new button. See the pop up message!

Image Caption

Custom class add a special style to your content, ideal to add rich content under an image.

Image Caption Inside

Is another class that is made to create a layer on the image. As this uses advanced CSS technique will be sometimes displayed differently.

Date Navigation

Custom template

Discussion

Default template

File

Custom template

The Supermint Button Custom Template display the link as a button with icon.

Next - Previous

Custom template

The Supermint Blog Custom Template display a next-previous in a nice way.

---

Original reference: web.archive.org page

Class and templates

Concrete5 has developed tools to customize the content of a three-level different page. It can take some time for the taming but once acquired, these tools become very powerful aids to create a visually and content-rich page.

Three levels, two fashion

Depending on the design or functionality to the content we will add a class on the block, on the area or on a Layout and then change the template for the block or layout.

Custom template or class ?:

Block: templates and classes
Areas: Only classes
Layout: templates and classes

In general (not all the time), areas classes are larger than the block class, classes of Areas rather act on the design while blocks of classes rather act on a feature of the block, much like an option complementary. These are general rules because of block classes sometimes are design classes.

How to use

Block classes & templates

Once added a block on a page you can click on it and select the Design & Custom Template menu item. Then in the top bar click the gear, it will show the selection panel classes and templates. Click in the class and you will see a list, make your choice. Several classes are selectable.

Area classes

Click on an empty area or its label at the bottom left of it and select the Edit Area Design menu item. In the top bar click the gear, it will show the choice of class pane. Click in the class and you will see a list, make your choice. Several classes are selectable.

Layout class

Finally you can add templates from Concrete5 and classes to Layouts. To do this, add a layout by clicking on an empty area or its label and choose Add Layout. Once added, click the label of one of these columns (Column 1 Column 2, …) and choose Edit Layout Design. In the top bar click the gear, it will show the selection panel classes and templates. Click in the class and you will see a list, make your choice. Several classes are selectable.

---

Which class/templates ?

Now that you know how to apply a template or class on three levels, get acquainted with those available with Supermint.

• For a list of classes and templates for the block in the block section of this site.
• For a list of classes for Areas it’s in the Feature section> Page & miscellaneous> Area classes
• And finally you will find nothing yet on layouts because the feature is so new, I did not even study the subject. But beware, it could be very powerful.

---

Original reference: web.archive.org page

Area Classes

Play with classes on Areas to create unique content style

Customize Areas through classes

• Concrete5 introduces custom classes for blocks and Areas. This is great news for designers who can now create skins for it.
• Supermint offers classes of colors, spacing and topics for Areas. The three categories can be mixed between them, so you can add a class for color, one for spacing and finally a topic if necessary. Understand quickly by looking at the following examples.

Color classes

There are eight classes available for Area:

1. area-primary
2. area-secondary
3. area-tertiary
4. area-quaternary
5. page-content-style : Take the design of page content (here white with a small grey border)
6. area-white
7. area-black
8. area-body : Take the pattern and color of the body

Other classes

Take color defined in the color customization .

Spacing classes

Four classes are available to add padding into an Area:

1. small: area-space-s
2. medium: area-space-m
3. large: area-space-l
4. extra large: area-space-xl

Topics classes

Six classes are available to add topics into an Area :

1. topic-get-in-touch
2. topic-idea
3. topic-help
4. topic-config
5. topic-news
6. topic-conversation

Below topics classes are applied with both space-s class and a secondary or tertiary color class.

---

Original reference: web.archive.org page

Stack Elements

How to add tabs, accordions, sliders, .. from a stack

Stacks creates a set of blocks and displays them anywhere in the site. This is useful for updating content that is applied several times in the site. It is also a great opportunity for the designer to use these sets of blocks and display the creative way. The most classic modes are accordions, tabs. Supermint goes further by proposing new and practical ways to display these contents as a button that opens a popup.

Stack documentation on concrete5.org

Usage

To use the various stack display modes, you must first create a stack. For this go in the dashboard in the section blocks and Stacks. You will see a button at the top right allows you to create a new stack, click it, enter a name and save. You can now add blocks in the stack.

In most battery display custom models, you’ll need to set a name for each block. For this, once the block added to the stack, click on it and choose “Advanced”. In the window that opens you will be prompted to enter a name for the block.

Now you must approve that stack so that it is visible to everyone, this step is very important and will pose display problems if omitted.

Add a stack to a page

Once your stack is created, approved and block named (optional), go on a page, turn in block addition mode (the little cross in the upper left), click on “block” and choose “stacks”. Drag the stack that you just created on your page.

There are still two things to settle: the custom template and color class.

Adjust the custom template

Click your battery freshly added to the page and choose Custom Template. The popup menu will offer you lower the different model (accordion, button, ..). Choose the one that suits you.

Slider/Carousel template

A special note for carousel template that can display stacks as carousel (multiple item per view) or slider (once item per view) : Choose the Carousel template and set the number of item by setting the number of column thanks to custom class (see screenshot).

<screenshot missing>

Adjust the color class

Some customized models like accordions support multiple colors taken in the theme. For that click on your newly added to the page stack and choose Custom Template in the text field custom classes you can choose one of the following option: element-primary, element-secondary, element-tertiary, element-quaternary, element-black and element-white.

Examples

Below the same stack with three different custom template :

1. Accordion as custom template with element-secondary as custom class.
2. Tabs as custom template with element-quaternary as custom class.
3. Button popup as custom template with no custom class.

---

Original reference: web.archive.org page

Page customization

Customize pages in many ways.

Discover how to personalize a page

Page Color

See in the top menu, and in some template navigation , a color that is assigned to pages. By default, the selected color is the primary theme color. Assign colors individually for each page by changing the attribute Main Page Color.

[Sc: The attribute main_page_color]

Page Icon

Change the default icon for all pages or for each page separately.

• To change the default icon applied to all pages

  Reference the theme options page Slide Navigation section to change the related option .

• To change the icon of the pages separately

  Edit the attribute of the page in question and choose an icon with the attribute Icon From FontAwesome.

Miniature

The miniature pages are used in Supermint in page-list. This file dimension are adapted as required, so no need to resize the image, the theme will do it. To assign an image to a page, fill the Thumbnail attribute of this page with a valid image.

• Background image of a page

  With Supermint, it is possible to add a background image to a page. In order to have a background image, simply fill in the attribute “background page” in property page.

Note

If the page is not in “Boxed” do not hesitate to use area classes that will give a pleasing background color.

Background image slideshow

It is also possible to add multiple background images on a page. For this create a file sets that will contain all the desired images and choose the file group with the page attribute background slider in properties of page. It might be possible to set a default file for all pages.

<background image slider example missing>

Apply a preset option

If different options settings are needed for all pages, or for a particular page, simply create a page preset and apply through the attribute Supermint theme Option Preset.

Multiple Main Area

It is fashionable today to have long pages composed of large colorful section. Concrete5 introduced Area styles, allowing to customize the appearance thereof. We do not always need this type of stacked layout, which is why I have not built a large number of office area, limiting the suffering of the database. Set the number of main area for data pages by setting the attribute Number of Main Area with the desired number. In edit mode see the new area where content can be added and customized.

Colorful Sticker

Add on top of the page a small label with a very short text. This sticker will take the primary theme color as the background and the color contrast for text. It will be displayed only if the page attribute is filled. To display the sticker, fill the attribute Text for the Ribbon with a short sentence:

Note

The sticker display is more elegant on the full page or side bar page template.

Display Mode “Boxed”

Change the appearance of pages mode to “Boxed”. This displays a white background in the content, detached from the bottom of the page body. For this Boxed Set the mode in theme options in the “Layout”.

---

Original reference: web.archive.org page

Page Lists

An essential tool in building your pages.

How use page-list templates

Great care has been taken in the preparation of different templates for page-list. First because it is a basic functionality in a web site that represent objects and especially because in Concrete5, the Page object is used for countless purposes. For a photographer, for bloggers, agency, members, products, .. page can (almost) everything represented:

Just after the template is applied, the block seems to be blank.
Do not worry, this behavior will be avoided once the page is saved .

Templates can be displayed in three different ways:

1. Static Grid (default)
2. Masonry grid (with or without filters)
3. Carousel (from 1 to 6 pages per slide)

It supports all management columns, with or without margins, and can all display a button with personalized text. All supports displaying thumbnails.

Manage functionality with custom classes set on the block:

• Display as carousel is-carousel
• Enable Masonry grid is-masonry
• Display the page in a popup ( if page-type is UI-content ) popup-link
• The number of columns displayed on desktop screen 1-column - 2-column - …
• Deleting gap between items (no margins) no-gap
• Sorting by tags (only with masonry) tag-sorting
• Sorting by keywords (only with masonry) keyword-sorting

Playing with custom classes

Once the page list added with right settings to the page, click on it and select Design & Custom templates. Under the cog button you will choose a custom template and some custom classes. All classes have a name that tell you what is done once added.

A page list in Edit mode

Each template in edit mode informs you about settings made on it.

Tags sorting

To display and use tags sorting on a page list, you need to add the right custom class tags-sorting and to fill the attribute tags of pages that will be listed. The template will display only tags that are present in this list, not all tags.

---

Original reference: web.archive.org page

Colophon

About this documentation website.

reStructured Text

• The documentation source files are written in reStructured text which ends with an .rst suffix.
  • They exist in ~/workspace/docs/source
• Try an online WYSIWYG editor to learn proper formatting.
• The transformed output build documents are served from
  • ~/workspace/docs/build/html/index.html

Tranformation to html

• Tranformation to html is made with Sphinx a python based document generator.

  • Change into the docs directory, which also has the Makefile

    `$cd ~/workspace/docs`

  • Command line syntax generic

    $ sphinx-build -b html sourcedir builddir

  • Command line syntax specific to this project

    $ sphinx-build -b html ~/workspace/docs/source ~/workspace/docs/build/html

Workspace Customization

• Some workspace customization is required prior to issuing above commands
  • Possible installation of Sphinx something like:
    • $ sudo pip3 install -U sphinx