Modena - Concrete5 theme

Visit the demo site

Getting started

Thank you for purchasing this theme from Vidal, we truly appreciate you choosing our product.

What you will need...

  • A hosted copy of Concrete5, preferably the latest version
  • FTP Software that allows you to transfer files to/from your hosting account (If installing manually)

In this documentation we will tell you how to set up all aspects of your Modena theme, we will assume you have a knowledge of how to perform basic tasks in Concrete5 like placing your site in edit mode, adding blocks, and applying custom templates, if you need to brush up on using the Concrete5 CMS please familiarize yourself with the official editors documentation over at Concrete5.org: https://documentation.concrete5.org/editors

Suggested install configuration

When installing the Concrete5 CMS you are presented with the option to install an Empty Site or install a Full Site we strongly recommend installing your version of Concrete5 with its demo data. The Full Site option coupled with the Modena demo data will provide you with a set of blog and portfolio pages, along with numerous important page attributes, which are ready to use. The empty site will be devoid of these options which will have to be manually created within Concrete5. The Empty Site option is intended for expert Concrete5 users/developers, who may be creating a custom application using Concpan.

Instal setup suggestion

Install (Concrete5 marketplace)

Installing Modena through your Concrete5 dashboard

Once you have purchased the Modena theme form Concrete5 please follow the steps below to install your new theme.

First log in to your website and go to Dashboard > Extend Concrete5 if you have not done so already connect your site to the Concrete5 community by clicking the large blue Connect to Community button, you should see the screen below.

Connect to community screen

Fill in your Concrete5 log in details, remember these are the details that you use to log into the concrete5.org website account NOT the log in details for your website.

Once you have connected your site you should see the screen below. Click on the link Visit your Project Page here you can assign the Modena theme license you purchased to your website.

Connect success

Once on your project page, you should see a drop down box under the heading Add Item to this Project click the box and from the dropdown select your Modena license, then click the Associate button next to it, your Modena theme license is now associated to your site and will be available for install.

Project page

Once you have associated your license return to your site and go to Dashboard > Extend Concrete5 your new theme should be there under Awaiting Installation click the Install button and follow the onscreen prompts.

Install (Theme Forest)

Prior to installing...

Your theme is contained in a zipped folder, which will need to be unzipped before uploading to your Concrete5 installation.

Manual install

The unzipped folder will need to be uploaded to the root level packages directory in your Concrete5 install. You will need to access your Concrete5 install via FTP on your hosting account.

Instal directory

Once you have uploaded the unzipped theme to the packages folder, you can then log in to your Concrete5 site, and install the theme.

Once you have logged in, click on the dashboard button on your Concrete5 edit bar, as pictured below.

Dashboard button

Your Concrete5 dashboard will now appear, click on Extend Concrete5, as pictured below.

Extend menu

Click on the Install button next to the Modena theme.

Install button

You will now be able to select what type of install you would like to perform, you can opt to install the demo data or not. Installing demo data will wipe the contents of your site and install a basic Modena themed website with a selection of pages, a portfolio, and a blog, we highly recommend this option as you can hit the ground running, most common blocks are present and already have their custom templates applied. If you have content already on your site that you wish to keep then you should install without demo data.

after you have selected which option suits you best, click on the Install Modena Theme button at the bottom of the page, if you have opted to install the demo data, installation may take a while, this is normal, please do not refresh the page during installation.

Demo data

If you chose to install the demo data your theme should now be active and ready to use. If you chose to install without demo data you will need to activate your theme, from the concrete5 dashboard click on Pages & Themes

Dashboard pages and themes

On the Pages & Themes page you should now see your installed theme, along with any other themes you have installed. Click on the Activate button next to the Modena theme, you will be asked to confirm if you would like the theme applied to your entire site, click Ok

Activate screen

You will then see a screen informing you that your theme and its associated pages are activated and ready for use.

Active screen

Navigation

The navigation in Modena is controlled by one of 2 custom templates, Main Nav or Main Nav Placeholders. Main Nav will display a navigation bar with its dropdown menus, and will let you click on parent links and visit the parent page.

Main Nav Placeholders will display a navigation bar, where the parent links will be set as placeholders, this means the parent page link will not link to another page, but will simply be a heading for the dropdown sub menus.

