Documentation (Abbreviated)

Full Documentation is available in the theme package. After downloading the package, open the Salix folder and the user guide is available under the Documentation folder. 

Install Salix Package

Download the “Salix” package, unzip and place into the “packages” directory in the root of your concrete5 installation (not “concrete/packages”). Log into your website and go to Dashboard > Full Dashboard > Install. You will see the Salix theme thumbnail. Click “install”.

Activate Salix Theme

Go to Dashboard > Full Dashboard > Pages and Themes > Themes and activate the Salix theme.

Top Menu

The Salix theme has the top navigation hard coded into the theme so you do not need to do anything, the menu will automatically be created when you add pages. 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.

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.

Home Page

There are four home page types with the Salix theme:

Home Page V1 – this has a Bootstrap Jumbotron at the top. You can use this version if you would like a full-width background image. This version does not include animations, but you can add your own by following the instructions under "Animations".

Home Page V2 – this has a full-width area at the top that can be used for a full-width slider. You can use this version if you would like a full-width slider. This version does not include animations, but you can add your own by following the instructions under "Animations".

Home Page V1 Animated – this is the same as Home Page V1 with some animations included (hard coded) in the layout

Home Page V2 Animated – this is the same as Home Page V1 with some animations included (hard coded) in the layout

As the home pages have more editable areas, we have provided an image to illustrate the editable areas in Home V1. Please note, these areas are exactly the same in Home V1 Animated (except with animation in some areas). In Home V2 and Home V2 animated, all of the areas are the same, except for the top area which is not a "Jumbotron" area, but is instead called the "Banner" area.

 

Home V1 Editable Areas Illustrated

Blocks

Salix Thumbnail

To add a thumbnail, click on the editable area you want to add the thumbnail to (e.g. "Add to Main") > Add Block > choose Salix Thumbnail. You will get a pop up screen where you can choose an image, some text and a call to action button.

1. Click on "Choose Image" to select an image. Please note you may need to browse for the image and upload it (Click "Browse", choose image, select "open", select upload, then "continue". Once it is showing on the left select it by clicking on it and select "choose". You can select a page for this image to link to if you like by clicking on "Select Page" next to Link to Page (this is optional). You can add some text after "alt text" for people who are visually impaired (this won't show on the page).
2. Under "Text" you will see a text editor. Enter any text here that you would like to have under the image. You can also choose styles for the text here (e.g. headings or font colours).
3. Under "Button" you can create your call to action button. Click on "Select Page" to choose the page that you want to link to. Select the page in the Full Sitemap. After "Link Text" put a short bit of text that you want to show on the button (e.g. read more, or go to blog, etc.).
4. Click "Add".

Salix Image Responsive

To add a responsive image (one which has the Bootstrap class "img-responsive", and adjusts according to screen size) use the "Salix Image Responsive" block (please note this only works with this theme as it is using a Bootstrap class). When you have clicked on where you want to add the image, go to Add Block > Salix Image Responsive > select the image you wish to use. You may add a link to a page and some "alt text" if you like. Click "Add".

Salix CTA Button

To add a call to action button where you can link to another page in your site, use the "Salix CTA Button" Block. When you have clicked on where you want to add the block, go to Add Block > Salix CTA Button and select the page you want to link to. In the "Link Text" field enter the text you want to appear on the button. Click "Add".

Salix Social Icons

To add social icons, click on the editable area where you want to put the icons, while in edit mode. In the demo, we have put the block in our footer area. Choose Add Block > Salix Social Icons and add the URLs to any social links you want to add to your page (note that the link should be starting with http: such as http://www.youtube.com/yourcompany). Any links that you leave blank will not show the icon. Then click "Add".

Salix Icons Font Awesome

To add social icons using Font Awesome, click on the editable area where you want to put the icons, while in edit mode. In the demo, we have put the block in our footer area. Choose Add Block > Salix Icons Font Awesome and add the URLs to any social links you want to add to your page (note that the link should be starting with http: such as http://www.youtube.com/yourcompany). Any links that you leave blank will not show the icon. Then click "Add".

Salix Highlight Box

Click on the editable area where you want to add a highlight box. Go to Add Block > Salix Highlight Box and add any content that you would like. Then click "Add". This box has a background colour which can be changed in the customization panel.

Bootstrap Accordion

An accordion is a group of collapsible panels of content. Please see our demo for an example.

1. Click on the editable area where you want to add a Bootstrap Accordion.
2. Go to Add Block > Bootstrap Accordion.
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.
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".

Bootstrap Two Column

This block enables you to add content blocks within Bootstrap columns. Please note that this block does not work for situations when you want to create columns where you can add other blocks like a Form block, for example. This block is suitable for adding images and content, or HTML. Click on the editable area where you want to add a two column area. Go to Add Block > Bootstrap Two Column and add your content to the text editor areas. Then click "Add".

Bootstrap Three Column

This block enables you to add content blocks within Bootstrap columns. Please note that this block does not work for situations when you want to create columns where you can add other blocks like a Form block, for example. This block is suitable for adding images and content, or HTML. Click on the editable area where you want to add a two column area. Go to Add Block > Bootstrap Three Column and add your content to the text editor areas. Then click "Add".

Bootstrap Four Column Column

This block enables you to add content blocks within Bootstrap columns. Please note that this block does not work for situations when you want to create columns where you can add other blocks like a Form block, for example. This block is suitable for adding images and content, or HTML. Click on the editable area where you want to add a two column area. Go to Add Block > Bootstrap Four Column and add your content to the text editor areas. Then click "Add".

Background Images for the Banner and Home Page

A full width banner image can easily be added to each page using custom attributes. To add a banner image to the page, navigate to the page in your website, hover over the "Edit" button in top left corner > click on "Properties" > select "Custom Attributes" tab > choose "Salix Banner Image". Choose the image that you would like to use as the background and select "Save".

On the Home Page, there is another area for a full width background image that uses the same method as adding the banner image.

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. Click on an editable region in our concrete5 website, while in edit mode.
2. Click Add Block > HTML or content block.
3. Add the animation code in HTML view. 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". If you are not keen on using HTML, just put the code in when you are in html view and then click "update" and you will be back to the text editor view where you can add your text or images.
4. Click "Add"
5. Click "Edit" > "Publish my Edits"