Documentation

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:

Auto Nav setup

Slider

You will have to install the FlexSlider as well as the theme to make use of this block. Make sure you are using the Home Page Type to place the slider in the area.

Credit for the slider goes to Jordan Lev

 

Global Areas

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

 

Sidebar Elements

Each Block included in the sidebar will be wrapped in a side-block class. This adds a 1.375em 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.

 

CSS & Framework

I'm using three main CSS files in this theme.

foundation-4.css - This is Zurbs Foundation 4 CSS which handles most of the structure and responsive elements. There is a foundation-4-ie8.css files for some overides for IE8 as it doesn't support media queries.

main.css - most of the themes styling is contained in this file. However, each block may have its own CSS file to keep styling modular.

typography.css - contains the main typography styles.

The CSS files are separated into sections using comments, making it easier to find the elements you want:

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Styled Headings

To achieve the look of some of the headings used across the demo site apply a style with a wrapper div

<div class="block-surround"><h1>Heading 1 with circle</h1>

<div class="block-surround-after"><h2>Heading 2 with circle and block line</h2>

Styled Links

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

<a class="cta-link" href="http://weblink.com">Find Out More Link</a>

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

 

Page Types

These include:

  • home.php
  • right_sidebar.php
  • left_sidebar.php
  • 2_column.php
  • 3_column.php
  • full.php
  • blog_entry.php
  • default.php (required- same as right_sidebar.php)

These Page Types should auto install with the theme, if they do not install them from the Themes section in the Dashboard

 

Custom Page List Templates

There are custom block templates for the following:

  • Flex Slider
  • Page List (x2)
  • Tags
  • Date Archive
  • Date Navigation
  • Search (x2)

You can see this custom block templates in action on the demo site. To make use of them place your page in Edit Mode, click a page list block and select 'Custom Template'.

 

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

Indulgence supports 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.

 

Sources and Credits

Images

The following image assets are viewable in the demo site (but are not included.) If you wish to use these images please view their licenses.

http://www.flickr.com/photos/[email protected]/7272176686/

http://www.flickr.com/photos/[email protected]/7272176686/

http://www.flickr.com/photos/[email protected]/1156230003/

http://www.flickr.com/photos/[email protected]/2368885028/

http://www.flickr.com/photos/[email protected]/5166071733/

http://www.flickr.com/photos/jfxie/6595820767/sizes/l/in/photostream/

http://www.flickr.com/photos/[email protected]/417885104/<

FlexSlider

Based from the code provided by Jordan Lev