Newsflash

Colorado Springs - 'Experience the Freedom'!. It has never been easier to create your own dynamic site. Manage all your content from the best CMS admin interface.
 
Vortex Frontpage Demo Content PDF Print
Wednesday, 31 January 2007
The frontpage of the Vortex demo features some example content to give you an idea of some of the things that can be done with the template. While these are just examples, we have included custom styles in the template to make some of the content presentations easier to implement in your site.

Listed below are several examples of content presentations with step by step instructions on how to set up similar for your own site using Vortex.

Tabbed Content - The Vortex Demo Featured Movie Tabs

This section features a custom module utilizing the "Tabs and Slides in Content" mambot. You can view instructions on installing and configuring a "Tabs and Slides in Content" module in our "Tabs and Slides" Tutorial.

tabbed content

To achieve the special look of this content, we have used custom styles for our images and text. These custom styles are included in the Vortex template release for each color variation. To set up a tab box like the one in the demo, follow these steps:
  • Create the new module from your Admin Control Panel by going to Modules > Site Modules and selecting the "New" button in the top right corner.
  • Give your new module any title you want, but be sure to set the "Show Title" toggle to "No"
  • Set the Module Position to "User 1" or "User 2". Be sure that if you use "User 1" as your position, that no modules are published to "User 2" as the "Tabs and Slides" module needs to span the full width of the body for best results.
  • Set the "Module Class Suffix" to "-tabs"

    • install tabs

  • Enter in content similar to the following in your Custom Output:Content section in the module configuration. This content is exactly the same code used in the tabbed content demo.

    Be sure to "disable" your WYSIWYG editor before entering the following raw code by going to Site > Global Configuration and setting your "Default WYSIWYG Editor" to "No WYSIWYG Editor.

    Flushed Away


    <div class="movie-showcase"><img src="flushed_away.jpg" mce_src="flushed_away.jpg" alt="flushed away" />
    <div class="movie-summary">
    <b>FLUSHED AWAY (PG)</b>
    <p>
    This animated feature tells the story of an uptown rat (Hugh Jackman) who is flushed down a toilet in his penthouse apartment and winds up in the sewers of London, where he has to learn a whole new way of life.</p>
    </div>
    </div>

    Eragon


    <div class="movie-showcase"><img src="eragon.jpg" mce_src="eragon.jpg" alt="eragon" />
    <div class="movie-summary">
    <b>ERAGON (PG)</b>
    <p>
    In his homeland of Alagaesia, a farm boy happens upon a dragon's egg -- a discovery that leads him on a predestined journey where he realized he's the one person who can defend his home against an evil king.</p>
    </div>
    </div>

    Flags of our Fathers


    <div class="movie-showcase"><img src="flags_fathers.jpg" mce_src="flags_fathers.jpg" alt="flags of our fathers" />
    <div class="movie-summary">
    <b>FLAGS OF OUR FATHERS (R)</b>
    <p>
    A photo captured during the battle of Iwo Jima becomes a strong symbol to raise moral back home. But as they're paraded around the country, the surviving flag raisers begin to wonder who the real heroes of the battle were.</p>
    </div>
    </div>

    Babel


    <div class="movie-showcase"><img src="babel.jpg" mce_src="babel.jpg" alt="babel" />
    <div class="movie-summary">
    <b>BABEL (R)</b>
    <p>
    Two boys set out to look after their family's herd of goats, but when one of them tests his stolen rifle, the bullet finds an unintended target. In an instant, the lives of strangers on different continents collide.</p>
    </div>
    </div>


Images and Text - The Vortex Demo Top Box Office Module

This section features a module that contains images, text, and links styled to give a nice integrated appearance with bordered images on the left and the title and text on the right.

images and text

To achieve this effect on your own content, create a new module and enter code similar to the following in your Custom Output: Content section of the module configuration. The code below is the same used in the Top Box Office module on the Vortex dem

Be sure to "disable" your WYSIWYG editor before entering the following raw code by going to Site > Global Configuration and setting your "Default WYSIWYG Editor" to "No WYSIWYG Editor. 
<img class="album left" src="poster_1.jpg" alt="Poster" width="65" height="30" align="left" /><a href="http://bestofcosprings.com/content/view/27/47/#"><strong>Epic Movie</strong></a>
A comedic satire of films that are large in scope.<div class='clr'></div><br />
  <img class="album left" src="poster_2.jpg" alt="Poster" width="65" height="30" align="left" /><a href="http://bestofcosprings.com/content/view/27/47/#"><strong>Smokin Aces</strong></a>
May the best hitman win.<div class='clr'></div><br />
  <img class="album left" src="poster3.jpg" alt="Poster" width="65" height="30" align="left" /><a href="http://bestofcosprings.com/content/view/27/47/#"><strong>Night at the Museum</strong></a>
It wont be a silent night.<div class='clr'></div><br />
  <img class="album left" src="poster_4.jpg" alt="Poster" width="65" height="30" align="left" /><a href="http://bestofcosprings.com/content/view/27/47/#"><strong>Stomp the Yard</strong></a>
Its Drumline meets Happy Feet!<div class='clr'></div>
Last Updated ( Thursday, 10 January 2008 )
 
[ Back ]