If you have installed the demo data, Main Nav Placeholders will be already installed, if you wish to change it, follow the steps below.

To set your navigation place your site in edit mode by clicking the edit mode button in the Concrete5 editing bar (Pen icon)

Edit bar

Once your site is in edit mode click on your navigation bar, and from the menu select Design & Custom Template

Custom templates

From the context menu bar that appears click on the cog icon, under the heading "Custom Template" click on the dropdown menu, here you can select from Main Nav or Main Nav Placeholders once you have selected which template you wish to use, click on the blue save button on the context menu.

Custom template menu

Layouts

Creating layouts in Concrete5 is simple, unlike many other CMS Concrete5 has a native way of building layouts, its part of the CMS and does not require any special blocks or plugins.

To create a layout first place your site in edit mode, by clicking the pen icon on the concrete5 edit bar.

Edit bar

Once your site is in edit mode editable areas on your page will appear, with a grey outline, and a name, for example Empty Main Area when you hover these areas with your mouse the outline will change to green or blue, green is a regular area appearing only on that page, a blue outline denotes a global area, whatever content is placed in a global area will appear on all pages that feature that global area.

Area

Click on an empty area, then from the context menu click on Add Layout

Add layout

You will now see the layout builder, as shown below.

Layout builder

To alter the amount of columns you can use the up and down arrows next to the Columns heading.

Grid columns

Once you have selected the amount of columns you wish to use, you can alter the column sizing by using the adjustment handles on top of the columns as shown below, this way you can create layouts beyond that of equal columns.

Column editing handles

Along side manually setting columns you can also choose from a number of presets we have built for you, by clicking on the arrow next to the name of the grid system, you will see all the preset options available to you.

Presets menu

To use one of the presets simply click on the preset you wish to use and it will be applied to the layout builder, once you are happy with your layout click on the blue Add Layout button.

Presets menu

Once you have clicked Add Layout your layout will now appear as editable areas ready to take the blocks of your choosing.

Ready to use areas

Advanced layout tips - Full width backgrounds

You will notice that some areas in the demo site have background colors that stretch the full width of the site. These areas are easy to implement.

First place your site in edit mode, then click on an area tab as shown below.

Full width bg

When you click on the tab a context menu will appear, from the menu click on Edit Layout Design

Layout design

From the new menu that appears click on the image icon, as shown below.

Background menu

From the background menu you can now click on the color menu, and choose or input a color of your choice.

Select color

Once you have chosen your color, click on the Choose button, then click on the blue Save button on the context menu.

Choose a color

After you click save, you will see your background color on screen.

Colored background

You will notice on the above screen shot that we have added padding to the top and bottom of the area, to do this simply repeat the above process to get to the context menu, and click on the Margin and Padding icon as shown below.

Padding menu

From the padding and margins menu you can now drag the handles to adjust the padding and/or margins to your desired levels. In this example we have used padding which will force the background color to expand with it as padding is applied to the inside of an element, margins are applied to the outside of the element and will not affect the background color.

Once you are happy with your spacing, click on the blue Save button.

Padding menu

Advanced layout tips - Full width blocks

You will see on the demo site home-page that some blocks span the whole width of the site, setting blocks up in this way is a simple task. First add a 1 column layout, this will give you one large column that spans 1240px (Unless the default site width has been changed in the settings) then add your block to this area, adding blocks is covered in a separate section. In this example we will use the Page List block to display our recent portfolio posts. Once set up your area will look something like the image below.

Page list block layout

While still in edit mode click on the block you have just added, a context menu will appear, as pictured below. Click on Design & Custom Template

Design menu

From the new menu that appears click on the cog icon, as pictured below.

Cog icon

From the advanced menu click on default setting under the heading Block container class

Container class

From the dropdown select Disable Grid Container then press the blue Save button on the context menu.

Disable grid container

Your block will now populate the whole width of the screen.

Media Queries

Modena features the ability to hide content depending on what size screen is being displayed. You can use the classes listed below to show and hide certain blocks or layouts on desktop, tablets, and phones.

