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 4 Framework which handles most of the column structure and responsiveness You can find these styles in css/foundation-4.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

Skyline 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.

Customizing the Theme

This theme allows you to easily change the colour of various elements of your site using a colour selector, no coding required.

To do this go to the Themes section in your Dashboard. In the Skyline Theme options select 'Customize' to view the colour picker options. 

N.B Once you have confirmed the colours you may need to hard refresh the page to see the effects, or even clear the cache from the Dashboard.

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

Skyline 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.