Contents

Installation

Concrete5 Installation

You will need to have concrete5 already installed on your server. If you have not installed concrete5 yet, go to the concrete5 website for instructions: https://www.concrete5.org/ .

Install Seren Theme

When concrete5 is installed on your server, download the "Seren" package, unzip and place into the "packages" directory in the root of your concrete5 installation.

Log into your website and go to Dashboard (top right of menu) and choose "Extend Concrete5". You will see the Seren theme thumbnail on the left. Click "Install".

Activate Seren Theme

Go to the Dashboard (top right icon in menu) choose "Pages and Themes ", then click on "Themes". Click on "Activate" next to the Seren theme thumbnail. Click "OK" to apply the theme to every page on your website.  If you click the top left arrow in the menu, you will go to your home page.

Please note that the sample content provided with concrete5 full site installations is styled by the Elemental theme, so you may notice that some content does not look the same when you apply the Seren theme.

Back to top

Top Menu

Add the Top Navigation (Menu)

*Please note – For this theme, you must use the "Header Nav Area" for your menu.

1. Add the autonav block. Firstly, you will need to add an autonav block to create navigation (a menu) for your website. Click on the pencil icon (top left of menu) to go into edit mode and then click on the plus icon to add a block. On the left hand side, choose the "Auto-Nav" block and drag it onto the "Header Nav Area". Choose the appropriate settings (for our demo, we chose to "display all" under sibling pages and page levels). Click "Add".

2. Apply a custom template. To make the menu look nice, you will need to apply a custom template. Click on the newly created menu and choose "Design and Custom Template". Then choose the gear icon and select "Seren" and click "Save". Click on the pencil icon and choose "Publish Changes". Your menu should be showing styles as they appear in our demo.

Instructions for adding an autonav block can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/auto-nav/

About the Top Menu

The top navigation menu is a "fixed" menu, which means that it sticks to the top of the page when the user scrolls down the page, thus enabling the user to always be able to easily access the navigation. When the menu is viewed on a smaller device, such as a mobile, a collapsible menu will show.

One thing to bear in mind with this menu is that if you have any subpages below a page, the top page will show a dropdown arrow to navigate to the subpages. If you have subpages, the top menu page will be a placeholder only, not a page that users can navigate to. For example, if you had a top menu item called "Products" with subpages "Product A" and "Product B", the user would see "Products" with an arrow next to it in the top menu. When the user clicked on the arrow, a submenu would show. They could navigate to "Product A" and "Product B" but NOT the "Products" page, as this is just a placeholder page. You will see later on in the Blog and Portfolio sections that we can exclude subpages from navigation so that the user can navigate to the top menu page.

Logo

*Please note – For this theme, you must use the "Sitewide Logo Area" for your logo.

By default, the logo will be populated by your concrete5 site name; however; if you wish to change the text you can go into edit mode and click "Empty Sitewide Logo Area", then click on the add icon (plus symbol) at the top left of the menu and drag a "Content" block to the area. Type in the text you wish to use. Or, if you want to add a logo as an image, click on the edit icon, then click the add icon, choose the "Image" block and drag it to the area "Empty Sitewide Logo Area". You do not need to select a link as your logo will automatically link to your home page. Your image should be at least 60px in height. In the demo we use an image sized 176 px width by 100 px height.

Instructions to add an image block can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/image/

Instructions to add a content block can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/content/

Masthead Left Area

You can add whatever content you want here. Perhaps you might want to use this area to add social icons, telephone number, email address, company strapline etc. In our demo, we added a search block with a custom template.

*Please note, this area will not be visible in mobile view, so ensure this information is repeated somewhere if necessary. For example, you could add your telephone number to the footer areas, which will be visible in mobile view.

Below are instructions for adding a search block like the one in our demo.

Add a Search Block with a Custom Template to the Header Area

1. Add a search page. Go to the Dashboard and click on "Sitemap". Click on "Home" page and choose "Add Page". Click on the page and give it a name, e.g. "Search". Choose whichever page template you like and click on "Publish Page".

Instructions for adding pages can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/adding-pages/

2. If you do not want the search page to show in the top menu, exclude it from navigation. While still in the sitemap view, click on the search page that you have just created. You may need to click on the plus icon by "Home" to expand the menu and see the page. Click on "Attributes" choose "Exclude from Nav" on the left and tick the box by "Exclude from Nav" on the right. While you are in the attributes section, add a banner image to the page. To do this, you need to click on "Seren Banner Image" on the left and then on the right underneath "Seren Banner Image" click to choose an image (you will probably need to upload an image when you do this unless you already have uploaded one). Click "Save Changes".

3. Add a search block to the search page. This will be the "target" where the results will be posted to. Still in sitemap view, click on the search page that you have just created, and click "Visit". Click on the add icon (plus symbol) and choose "Search" block, drag it to whichever area you want. Add in the relevant details in the block form. Click on the pencil icon and choose "Publish Changes".

Instructions for adding a search block can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/search/

4. Add the search icon to the header area . On any page you can click on the pencil to go into edit mode. Click on the plus icon and drag a "Search" block from the left to the "Empty Sitewide Masthead Left Area". Leave the title and button text fields empty. We chose the "everywhere" option under "Search for Pages" and checked "Post Results to a Different Page" and chose the search page under this. Click "Save".

5. Apply a custom template. To make the search block look like our demo, you will need to apply a custom template. Click on the newly created search block and choose "Design and Custom Template". Then choose the gear icon and select "Seren Search" and click "Save". Click on the pencil icon and choose "Publish Changes". Your search block should look the same as our demo.

Masthead Right Area

You can add whatever content you want here. Perhaps you might want to use this area to add social icons, telephone number, email address, company strapline etc. In our demo, we added social icons and a phone number.

*Please note, this area will not be visible in mobile view, so ensure this information is repeated somewhere if necessary. For example, you could add your telephone number to the footer areas, which will be visible in mobile view.

