Documentation

Using the Foundation 5 concrete5 theme is easy; no code required.

Foundation 5 Theme Documentation

Below you will find some useful documentation to help you get the most out of this theme.

Getting Started

Before you can started building your new website, there are a few steps you must complete.

1. Install concrete5 on your server

If you've not done so already, go ahead and grab the latest copy of concrete5 and get it installed on your webserver (local or remote). Full instructions on how best to do this can be found on https://www.concrete5.org/.

2. Unzip & Install the Package

Once your concrete5 install is ready to rock, simply unzip the 'Foundation 5' package and place it in the root 'packages' directory within your install. Next, log in to your website and then click on 'Install' from under the 'Dashboard' menu. You will now see the 'Foundation 5' package awaiting install; click 'install'. After several seconds a message should appear telling you the package has been successfully installed.

3. Activate the Theme

Now that your package has been successfully uploaded and installed to your web server you can now activate the theme. Click on 'Themes' under the 'Pages & Themes' section from within your 'Dashboard'. In the list of themes you should now see 'Foundation 5', click 'Activate' and then confirm you wish to do this by clicking 'OK'.

To see the theme in all of its glory, click 'Return to Website'.

Auto-Nav Custom Template (Top Bar)

Foundation 5 comes bundled with an Auto-Nav 'Custom Template' which allows you to use the default navigation structure of Foundation 5 - This is also known as the 'Top Bar'.

Depending on your initial set up this may already be enabled on your site. If however, it is not, then simply follow the instructions below to get up and running.

Adding the Top Bar Auto-Nav (Standard Foundation 5 Navigation Type)

  1. 'Log in' to your site and navigate to the homepage
  2. Place the site in to 'edit' mode
  3. If one does not already exist, then go ahead and add an 'Auto-Nav' block to the 'Sitewide Header Nav' area
  4. Once configured, next you will need to click on this block and select 'Custom Templates'
  5. From the list choose 'Top Bar'
  6. 'Publish Your Edits' and you are done.

Adding Your Own Logo

By default 'Foundation 5' shows your sites name as your 'Logo' in the 'Top Bar' navigation - you can easily add your own image instead.

Adding your own logo

  1. Add a 'Stack' from dashboard > blocks > stacks
  2. Name the stack anything you like i.e. 'Logo'
  3. Click on the stack and click 'Add Block'
  4. Choose the 'Image' block
  5. Upload and add your logo
  6. Click on the block and select 'Custom Template'
  7. Use 'My_Site_Name' (without the quotes) as the Block Name
  8. Click 'Save'
  9. Click 'Approve Changes'

Please note that the maximum height for the logo/image is 45px. The maximum width depends on how many navigation links you have.

Font Awesome Icons

'Foundation 5' comes with Font Awesome built right in - this can be used in the sites navigation and in fact anywhere you like.

Adding a 'Font Awesome' Icon to Your Navigation

  1. Log in to your site
  2. Navigate to the desired page
  3. Click 'Properties' from the 'Edit' menu
  4. Click on the 'Custom Attributes' tab
  5. Select 'Nav Icon'
  6. Choose your desired icon from the list
  7. Click 'Save'

You will need to refresh your browser window to see this new icon. For a comprehensive list of all of the available icons please see the Font Awesome website.

Custom Page List

'Foundation 5' comes with a custom 'Page List' template to help you style your content; useful for a blog page.

1. Adding a 'Page List' template

  1. Log in to your site
  2. Navigate to the desired page
  3. Click 'Edit this Page' from the 'Edit' menu
  4. Click in the desired 'Area' on the page
  5. Click 'Add Block'
  6. Choose 'Page List'
  7. Configure the block as you desire, picking how many & which pages to list
  8. Click 'Save'
  9. Click the 'Page List' block you just added
  10. Click 'Custom Template'
  11. Choose 'F5 Grid 4'

2. Adding the 'Featured Image' Image

  1. Log in to your site
  2. Navigate to the desired page
  3. Click 'Properties' from the 'Edit' menu
  4. Click on the 'Custom Attributes' tab
  5. Select 'Featured image'
  6. Choose a file from your 'File Manager'
  7. Click 'Save'

This image will be automatically resized based on the 'Custom Template' you have choosen.

ProBlog Page Template (pb_post.php)

'Foundation 5' comes with a custom page template for the popular ProBlog add-on. This page template is designed in such a way to compliment the theme making for a much smoother and professional integration.

Please note: ProBlog is a third party add-on by a separate developer and is not shipped with this theme. Furthermore, you need ProBlog installed to be able to use this page template.