01Jul 2011

Shadows and Ribbons

Written by Administrator 

Democontent - Setting Up

One of the striking features of the Newscycle template is the combination of shadow, gradient and ribbon elements that you can see on the front page of the demo site.

The template is designed in such a way that the gradient image will appear above the main content area, as well as modules assigned to the grid1 row (eg grid1, grid2, grid3, grid4), grid3 row (eg grid9, grid10, grid11, grid12) and the grid5 row (eg grid17, grid18, grid19, grid20).

This means that effectively at every second row of the grid modules when you publish a module to that row one of the shadow gradients will appear.

The ribbons are generated via the use of a module class which gives you maximum flexibility when it comes to deciding which areas of the page you want to highlight. All you need to do to apply the ribbon style to a module on the lefthand side of the page is apply the module class suffix -leftribbon to the module. While you can replicate the styling on the right side of the page by using the module class -rightribbon.

Frontpage example

As an example the front page of the Newscycle demo is set up using the following combination of modules.

Grid1 - A custom html module is positioned at the grid1 module position and it has the -leftribbon module class assigned to it.

Grid4 - A custom html module is assigned to grid4 and has some custom text using <blockquote> styling.

Grid5 - A Microblog module is published to the grid5 position.

As you can see from the screenshot above this formation of modules makes the page look as though the two rows of modules are a part of the same section on the page.