Logo

Keep the width of your logo to a max of 300px, this is so the navigation can sit to the right on the larger layouts.

 

Slider

The slider used on the demo site is the Responsive Blueberry slider. It is not required for the theme to work but if you would like your site to include a slider I recommend this one. You can find it within the Concrete5 Marketplace.

Override styles have been included within the main.css for the Blueberry slider, feel free to delete these if not required.

Maximum width of slider images should be 900px.

Download the Blueberry Slider here

Navigation - Drop Down Menu

One level of child pages has been styled to display using the drop down menu. It is recommended the amount of child pages displayed on the navigation to be kept to a minimum. Use Concrete5's Custom Attribute to exclude pages from the navigation if required.

How to set up the drop down navigation:

You will need to have child page(s) within one of your top level pages. (Dashboard > Full Sitemap > Add a Page.) Then Edit your Autonav block with the following settings:

The Framework

This site uses the ZURB Foundation Framework which handles most of the column structure and responsiveness You can find these styles in css/foundation.css it is recommend to leave this file as it is, and include any overrides in the main.css.

Global Areas

These are included for some Header and Footer elements. Including the Logo Container, Header Nav and Footer Columns.

Sidebar Elements

Each Block included in the sidebar will be wrapped in a side-block class. This adds a 24px bottom margin. If you do not use Stacks to build your blocks of side content, preferring to build up your elements on the page then you may want to remove this margin from the main.css. It can be found around line 12.

Custom Page List Templates

The Tiger Theme comes with a custom Page List template. You can see this in action on the demo site. To use this place your page in Edit Mode, click a page list block and select Custom Template choosing the Sidebar Links option.

Styled Links

Across the demo site you will see styled 'Read More' links that appear below a block of text. To achieve this style add the class 'ctaLink' on the tag.

<a class="ctaLink" href="http://weblink.com">Read More Link</a>

The CSS for this can be found within the typography.css file.

Social Icons

Within the footer of the demo site are some neat social icons. This is a HTML Block on the demo site, but I have included the styles in the main.css and images if you would like to make use of them.

<h3>Getting Social</h3>

<br />

<a href="http://twitter.com" target="_blank"><div class="socialIcon socialTwitter"></div></a>

<a href="http://www.linkedin.com" target="_blank"><div class="socialIcon socialLinkedin"></div></a>

<a href="http://www.facebook.co.uk" target="_blank"><div class="socialIcon socialFacebook"></div></a>

<a href="http://plus.google.com" target="_blank"><div class="socialIcon socialGoogle"></div></a>

 

Updating the Theme

Always backup your existing theme before updating, espically if you have made any modifications to the files as they will be overridden.

Read this to find out how best to update an existing modified theme:
Modifying a Theme Package

 

Browser Support

Tiger Theme works with Google Chrome, Apples Safari, Firefox and Internet Explorer 8+ Please bare in mind that IE8 does not support CSS3 so it won't utilise any of the media queries that make the site responsive, and it will been missing some of the smooth transitions featured on areas like the navigation drop down menu.