Class Effect
hide-desktop Hides a block or layout on desktop screen sizes (64em and above)
hide-large Hides a block or layout on large screen sizes (between 48em and 64em)
hide-medium Hides a block or layout on medium screen sizes (between 34em and 48em)
hide-small Hides a block or layout on small screen sizes (between 25em and 34em)
hide-xsmall Hides a block or layout on extra small screen sizes (between 0em and 34em)

Hiding a block or layout based on screen size

To set a block or layout to hide on a certain screen size, first place your site in edit mode, then click on the layout/block you wish to hide, from the context menu click on Design & Custom Template

From the menu bar that appears click on the Cog icon

From the menu that appears type in the name of the class you wish to use in the Custom Class section, for example, type in hide-desktop if you wish to hide a block on desktop/laptop computers. Once you have typed in the text make sure you hit the enter key on your keyboard to enter the class, when you have finished adding classes, click the blue Save button on the menu bar, then publish/save your page as usual.

Blocks

In Concrete5 content and functionality is added via blocks, there are many default blocks available. Modena comes with its own set of blocks to give you some more advance functionality, rather than tell you how to add/set up each individual block we will cover how to add blocks in general. Some blocks with more complex set ups are covered in the setting up your homepage section.

To begin with you will need to add a layout to give your block a position on your page, layouts are covered in the layouts section if you are not familiar with the Concrete5 layout builder it is best to read that section first.

Once you have set up your layout click on an area of your layout and click on Add Block as shown below.

Add block

On the left side of your screen the blocks panel will appear, simply click on the block you wish to use. The Modena blocks are shown below, but you can use any of the default Concrete5 blocks too.

Blocks panel

Once you have clicked on the block you wish to use, the blocks options panel will open, configuring your block is a simple case of working through the form fields, in the example below we have used the pricing table columns, as you can see there are a number of options allowing you to tailor the block to your desired result.

Block menu

When you have finished configuring your block, click on the Add button to add your block to the page, if you wish to edit your block once it has been added, simply place your site in edit mode, click on the block, and you will be able to alter any of the options you previously set.

Home-page setup

If you set up your site without using the demo date import, you will need to set up your home page manually, in this section of the guide we will cover all aspects of setting up your home page to replicate the demo site homepage.

Setting the home-page template

Modena has a specific home-page template that should be used on the front page of your site, first navigate to your home page, and then click on the Page Design, Location, Attributes and Settings button on your edit bar, the cog icon pictured below.

Page template menu

The Page Settings panel should now appear, from the panel click on design.

Page settings

This will open the Page Template and Theme Customisation panel. Click on the Expand label under the page template list, this will show you a list of all available page templates, click on the Home template, and then click on the green Save Changes button in the bottom right of the screen.

Home template

Adding your own logo

Modena lets you add your own logo as an image or as text, to add your logo first place your site in edit mode by clicking the pen icon on your Concrete5 edit bar, next find the area that says Sitewide Header it should be located in the top left of your site.

Logo location

Click on the Sitewide Header area, and from the context menu click on Edit block you should now be able to edit the content of your header using the Concrete5 editor.

Header editor

If there is already an image in your header that you wish to change simply double click the image in the editor and the Image Properties window will open, here you can click on Browse Server to select your new image from the media library.

Browse server

If there is no image and you wish to add one, click on the Image button in the editor to be taken straight to the Image Properties screen.

Image button

When using the fixed position header we recommend creating your logo the height of the header before it is scrolled, by default this is 100px high. You should then place your logo in the center left of the image, which should be a transparent .png image file, an example can be seen below. If your logo is large and you need more space in your header you can adjust the header size before and after scroll, in the theme options header settings, this is covered in the theme options docs.

Logo example

You can set your header logo to be a link to your home-page, to do this click on the image in the editor to select it, and click on the link icon in the editor as shown below.

Link

The link options panel will appear, click on the sitemap button and select your home page, once you have selected your homepage click on Ok. As your header is a global area, all instances of your header will link back to your home-page.

Link settings

Adding the hero unit

The front page of Modena features a large hero unit with animated captions and button, this is a custom block that comes pre packaged with Modena.

First place your site in edit mode, then locate the area Empty Hero Unit Area click on this area and then click on Add Block from the context menu.

Hero unit location