Below are instructions for adding social icons and a phone number to the header as shown in our demo.

1. Add social icons block. From any page, click on the pencil icon (top left) to go into edit mode, then click the plus icon to add a block. Choose the "Social Links" block from the left and drag it onto the "Sitewide Masthead Right Area". Choose the appropriate settings (if you haven't added social links yet in the dashboard you will be prompted to do this first). Click "Add". Click on the pencil icon and choose "Publish Changes".

2. Add a phone number. From any page, click on the pencil icon (top left) to go into edit mode, then click the plus icon to add a block. Choose the "Content" block from the left and drag it under the social icons that you have just added in the "Sitewide Masthead Right Area". Add your telephone number in the textbox and click "Save". Click on the pencil icon and choose "Publish Changes".

Back to top

Banner

On every page that you add, you will need to include a banner image. The banner image can be the same, or different on every page. You can add a banner image from the page itself or in the Full Sitemap page of the Dashboard. The banner on our home page of the demo is 1920px by 1400px. You can have a shorter banner if you prefer, and you probably will want to have a shorter banner on pages that are not home pages. The banner image area will "stretch" to your content (e.g. you can add more text or spacing to make the banner image area larger).

Add Banner Image From a Page

To add a banner image from a page, go to the page and click on the gear icon at the top left of the menu. Click on "Attributes"; choose "Seren Banner Image" on the left. On the right, you will see under "Seren Banner Image" a box that says "Choose New File" click on this and select or upload the image that you wish to use (if you need to upload an image, click on the Upload Files link at the top right). Click "Save Changes". Click on Attributes on the left to exit the menu. Click on the pencil icon at the top left of the menu and select "Publish Changes".

Add Banner image from Full Sitemap

To add a banner image from the Full Sitemap page of the dashboard, click on the Dashboard icon and choose "Full Sitemap". Click on "Attributes"; choose "Seren Banner Image" on the left. On the right, you will see under "Seren Banner Image" a box that says "Choose New File" click on this and select or upload the image that you wish to use (if you need to upload an image, click on the Upload Files link at the top right). Click "Save Changes".

Add Banner Content

The banner area is the one area on all of the pages that has grids enabled. So you will need to add your layout to this area, or you can just add a "Content" block if you only want a one column layout.

Add a Layout to the Banner Content Area

Hover over the bottom left of the area in edit mode until you see the "Banner Content" text, click on this and then "Add Layout" and choose the layout that you want from the dropdown menu, e.g. 1 column for a full width column click "Add Layout". You should see an area now, e.g. "Empty Column 1 Area".

You can add whichever content you want to this area. For example, if you wanted to add text to the area, click on the plus icon and choose "Content" drag this to the "Empty Column 1 Area" and add your content, click "Save". Click on the pencil icon and choose "Publish Changes".

Add a Heading to the Banner Content Area

In our demo, we use the Banner Content Area for adding headings. You do not need to put your headings here, but if you want to, you can do this by dragging a "Content" block over to the area and typing in your heading, choose formatting and choose the heading level, e.g. Heading 1.

Or, by adding an "HTML" block and using the tags

<h1></h1> with your heading name, e.g. <h1>Portfolio</h1>

Add a Caption to the Banner Content Area

If you want to add a caption to the Banner Content Area with a dark transparent background, add the class "banner-caption" to your HTML if using an "HTML" block.

<p class="banner-caption"></p> with your text, e.g. <p class="banner-caption">some text here</p>

Or <h1 class="banner-caption"></h1> with your text, e.g. <h1 class="banner-caption">some text here</h1>

Alternatively, you can do this using custom classes with a Content block. Add a "Content" block to the area. Type in your text and choose the relevant formatting (e.g. colour of text, heading, etc.) then click on the magic wand symbol and choose "Banner Caption". Then click on "Save".

Click on the pencil icon and choose "Publish Changes".

Back to top

Customisation

If you would like to customise your theme, from any page click on the gear icon at the top left of the menu. Then click on "Design" and click on "Customize". You can customise the theme from here by choosing a Preset (Click on Expand to see the options), or you can change individual properties in the menu here. When you have made your changes, click "Save Changes" (bottom right of your page) and then you will be prompted if the changes are for this page only or the entire site. Then click on the pencil icon and choose "Publish Changes".

We have included the following colour themes:

Blue

Green

Orange

Pink

Purple (Default)

Red

Alternatively, it is quite simple if you wish to change a colour to use our defaults.less file that is located in the package here:

/themes/seren/css/presets/defaults.less

You will need to open this document in a text editor, such as Notepad or Dreamweaver and rename the file (e.g. custom.less) and then find the theme accent colours and replace them with your 6 digit Hex colour numbers. Please note that you will need to rename the less file and then also change the preset name in the less file (e.g. @preset-name: "Custom";)

In the defaults.less file, the theme accent colour is #705696 which you will need to replace with your theme accent colour (i.e. do a find and replace in the custom.less file). We also have darker versions of this theme colour in the file that you will need to replace.

Darker colours: #573D7D and #3D2363

More information on theme customisation is located here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/the-toolbar/page-edit-drop-down/design/

Back to top

Home Page

For the Home page, you can use any page template you like; however for the demo, we used the "Home" page template. Below are instructions for creating a home page similar to our demo.

Home Page Template Structure

The home page template has a more complicated structure than the other pages and can be shown best using a diagram.

diagram showing areas of home page description below

You will notice that some areas are labeled “Grid Enabled Area with Forced Container”. This means that these areas do not have a container element (one that puts the content centered in the middle of the page with left and right margins), but when you add a block, such as a Content block, will add in a container. As of Seren version 0.9.6 other areas of the pages already within a container are also grid enabled, so that you can add Bootstrap layouts without adding an additional container element. These additional areas are grid enabled without forced container. See here for more information:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-layout/ http://www.concrete5.org/documentation/developers/5.7/designing-for-concrete5/adding-grid-support-to-your-theme/enabling-grid-support-for-areas-and-layo/

How We Created the Home Page in our Demo

1. Select the page template. You can select a page template in two ways, either from the page itself or in Full Sitemap view.

While on the home page in edit mode, click on the gear icon at the top left of the menu. Click on "Design" then click "Expand" under Page Template and choose "Home". Click "Save Changes".

Or, to do it from the Full Sitemap, click on the Dashboard icon (top right of the menu) and click on "Sitemap". Click on "Home" page and choose "Design and Type". Choose the page template and click "Save".

2. Add a Banner Image. Follow the instructions under the heading "Banner" above to add a banner image.

3. Add Banner Text (optional). We added text to our banner, but of course, you can put what you like here. If you just want one column full width of text, you can just drag a "Content" block. This area is grid enabled with forced container, so if you are using HTML and want it to be in a container, you will need to add a layout. We added a one column layout by hovering over the area on the bottom left of the banner until an icon saying "Banner Content" became visible, then clicked on this and then selected "Add Layout" and chose the layout 1 column using the default Grid: Twitter Bootstrap and clicked "Add Layout". Then we added an HTML block by clicking on the plus symbol at the top left of the menu and dragging an "HTML" block to the editable area just created (e.g. Column 1 area). We added the following content in the HTML block:

<div class="row"><div class="col-md-8 col-md-offset-2 text-center"><div class="wow fadeInLeft" data-wow-duration="2s"> <p class="banner-caption" style="font-size: 36px;">A concrete5 5.7 theme featuring a menu with a scrolling transparency effect.

</p>

</div>

<div class="spacer-50"></div>

</div>

</div>

This may look a bit confusing to you, but if you want to use the styles in your website you can, or you can just use a Content block if you prefer to do formatting there.

To give a quick explanation of the HTML above, we have used the Bootstrap grid to create a row with a column with a bit of padding. For more information, see here:

http://getbootstrap.com/css/#grid

Then we added in a banner-caption class, which we have covered in more detail above in the section titled "Banner".

And lastly, we added an animation, which is covered in more detail below in the section titled "Animations".

4. Add content to the Main Area. This area is grid enabled with forced container, so you can either just drop a "Content" block into this area if you want a one column-layout and will only use the "Content" block. Or, you can add a layout. We added a layout (1 column) and then added some text in using the HTML block. You could use the "Content" block instead and apply formatting there, but we used HTML to have a bit more control over the row. To the newly created "Empty Column 1 Area" we dragged an HTML block over (click plus symbol, choose HTML) and added the below HTML:

<div class="row">

<div class="col-md-8 col-md-offset-2 text-center">

<div class="wow fadeInRight" data-wow-duration="3s">

<h1>Make something beautiful</h1>

<p class="lead seren-handwritten-font" style="color: #ccc;">Lorem ipsum dolor sit amet, vim alia suscipit pertinacia ea, pro at eloquentiam concludaturque. Error dicant reprimique id per, ad vide probo harum mel. Ad mei vivendo atomorum iracundia, eam te mazim putant, recteque conclusionemque ut pri. </p>

<hr class="seren-hr"/>

</div>

</div>

</div>

The HTML above has largely been explained in step 3 (above), with the exception of the <p class="lead seren-handwritten-font"></p> and <hr class="seren-hr"/> HTML tags. The <p class="lead"></p> tag is using a Bootstrap class to make the font a bit bigger than usual. The additional class "seren-handwritten-font" is available for you to use if you want to apply a handwritten style font to your text (if you want to use this using custom classes in the Content block editor, see the section titled "Custom Classes"). The <hr class="seren-hr"/> tag is used to add a horizontal rule with your theme colour and a smaller width than the default horizontal rule.

5. Add Content to the Side 2 and Main 2 areas. This area has a full width colour background and some padding. It is not grid enabled with forced container, so you do not need to add a layout here. The Main 2 area is a good area to add something like blog thumbnails, portfolio thumbnails, a gallery, a slideshow, maybe a video, etc. You can add whatever you want to these areas, but we added a Content block to the "Side 2" area and a page list block to the "Main 2" Area. In the Side 2 area, we added a content block and chose formatting for the text, then we added a button, which you can do in the content block or by using a Button block or by using HTML. See the section under "Buttons" for further instructions. We used an Extra Large sized Dark Transparent Button here. Then to the Main 2 area, we added a page list block and chose the custom template "Portfolio 4 Column". We chose not to select pagination and only to select 4 pages. More instructions are available under the "Add Portfolio" section, and of course, this won't make sense until you have added your Portfolio so come back to this later!

6. Add Content to the Main 3 Area. This area is grid enabled with forced container, so you should add a layout here, unless you just want to add a Content block with a one column layout.

We first added a one column layout and we added some text to this layout.

Then we added another two column layout area that we added a video and a list to. We added the video by clicking on the plus symbol and dragging a "YouTube Video" block to the editable area. This theme has responsive video support, so videos will resize to the width of the column that they are in. To add the list, we used some Font Awesome icons. We added this content in the HTML view of a Content block, or of course, you could add it using an HTML block. We added the following code:

<ul class="fa-ul lead">

<li><i class="fa-li fa fa-check"></i>Blog Page List Custom Templates</li>

<li><i class="fa-li fa fa-check"></i>Portfolio Page List Custom Templates</li>

</ul>

You can use this code for adding lists and substituting the text for your own text. You do not have to use the Font Awesome icon check mark, you can use another icon. Please see Font Awesome documentation for more examples and information:

http://fortawesome.github.io/Font-Awesome/examples/

Then we added a one column layout and to this we added a heading "Recent News" and then a Page list block with the custom template "Blog Grid". We chose not to select pagination and only to select 3 pages. More instructions are available under the "Add Blog" section, and of course, this won't make sense until you have added your Blog so come back to this later!

7. Add Content to the Side 4 and Main 4 areas. This area has a full width colour background and some padding. It is not grid enabled with forced container, so you do not need to add a layout here. The Main 4 area is a good area to add something like blog thumbnails, portfolio thumbnails, a gallery, a slideshow, maybe a video, etc. You can add whatever you want to these areas, but we added a Google Map block to the "Main 4" area and a Content block to the "Side 4" Area.

To add the Google Map, click on the plus icon and choose "Google Map" block and drag it to the "Main 4" area, then select the appropriate settings. We chose map width "100%" and height "400px".

To add the address as we did in the demo, you can add the below HTML in an HTML block or by using a Content block and adding this in the HTML view.

<h5>Telephone</h5>

<p><span class="glyphicon glyphicon-phone-alt"></span>

0800 000 000 FREE

</p>

<h5>Email</h5>

<p><span class="glyphicon glyphicon-envelope"></span>

<a href="mailto:youremail@whatever.com">youremail@whatever.com</a>

</p>

<h5>Our Address<br /></h5><p>1 Street</p>

<p>Bridgend, UK</p>

<p>CF31 1TT</p>

You will notice that we have included some Bootstrap glyphicon tags which look like this:

<span class="glyphicon glyphicon-phone-alt"></span>

You can find more examples and information about Bootstrap glyphicons here:

http://getbootstrap.com/components/#glyphicons

We then chose the appropriate formatting in the Content block editor, highlighting the text and choosing center alignment and black colour from the Content editor menu.

8. Add Content to the Main 5 Area. This area is grid enabled with forced container, so you should add a layout here, unless you just want to add a Content block with a one column layout. We added a one column Twitter Bootstrap layout. We then dragged an HTML block to the newly created column and added the following HTML:

<div class="wow fadeInLeft"><h4 class="text-center">What our clients say</h4>

<br>

<i class="fa fa-quote-left fa-3x pull-left"></i><p>Fantastic team to work with, couldn't imagine working with anyone better on this project. Lorem ipsum dolor sit amet, vitae atomorum sit cu, torquatos ullamcorper ut sed. Deserunt prodesset instructior ad eos, sit ad imperdiet referrentur.</p></div>

This code is using animation, please see under the section "Animation" for more information on using animation in this theme, if you wish to use it.

We also used a Font-Awesome icon here <i class="fa fa-quote-left fa-3x pull-left"></i> see the Font Awesome website for more examples and information:

http://fortawesome.github.io/Font-Awesome/examples/

Back to top

Footer

This theme has 4 global editable areas in the Footer: Top Footer 1, Top Footer 2, Top Footer 3 and Footer. These areas are NOT grid enabled with forced container, so you do not need to add layouts.

You can add whatever you like to these areas, but in our demo, we used it to put a copyright notice in the Footer area, and some links and address information in the Top Footer areas.

We first dragged a Content block to the "Footer" area and added some copyright information.

Then we dragged an Autonav block to the "Top Footer 1" area and chose the custom template "Seren Vertical Menu". Alternatively, you can choose the links that you want to add from a Content block, choosing the links icon, and add them this way.

Next, we dragged a Content block to the "Top Footer 2" area and added a heading level 5 and some text. Below this, we added a button which can be added using HTML, a Content block or by using the Seren Button block (please see under the section "Buttons" for more information). We used an Extra Small sized Dark Transparent button.

Then we added the following content to the "Top Footer 3" area using an HTML block:

<h5>Telephone</h5>

<p><span class="glyphicon glyphicon-phone-alt"></span>

0800 000 000 FREE

</p>

<h5>Email</h5>

<p><span class="glyphicon glyphicon-envelope"></span>

<a href="mailto:youremail@whatever.com">youremail@whatever.com</a>

</p>

<h5>Our Address<br /></h5><p>1 Street</p>

<p>Bridgend, UK</p>

<p>CF31 1TT</p>

You can use this format if you like and edit the relevant sections with your own address, email and phone number.

Lastly, remember to click on the pencil icon and choose "Publish Changes".

Back to top

CSS And LESS files

The styles for this theme are located in

/themes/seren/css/

The main LESS file is main.less and if you open this file up in a text editor such as Notepad or Dreamweaver, you will see that it imports other LESS files for different sections or features. The separate LESS files are located here:

/themes/seren/css/build/

The various LESS files are:

Accordion.less

Blog.less

Body.less

Buttons.less

Footer.less

Home.less

Miscellaneous.less

Portfolio.less

Topmenu.less

In addition, there are theme colour styles which are located here:

/themes/seren/css/presets/

If you want to dig into the LESS files, you will need to change styles in the appropriate file. Alternatively, you can customise the theme from the dashboard or add your own CSS to override styles.

Back to top

HTML Structure

This theme is built using Bootstrap. There are various responsive layouts available for you to choose from when you add a page from your concrete5 dashboard.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. You can find more information on the grid system here: http://getbootstrap.com/css/#grid

The top navigation bar is a "fixed" navigation bar, which means that it sticks to the top of the page when the user scrolls down the page, thus enabling the user to always be able to easily access the navigation. When the menu is viewed on a smaller device, such as a mobile, a collapsible menu will show.

The footer in this theme is a "sticky footer", which means that if you have a very short page with little content, the footer will stay at the bottom instead of moving up the page.

Back to top

Grid Enabled Areas and Adding Layouts

Some of the areas in the Seren’s page templates have “Grid Enabled Areas with Forced Containers”. For example, the banner content areas and some of the home page areas. This means that these areas do not have a container element (one that puts the content centered in the middle of the page with left and right margins), but when you add a block, such as a Content block, will add in a container. As of Seren version 0.9.6 other areas of the pages already within a container are also grid enabled, so that you can add Bootstrap layouts without adding an additional container element. These additional areas are grid enabled without forced container. See here for more information:
http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-layout/
http://www.concrete5.org/documentation/developers/5.7/designing-for-concrete5/adding-grid-support-to-your-theme/enabling-grid-support-for-areas-and-layo/

Back to top

Javascript Files

This theme is built using Bootstrap. The JS files for Bootstrap are located in /packages/seren/themes/seren/js/

Also in this folder are several other js files:

Hover.js – needed for the portfolio hover effect

Html5shiv.js – provides basic html5 styling for older browsers

ie10-viewport-bug-workaround.js – provides a fix for ie10

imagesloaded.pkgd.min.js – essential for the masonry effect when using the Blog Masonry custom template

jquery.backstretch.min.js – needed for the full width banner images

jquery.fitvids.js – used for responsive video display

masonry.pkgd.min.js - essential for the masonry effect when using the Blog Masonry custom template

Nav.js – essential for the scroll effect on the top menu.

Respond.min.js – needed for the responsiveness of the Bootstrap CSS

Retina.js – needed for serving high resolution images to retina displays

The javascript file for animations is located in /packages/Seren/themes/Seren/wow/js

Back to top

Page Templates

Below is a list of the different page templates available.

** Please note that all of the page templates with banner areas have a grid enabled with forced container area in the banner. In the other page templates, the only ones with grid enabled with forced container areas are the custom layout and home pages. With the custom layout page, you can add whichever layout you prefer.

Blog Entry – for adding blog posts (optional, you can use another page template if you prefer)

Custom Layout – has a grid enabled with forced container area to create your own layouts. See here for instructions on creating layouts http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-layout/

Full – one column layout

Home (optional, you can use another page template if you prefer)

Left Sidebar

Page Forbidden

Page Not Found

Portfolio Item – for adding portfolio project pages (optional, you can use another page template if you prefer)

Right Sidebar

Three Columns

Three Over Two – Three columns over two columns

Two Columns

Back to top

Blocks

Seren Button

If you would like to add a button using the Seren Button block, go into edit mode by clicking on the pencil icon. Click on the plus icon to add a block, scroll down and you will see on the left under "Seren" a block called "Seren Button". Click on "Seren Button" and drag it to the area that you wish to use it. Choose the appropriate settings for your button and click "Add". If you don't want to use the block, you can either use the classes below to add a button, or add a button via the content editor custom classes.

Add a button using HTML

The type of button can be chosen from the following styles:

btn-seren

btn-seren-transparent

btn-seren-light-transparent

btn-seren-dark-transparent

The sizes of button can be chosen from the following:

btn-xlg

btn-lg

btn-default

btn-sm

btn-xsm

If you want to add a block using HTML, you will need to add either an HTML block or a Content block to the editable area of your choice. If you use a Content block, you will need to select HTML view.

An example of use of a button is below:

http://thesite.com" class="btn btn-seren-light-transparent btn-xlg">Buy now

To see more about adding buttons, the Bootstrap documentation is here:

http://getbootstrap.com/css/#buttons

Add a button using custom classes

Add a Content block to the editable area where you want to add a button. Add the text for your button. Highlight the text and click on the link icon to insert a link. Then click on the magic wand icon to add the relevant custom class for your button.

Back to top

Bootstrap Accordion

Follow the instructions below to add an accordion using our "Bootstrap Accordion" block:

1. Enter edit mode by clicking on the pencil icon (top left of the menu).

2. Click on the plus icon (top left of the menu) to add a block, scroll down and you will see on the left under "Seren" a block called "Bootstrap Accordion". Click on "Bootstrap Accordion" and drag it to the area that you wish to use it.

3. Choose whether you want your first tab expanded or not. Click "Add Tab".

4. In the box on the left, enter the title of your tab (e.g. Question 1).

5. Click "Edit Content" and add whichever content you want for the first tab in the text editor window.

6. Click "Close Editor".

7. Click "Add Tab" again and repeat steps 4-6 to add another tab. Continue adding tabs until you are finished.

8. Click "Add".

9. Click on the pencil icon and choose "Publish Changes".

Back to top

Custom Templates

This theme has the following Custom Templates. To choose a custom template, when you have added the block, click on the block in edit mode choose "Design and custom template", click on the gear icon and choose whichever custom template you want. Click "save".

Autonav Block

1. Seren

This template is for the autonav block and is for use with the top menu of your theme.

2. Seren Vertical Menu

This template is for the autonav block and is for use when you want to add a vertical menu, for example in the footer.

Page List Block

1. Seren Blog Grid

This template is for the page list block and is meant to be used for creating a blog index page with a grid appearance.

2. Seren Blog Masonry

This template is for the page list block and is meant to be used for creating a blog index page with a tiled appearance.

3. Seren Portfolio Four Column

This template is for the page list block and is meant to be used for creating a portfolio (or other purpose, e.g. products or team) index page with a 4 column layout.

4. Seren Portfolio Three Column

This template is for the page list block and is meant to be used for creating a portfolio (or other purpose, e.g. products or team) index page with a 3 column layout.

5. Seren Portfolio Two Column

This template is for the page list block and is meant to be used for creating a portfolio (or other purpose, e.g. products or team) index page with a 2 column layout.

Search Block

1. Seren Search

This template is for use with the search block to create a toggle effect search as seen in the top menu of our demo.

Back to top

Page Attributes

This theme comes with two page attributes, Seren Banner Image and Seren Thumbnail.

Seren Banner Image

This attribute is the attribute that can be chosen to add a banner image to the top of a page. Further instructions for adding a banner image can be found under the section titled "Banner".

Seren Thumbnail

This attribute is for use with adding thumbnails for Portfolios and Blog index pages. Further instructions for use can be found under the sections titled "Add Blog" and "Add Portfolio".

Back to top

Custom Classes

You can choose custom classes from the text editor in the "Content" block for the following:

Buttons

Please see under the "Buttons" section for more information.

Banner Caption

Add a "Content" block to the banner area. Type in your text and choose the relevant formatting (e.g. colour of text, heading, etc.) then click on the magic wand symbol and choose "Banner Caption". Then click on "Save".

Handwritten Text and Bold Handwritten Text

Add a "Content" block to an area. Type in your text and choose the relevant formatting then click on the magic wand symbol and choose "Handwritten Text" or "Handwritten Text Bold". Then click on "Save". Please note that this style looks best with a larger font as smaller font sizes are not as legible.

You can choose this custom class from the Image form in the "Image" block:

Seren fade

This will add a fade effect to an image when the user hovers over it. It should be used when the image is linked to another page of your site or an external URL. Add an image using an Image block. Then in edit mode, click on the image that you have just added and select "Design and Custom Templates" choose the gear icon and select "seren-fade" and then click "Save".

Back to top

Helpful CSS Classes

Seren Handwritten Font

.seren-handwritten-font

Example: <p class="seren-handwritten-font"></p>

Usage: to use a handwritten style font

Seren Handwritten Bold Font

.seren-handwritten-font-bold

Example: <p class="seren-handwritten-font-bold"></p>

Usage: to use a bold handwritten style font

Seren Horizontal Rule

.seren-hr

Example: <hr class="seren-hr"></hr>

Usage: to use a theme coloured smaller width horizontal rule line.

Spacing

<div class="spacer-10"></div>

You can add different spacers with different amounts of padding, see below for options.

<div class="spacer-10"></div>

<div class="spacer-20"></div>

<div class="spacer-30"></div>

<div class="spacer-40"></div>

<div class="spacer-50"></div>

<div class="spacer-60"></div>

<div class="spacer-70"></div>

<div class="spacer-80"></div>

<div class="spacer-90"></div>

<div class="spacer-100"></div>

Usage: If you want to add some space in your website below or above something, you can use our spacer classes. You will need to add an HTML or Content block and add this HTML to add 10px of space.

Buttons

The type of button can be chosen from the following styles:

.btn-seren

.btn-seren-transparent

.btn-seren-light-transparent

.btn-seren-dark-transparent

The sizes of button can be chosen from the following:

.btn-xlg

.btn-lg

.btn-default

.btn-sm

.btn-xsm

Example:

http://thesite.com" class="btn btn-seren-light-transparent btn-xlg">Buy now

Usage: to add a button.

Seren Fade

.seren-fade

Example:

http://yourwebsite.com/index.php?cID=220"><img class="img-responsive seren-fade" src="/application/files/2114/2807/5303/yourimage.jpg" alt="link to your page">

Usage: This will add a fade effect to an image when the user hovers over it. It should be used when the image is linked to another page of your site or an external URL. The easiest way to use this class is by adding it via a custom class when you add an image using an Image block.

Back to top

Add Portfolio or Other Page List

The portfolio pages that we have showing on the demo use a block called "Page List". For more information about Page Lists, read here:

http://www.concrete5.org/documentation/editors-guide/in-page-editing/block-areas/add-block/page-list/

We have geared this towards creating a Portfolio, but you can use these directions and the Portfolio templates to create other page lists, for example a team, product or class page. The main thing is that you will get a page with a list of thumbnails and when you click on a thumbnail you will be directed to the page relating to the thumbnail.

1. Navigate to Full Sitemap in the Dashboard. Click on Dashboard icon on top right of menu and click "Sitemap".

2. Add Portfolio Index page. Click on "Home" if you would like the Portfolio Index page to be at the top level of the page or select another location. Select "Add page" and name it appropriately, e.g. Portfolio.

3. Add Portfolio Project Pages. Click on the page that you just created in Full Sitemap, e.g. "Portfolio" and add a page for the first project, e.g. "Project 1". After you click on "Portfolio" choose "Add Page" put a Page Name (e.g. Project 1), a very short description (e.g. Photography. This should ideally just be one word, as it is the text that is shown when the user hovers over the portfolio thumb image) and choose a page template. You may want to choose "Portfolio Item" as the page template; however, you can choose whichever template you want if you prefer a different layout. Click "Publish Page".

4. Add Attributes to Portfolio Project Pages. Still in Full Sitemap view, click on the page that you just created, e.g. "Project 1" and choose "Attributes". Select "Exclude from Nav" on the left and tick the checkbox on the right beside "Exclude from Nav". Then choose "Seren thumbnail" and click on "Choose New File" and select the image that you would like to use as a thumbnail for this page. ***This template works best for images that are approximately 700px width by 500 px height. The images should not be any smaller in width than 700px as they will not go full width in mobile view if they are smaller than this. All thumbnail images for your portfolio pages MUST be the same size or they layout will not look good. You will also need to choose a banner image here by clicking on "Seren Banner Image" and choosing an image. Click "Save Changes"

5. Navigate to the Portfolio Index Page. In Full Sitemap view, click on the Portfolio index page, e.g. "Portfolio". Click "visit" and you should be directed to your Portfolio index page.

6. Add a Page List block to the Portfolio Index Page. On the Portfolio page, click on the plus icon at the top left of the menu and drag a "Page List" block into the editable area, e.g. "Main". Choose your options for the page list here. Normally, you might change the number of pages to display (how many thumbnails you want to see on the page), and you will want to choose a number that is a multiple of the column layout you will use (Portfolios can have 2, 3 or 4 column layouts). For example, if you want a 3 column layout and 2 rows, then you would select 6 for pages to display. You might check pagination if you want to have that option. We would suggest you might want to select "beneath this page" for pages to display, unless you are going to have Portfolio project pages elsewhere on your site.

7. Apply a Custom Template to the Page List Block. After you have created the above page list, you need to apply a custom template to it. While still on the Portfolio Index page, click on the newly created page list and choose "Design and custom template", click on the gear icon and choose "Seren Portfolio Two Column", "Seren Portfolio Three Column" or "Seren Portfolio Four Column". Click "save".

8. At the top left of the menu click on the pencil icon and choose "Publish Changes".

As you add project pages in the future, their thumbnails will automatically be added to the Portfolio index page.

Back to top

Add Blog

The blog pages that we have showing on the demo use a block called "Page List". For more information about Page Lists, read here:

http://www.concrete5.org/documentation/editors-guide/in-page-editing/block-areas/add-block/page-list/

Follow the steps below to create a blog like one of the blog examples in our Demo. You will notice that there are two templates to choose from: Blog Grid and Blog Masonry. The steps are mainly the same for both, but the Blog Grid gives the blog a grid appearance, whereas the masonry gives the blog a tiled appearance.

1. Navigate to Full Sitemap in the Dashboard. Click on Dashboard icon on top right of menu and click "Sitemap".

2. Add Blog Index page. Click on "Home" if you would like the Blog Index page to be at the top level of the page or select another location. Select "Add page" and name it appropriately, e.g. Blog.

3. Add Blog Entry Pages. Click on the page that you just created in Full Sitemap, e.g. "Blog" and add a page for the first blog entry, e.g. "Post 1". After you click on "Blog" choose "Add Page" put a Page Name (e.g. Post 1), a description (this will be the description that shows underneath the post thumbnail on the main Blog page) and choose a page template. You may want to choose "Blog Entry" as the page template; however, you can choose whichever template you want if you prefer a different layout. Click "Publish Page".

*It is worth noting that you may wish to add a blog post page type and some defaults to your blog post pages. More information can be found here:

Page Types:

http://www.concrete5.org/documentation/using-concrete5-7/dashboard/pages-and-themes/page-types/

Defaults:

http://www.concrete5.org/documentation/using-concr...

4. Add Attributes to Blog Entry Pages. Still in Full Sitemap view, click on the page that you just created, e.g. "Post 1" and choose "Attributes". Select "Exclude from Nav" on the left and check the checkbox on the right beside "Exclude from Nav". Then choose "Seren thumbnail" and click on "Choose New File" and select the image that you would like to use as a thumbnail for this page. ***The Seren Blog Grid template works best for images that are approximately 600px width by 400 px height. All thumbnail images for your blog pages MUST be the same size if you are using the "Seren Blog Grid" template or the layout will not look good. For the "Seren Blog Masonry" custom template, you can use whichever sized images you like and it does look good to mix up tall and shorter images. You will also need to choose a banner image here by clicking on "Seren Banner Image" and choosing an image. Click "Save Changes"

5. Navigate to the Blog Index Page. In Full Sitemap view, click on the Blog index page, e.g. "Blog". Click "visit" and you should be directed to your Blog index page.

6. Add a Page List block to the Blog Index Page. On the Blog page, click on the plus icon at the top left of the menu and drag a "Page List" block into the editable area, e.g. "Main". Choose your options for the page list here. Normally, you might change the number of pages to display (how many thumbnails you want to see on the page), and you will want to choose a number that is a multiple of 3, as the Blog custom templates have a 3 column layout. For example, if you want 2 rows, then you would select 6 for pages to display. You might check pagination if you want to have that option. We would suggest you might want to select "beneath this page" for pages to display, unless you are going to have Blog post pages elsewhere on your site. If you want to add an RSS feed, select this option and add an RSS feed title, description and enter whatever link you want (just enter some text here, e.g. "newsfeed", this is not asking you for an existing page name, the block will create one).

7. Apply a Custom Template to the Page List Block. After you have created the above page list, you need to apply a custom template to it. While still on the Blog Index page, click on the newly created page list and choose "Design and custom template", click on the gear icon and choose "Seren Blog Grid", or "Seren Blog Masonry". Click "save".

8. At the top left of the menu click on the pencil icon and choose "Publish Changes".

As you add blog post pages in the future, their thumbnails will automatically be added to the Blog index page.

Adding Blog Entry Pages in Composer

This theme does not currently come with sample content, so you will need to set up Composer for your blog entry pages if you wish to do so. You can simply edit your blog pages on the page without these steps, but if you want to use Composer, then the instructions below detail how to add a blog post page type which opens in Composer and has a content block for you to add the post content. If you wish to add other blocks by default, the steps are the same.

1. Add a blog post page type in the Dashboard. Click on the Dashboard icon (top right of menu). Click on "Pages and Themes" >"Page Types" and then click on the button on top right "Add Page Type". You will need to add several fields here.

a) Page Type Name – whatever you want, e.g. news post

