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.
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”.
Go to Dashboard > Full Dashboard > Pages and Themes > Themes and activate the Salix theme.
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.
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
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.
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.
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".
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.
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.