The blocks menu will now appear, scroll down to the section that contains the Modena blocks, and click on the Hero Unit block.

Hero unit block

The Hero Unit options panel will now appear, all the sections are self explanatory, fill them in with your desired content. When adding your hero unit background image we suggest using an image with the dimensions of 1200px by 800px, we find this gives a good combination of image quality, and size for page load speed

Hero unit panel

Icon box area

The next section down on your home-page is the "You'll love working with us" area, first add a 3 column layout under the hero unit block, do this by clicking on the grey Hero Unit or Main tab, and from the context menu click on Add Layout.

Icon boxes

Click on the first column and click Add Block you can now click on the Content block to add simple text content to the area, in the demo site we have used a Heading 5 to add the "you'll love working with us" slogan.

Content block

Once you have added your content via the editor click on the blue Save button on the editor toolbar.

Editor window

To add icon boxes click on the next column along in your 3 column layout, and click on Add Block go down to the Modena blocks section and click on Icon Box.

Icon Box

The icon box options panel should now open, fill in the details to your preference, on the demo site we have used left aligned icon boxes.

Icon box panel

Offscreen hero unit section

Modena comes complete with an animated offscreen hero unit, to use this block first add a 1 column layout under the icon box area, then click on your newly added area, from the context menu, click on add block.

From the blocks panel scroll down to the Modena blocks section, and click on the Offscreen Hero Unit block.

Offscreen hero unit

When choosing an image remember that some of the image will be hidden offscreen, we used images 1425px by 700px for the demo sites offscreen hero unit.

Offscreen panel

We have used 2 of the offscreen hero unit blocks one on top of the other with images aligned at the opposite sides.

Adding a portfolio feed

Modena comes with a a set of custom templates to turn the Topic List block and the Page List block into an ajax powered sortable portfolio.

First we will need to add a Topic List block, this is the block that will give us our topics or categories from which we can filter the page list block.

Create a new layout under the offscreen hero unit blocks you added in the previous section, this can be a 1 Column layout. Click on the newly added layout and click on Add Block from the block list click on Topic List block under the navigation heading.

Topic block

Set up the topic list as follows, Mode should be set to "Search – Display a list of all topics for use on a search sidebar." Topic Tree should be set to "Projects". Post Results to a Different Page and Title should be left blank. Once you have completed the settings click on the Add button.

Topic list

You will now see the default topic list block on your page, it should look something like the picture below.

Plain list

To get the sorting functionality, and to make the styling of the list match your site, you will need to add a custom template, to do this, click on the Topic List block you just added, from the context menu click on Design & Custom Template

Topic list custom template

From the new context menu that appears click on the cog icon.

Cog menu

From the advanced menu that appears click on the dropdown under the Custom Template heading, from the select box click on Modena Filters then click the blue Save button.

Modena Filters

Your filters will now have the correct styling and functionality. The position of the filters in their area is controlled by an option in the portfolio theme options, you can set it to be left, right or center aligned. To change the names of your topics you will need to go to Dashboard > Systems & Settings > Attributes > Topics from here you can add/edit topic names.

Finished filters

Now we have our filter list we need to add some content to sort and filter, this is done by adding the Page List block, to begin with add a 1 Column layout under the topic list block you just added, next click on the newly added area, and click on Add Block from the context menu, from the block panel select the Page List block from the Navigation section.

Page List

The page list block is one of the most powerful, and useful blocks Concrete5 has, enabling you to create portfolio, news, and blog feeds easily. To set up your portfolio feed like the demo site, set the options as follows: Number of pages to display 6. Page type Portfolio Project. Topics No topic filtering. Filter by Public Date Show All. Other Filters Leave blank. Pagination Leave unchecked. Location Everywhere. Sort Most recent first. Provide RSS No. Include Page Name Yes. Include Page Description No. Include Public Page Date No. Display Thumbnail Image Yes. Use Different Link than Page Name No. When you have completed these settings, click on the blue Save button. You will have something that looks like the picture below.

Page list no template