b) Page Type Handle – e.g. news_post

c) Default Page Template – whichever page you want. This can be Blog Entry or a different page template if you prefer.

d) Launch in Composer – yes

e) Is this page frequently added – yes

f) Allowed Page Templates – choose whichever ones

g) Publish Method – always publish below a certain page

h) Publish Beneath Page – choose your Blog index page here

Click on "Add".

picture of fields to add page type described above

Add Blog Archive

If you wish to add a Blog Archive, you will need a Date Navigation block. Please see more information about this block here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/date-navigation/

When you are on your Blog Index page, e.g. "Blog", click on the plus symbol and choose a "Date Navigation" block, drag it to whichever area you wish to put it, e.g. "Sidebar", and choose the relevant settings. For example, you may wish to filter by parent and choose "Blog". In our demo, we left "Redirect to different page on click" unselected and we chose "Filter by Parent" and selected the Blog index page.

Add Tags

You may wish to add Tags to your blog posts. You can do this by dragging a "Tags" block to the editable area on your blog post page and selecting your settings. This is something that you may want to add to your blog post page defaults. To save it to your blog post page defaults, you will first need to create a page type. Instructions for adding page types can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/dashboard/pages-and-themes/page-types/

After you create your page type for your blog posts, you can then add defaults. Click on Dashboard, then choose Pages > Page Types. Click on the page type that you have created for your blog post entries. Click on output then on the page that you have chosen (e.g. blog entry) and click on "Defaults". You can then add the default content you want for this page, e.g. a Tags block.