Now we have our basic page list we need to add a custom template like we did with the topic block, repeat the steps to add a custom template, click on the Page List block you just added, then click on Design & Custom Template then click the cog icon to bring up the advanced menu, under the custom template heading, click the dropdown and then click Modena Portfolio No Margins. If you wish for the portfolio to span the entire page like the demo site, while you are in this menu click the dropdown under the Block Container Class heading, and choose Disable Grid Container when you are done click on the blue Save button. You will now have a working portfolio section, clicking on any of the topic list filters will filter to a portfolio page that has the same topic.

To learn more about topics and adding them to your portfolio pages, please visit the official Concrete5 editor docs

Page list finished

Team members area

The next area down on our home-page is the "Meet the team" section, this section can be used to introduce your team to the world.

First under the page list area you created previously, add a 3 column layout, click on the first column, and then click on Add Block from the block panel, scroll down to the Modena section and click on the Team Profiles block.

Team block

The team profiles options panel will appear, fill in the details of your team member and then repeat the process for your next 2 columns in the area.

Team block

Testimonial slider

The next section on the home-page is for displaying your client testimonials, first create a 1 column layout under the team member area you created previously. On the demo site we have given this area its own background color, you can find out how to do this in the layouts section

Once this area has been created, click on it, and then from the context menu click on Add Block from the block panel, scroll down to the Modena section and click on Testimonial Slider

Testimonial slider block

The testimonial slider options panel will now open, to begin adding your client testimonials click on Add Testimonial

Testimonial panel

Once you have filled in the details for your first testimonial, click on Add Testimonial again to add your next client testimonial, keep adding your testimonials until you are complete, then click the blue Add button.

Your testimonial slider will be added to your page, but will remain deactivated until you publish your page.

Setting up site search

Setting up site search with no demo data installed

To begin with we will set up a page where your search results will be displayed, to do this click on the Add Pages and Navigate Your Site button on the Concrete5 ediit bar.

Pages button

From the New Page menu click on Empty Page, you will now be taken to the page you have just created which will be blank, you can add a page banner and title etc by using the page attributes, please see the page attribute section for details.

When you have the look of your page how you want it, click on the area Empty Main Area and from the context menu click on Add Layout here you can add an area, we have used a 1 column area. Next click on the area you have just added and click on Add Block

Add search block

From the blocks panel click on Search under the Forms heading.

Search block

Once you have clicked search you should now see the Add Search panel, fill in the details as follows: Title Leave blank. Button Text Add something like "Search" or "Submit". Search for Pages Everywhere. Results Page Post results to this page. Then click on the blue Add button, you should see the stock standard Concrete5 search bar.

We now need to add a custom template to make this search bar blend with our site, click on the search bar you have just added and from the context menu click on Design & Custom Template from the new menu that appears click on the Custom CSS Classes, Block Name, Custom Templates and Reset Styles (Cog icon), the advanced menu will now appear, under the heading Custom Template click on the dropdown and select Modena Search Results then click the blue Save button.

Results template

You should now have a search bar that looks like the picture below.

Search bar finished

Once you have your search bar in place, and the look of your page finalized we can finish configuring our search results page, first click on the Edit Page button on your Concrete5 edit bar, which should have a green background.

Publish button

You will now see the Publish Page panel, click on the blue link that says Page Compose Interface

Publish panel

from the composer interface give your page a name, we have used "search results" fill in the description as you see fit, click on the large blue choose a page button, and click on the Home link, this will place your search results page as a sub page of your home page. You can now click the blue Publish Page button at the bottom of the page.

Composer button

You will notice that your search results page is now in your main navigation, which is not what we want, this pages sole purpose is to display search results, so we dont want it in our main nav bar.

To remove the search results page from our nav we can use a dedicated Concrete5 page attribute called Exclude from Nav to use this, first navigate to your search results page, once you are on the page click on the Composer, Page Design, Location, Attributes and Settings button on your Concrete5 edit bar (Cog icon).

Custom attributes

From the Page Settings panel click on Attributes

Attributes menu

On the attributes panel click on Exclude from Nav the exclude from nav checkbox will appear on the right side of your page, check the checkbox and click on the green Save Changes button.

Exclude from nav

Your page will now be removed from your main navigation when you publish your page. The page still exists, but it does not show in the main navigation bar, exactly what we want.

Now we have somewhere to display our search results we can set up our header search bar. First place your site in edit mode, then click the search icon next to your site navigation.

Empty search

Now click on the area Empty Sitewide Search Area from the context menu click on Add Block and from the blocks panel click on search, under the forms heading.

Search block

The Add Search panel will now appear, fill out the details as follows: Title Leave blank. Button Text Leave blank. Search for Pages Everywhere. Results Page Post results to another page. Click on the large blue Choose a Page button, and from the sitemap click on the "Search results" page you created in the previous section of this guide.

Header search

You can now click the blue Add button, you should now see a standard Concrete5 search bar on your site. It will look very basic and very ugly, lets remedy that. First click on the search bar you just added and click on Design & Custom Template

Header search template

Now from the menu bar that appears click on Custom CSS Classes, Block Name, Custom Templates and Reset Styles (Cog icon), then from the dropdown under the heading Custom Template click on Modena Header Search then click the blue Save button.

Header template

This custom template has 2 purposes, by default Concrete5 search bars show search results directly underneath their search bar, this template does not, it allows you to show your results on a seperate page which is much more desirable. The second thing this template does is provide a more cosmetically appealing search bar styled to suit the theme.

Finished search

You can now publish your page by clicking the pen icon on your Concrete5 edit bar, which will have a green background, and then by clicking the blue Publish Changes button.

Publish button

You can now test your search facility, click on the search icon next to your navigation bar, then type a search term in the dropdown search bar, and hit enter, you should now be taken to your search results page with a list of results for your query.

Results

Setting up site search with demo data installed

If you installed the demo data with your theme, all you will need to configure is the search results page.

To begin place your site in edit mode by clicking the Edit this page button on the concrete5 edit bar (Pen icon).

Edit bar

Then click on the search icon at the end of your navigation bar, your search bar will now drop into view.

Search icon

Click on your search bar and from the context menu choose Edit Block

Edit search

The Edit Search panel will now appear, scroll down to the heading Results Page and check Post results to another page the choose a page button will now appear.

Choose page

Click on Choose a page and you will be taken to the sitemap, from the site map click on the page Search results.

Search results select

You will now be taken back to the Edit Search panel, click on the blue Save button to save your settings.

You can now publish your page by clicking the pen icon on your Concrete5 edit bar, which will have a green background, and then by clicking the blue Publish Changes button.

Publish button

You can now test your search facility, click on the search icon next to your navigation bar, then type a search term in the dropdown search bar, and hit enter, you should now be taken to your search results page with a list of results for your query.

Results

Theme options

Modena comes with a selection of options to customize your site with.

To access theme options, first click on the dashboard button on your Concrete5 edit bar.

Dashboard button

Your Concrete5 dashboard panel will now appear, click on the heading Modena Theme Options

Theme options

All the Modena theme options will now be revealed, the default settings page is the Site Settings which covers some general options you may wish to adjust. All settings come with a brief explanation of what they do. When adjusting settings please remember to click the green Save Settings button before navigating away from the page.

Settings page

Page attributes

Page attributes give you the option to change certain things about a specific page, the setting of page attributes will only appear on that particular page and wont show site wide. Modena comes with its own set of page attributes for you to use.

To access page attributes first make sure you are on the page you wish to alter, as page attributes are specific to the page they are set on. First click on the Page Design, Location, Attributes and Settings button (Cog icon) on your concrete5 edit bar,

Page template menu

Next from the Page Settings panel, click on Attributes

Attributes menu

Your view will now change to the page attributes screen, page attributes come under the headings of SEO, Navigation and Indexing, Jobs, Blog, Portfolio, and Other, Modena's attributes come under the Other heading. Below you will find a description of what each of Modena's page attributes do.

Attribute name What it does
Page Banner Places an image at the head of the page behind the navigation and logo area. In the demo site we use an image 1200px by 600px.
Disable Sub Page Name By default sub pages will display the name the page has been given for example "About us", on the page banner, this option will disable the page name.
Disable Page Footer Margin By default pages get a margin after the last piece of content and before the footer begins, on occasion you may wish to have content meet the footer, use this option to remove the margin.
Sub Page Heading Description This option lets you add a brief description about the content of the page, underneath the sub page name, this can be used as a sub-heading or tagline for the page.
Disable Sub Heading Hash Tag This option lets you remove the hash tag that sits in front of the sub page heading description.