More information on defaults can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/dashboard/pages-and-themes/page-templates/defaults/

It is important to note that for the Tags to actually be connected to a search function, you will need to create a page with both a "Search" block and a "Page List" block (without a custom template). When adding the Tags block to a page, you will need to select this search page that you create under the "Link Tag to Search Page" heading of the Tags block form.

More information on the Tag block can be found here:

http://www.concrete5.org/documentation/using-concrete5-7/in-page-editing/block-areas/add-block/tags/

Back to top

Retina Ready

This theme includes retina.js. Retina.js is javascript that makes it easy to serve high-resolution images to devices with retina displays. Information on how to use retina.js is available here: http://retinajs.com/

If you want to provide retina.js images, you will need to save two images for each image that you want to use and place those in a folder in your theme. You will need to create one that is the size that you want to use and one that is double that size. The one that is double the size of the original image should have the same name as the original image with the ending @2x.

For example, if you have one image called my_image.png, you will need to have another image twice the size called my_image@2x.png.

If we had the images in an image folder and the link to the image was this path:

<img src="/packages/seren/themes/seren/images/my_image.png">

Then, in the images folder, we would have the two images "my_image.png" and my_image@2x.png". If a retina display was detected, retina.js should ensure that the larger (or higher resolution) image is served.

If you would like to ensure your images are served using retina.js, we would recommend inserting images using the path in the HTML block (e.g. click on the plus icon > Drag an HTML block to the editable area > enter the image path, e.g. <img src="/packages/seren/themes/seren/images/my_image.png"> click "Add". Then make sure the two images are saved in the same folder (e.g. in a folder called "images"). Please note that your image may have a different path than our example, depending on your theme's file structure.

Alternatively, if you do upload an image via a different method, e.g. we uploaded an image using a "Content" block, you can use a tool like Firebug in Firefox to find the path for the image you have uploaded. Once you know the path, you can put the larger image in the same folder. When you upload images in concrete5 using a "Content" block for example, they are inserted into /application/files in the root of your installation.

Back to top

Responsive videos

This theme includes jquery.fitvids.js, which allows videos to be displayed responsively. Any videos that you include in your pages in the main content will automatically be responsive. The footer has not been targeted with this jquery, so if you include a video in the footer, it will not be responsive. More information is available here http://fitvidsjs.com/

Back to top

Font Awesome

This theme provides Font Awesome. If you want to use Font Awesome, you will find helpful information here:

http://fontawesome.io

Examples of Font Awesome can be found here:

http://fontawesome.io/examples

Or an example of how you would use it in your theme is below.

If you wanted to add an icon using Font Awesome, you would first select the one you wish to use from the Font Awesome website. In this example, we are going to add a retro camera icon.

  1. Copy the code from the Font Awesome website
  2. Click on the plus icon in the top menu of your concrete5 website, while in edit mode.
  3. Choose an HTML block and drag it over to the editable area.
  4. Add the code <i class="fa fa-camera-retro fa-5x"></i>
  5. Click "Add".
  6. Click on the pencil icon at the top left of the menu and choose "Publish Changes".

You should see the icon on the page.

Back to top

Bootstrap Glyphicons

This theme is built using Bootstrap. You may wish to use Bootstrap glyphicons to enhance your site. If you choose to use glyphicons, you can find out more here:

http://getbootstrap.com/components/#glyphicons

One example of using glyphicons is inserting a button with a star:

  1. Click on the plus icon in the top menu of your concrete5 website, while in edit mode.
  2. Choose an HTML block and drag it over to the editable area.
  3. Add the code <button type="button" class="btn btn-Seren btn-lg">

<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>

  1. Click "Add".
  2. Click on the pencil icon at the top left of the menu and choose "Publish Changes".

You should see a button with a star on your website. This is just one example, you can see more on the Bootstrap website.

Back to top

Animations

We have used Wow.js to add animations to this theme.

http://mynameismatthieu.com/WOW/

Documentation is available here:

http://mynameismatthieu.com/WOW/docs.html

If you go to the link above, follow the steps under the section titled "Reveal CSS animations".

We will explain below how you can use it with this theme in concrete5.

  1. Go into edit mode by clicking on the pencil icon.
  2. Click on the plus icon and drag an HTML block to the area where you want to add the animation. You can add animations in a Content block in HTML view; however, we found that the best results were achieved using the HTML block as the code in the Content block sometimes change on publishing.
  3. Add the animation code in the HTML block. You will find options in the above documentation. For example, <div class="wow slideInRight" data-wow-duration="2s"><p>your content here</p></div>. The important thing to note is that whatever you want animated must be wrapped in the <div></div> tag as shown above with the appropriate class, such as the one above "wow slideInRight".
  4. Click "Save".
  5. Click on the pencil icon and choose "Publish my Edits".

Back to top

Fonts

This theme uses the following Google fonts:

Josefin Slab (for the body text)

Available from: https://www.google.com/fonts/specimen/Josefin+Slab

Dancing Script (for handwritten text)

Available from: https://www.google.com/fonts/specimen/Dancing+Script

Back to top

Useful Links

Concrete5 Editor Guide http://www.concrete5.org/documentation/using-concrete5-7

Bootstrap Documentation http://getbootstrap.com/

Font Awesome Documentation (icons) http://fortawesome.github.io/Font-Awesome/

Wow Animations Documentation http://mynameismatthieu.com/WOW/

Back to top

Credits

This theme has been built using the following components:

Concrete5 CMS

http://www.concrete5.org/

Bootstrap

http://getbootstrap.com/

Backstretch.js

http://srobbin.com/jquery-plugins/backstretch/

Font Awesome

http://fontawesome.io/

Html5shiv.js

https://github.com/aFarkas/html5shiv

Images Loaded

https://github.com/desandro/imagesloaded

Jquery.fitvids.js

http://fitvidsjs.com/

Masonry

http://masonry.desandro.com/

Respond.js

https://github.com/scottjehl/Respond

Retina.js

http://retinajs.com/

Wow.js

http://mynameismatthieu.com/WOW/

Images used are available from:

morgueFile http://www.morguefile.com/

Back to top