Using page attributes

Once you have identified a page attribute you wish to use, click on that attribute, it will highlight with a blue background.

Attribute template

The attribute will now appear on the right side of the screen ready for you to use, as shown below. fill in the page attribute as required and then click the green Save Changes button.

Attribute page

Using custom editor styles

The content editor within Concrete5 gives you the option to add custom styles to certain elements, some of these styles are dependant on what element you are using in the editor, for example, a custom style for a heading tag, will only show in the editor when a heading tag is highlighted, trying to attach it to a paragraph tag would not work.

The custom style drop down can be located on the editor toolbar.

Styles button in editor

To apply an editor style, highlight a piece of text with your mouse, and then click on the Styles dropdown in the editor. A list of items will appear if the element you are using supports a custom style. In the image below you can see we have highlighted the words "This is a heading" and clicked on the styles dropdown, from that dropdown you can see we have a selection of colored underlines that we can apply to our heading.

Text highlighted in editor

Some items in the editor are not turned on by default, for example block quotes. To turn on these items you will need to access the dashboard, go to the following location to see all available options Dashboard > Systems & Settings > Basics - Rich Text Editor

Customizer

Concrete5 comes with a powerful way to alter the look and feel of your site in the form of the customizer. The customizer can be used to alter the color scheme of your theme to suit your own branding.

To use the customizer first click on the Page Design, Location, Attributes and Settings (cog icon) on your Concrete5 edit bar.

Page template menu

Then from the Page Settings panel, click on Design.

Design menu

From the Design menu click on Customize.

Customise button

After clicking on the customize button, the customizer panel will open, here you can alter the color scheme of any part of your site, each part of your site has its own section, for example Header and Footer. You can also customise the look of all the blocks that come packaged with Modena.

Customiser window

Troubleshooting

We hope your experience of using Concrete5 and Modena will be a smooth one, but occasionally some things dont go according to plan, below are some of the more common hiccups that occur.

I am loading the theme with its demo data but my server times out before it completes

There is a lot of data being loaded and sometimes the server has a short execution timeout placed on it by your host, if you have access to your php.ini file increase your max_execution_time if you do not have access to php.ini contact your host who should be able to do it for you.

I am loading the theme with demo data but I get an error before it completes

An error at this stage of installation usually means that something in the demo data is trying to match up to something that is missing on your site. When you first install Concrete5 it is recommended to install the Concrete5 demo data, this way all pages such as the blog and portfolio pages, and things like topic trees are added in for you, on an empty install these things wont be there, and may cause issues when loading themes that come with demo data.

I have loaded the demo data and some areas are not full width like the demo site

Unfortunately Concrete5 import/export format does not currently import/export custom alterations to layouts, however this is easily changed and covered in detail in the section Advanced layout tips - Full width blocks.

The demo data is not an exact copy of the demo site

This is intentional, most users will not need all the pages that are present on the demo site, as they are just there to showcase individual blocks, the demo data is designed to give you a small site that you can add to, rather than having to delete dozens of pages you will never use. The demo data comes with a full copy of the home-page, about us page, portfolio page (with demo posts), blog (with demo posts), and a contact us page.

My search facility does not work

The Concrete5 search facility does need some manual configuration, even if you have installed demo data, please see the Setting up site search section for full details.

Updating your theme manually

When a new update to your theme is issued, please complete the following steps to install it.

First download the updated theme and unzip the file. The unzipped folder will need to be uploaded to the root level packages directory in your Concrete5 install. You will need to access your Concrete5 install via FTP on your hosting account.

Instal directory

When you upload the theme your FTP software will warn you that a file with the same name already exists, confirm that you wish to overwrite the existing files.

FTP Update message

Once you have uploaded your updated theme to the packages directory, log into your Concrete5 install and click on the Dashboard button, and click on Extend concrete5 The Add functionality page should now be telling you that you have an update to install.

Update message

Click on the Update Add-Ons button, and on the following screen confirm that you wish to update to the latest version by clicking Update Add-On

Update details

After a short while your theme should now update to the latest version.