mod_dbrss2 AJAX RSS Reader poweredbysimplepie
Home arrow Features arrow Demo Content
BentoBox Frontpage Demo Content PDF Print E-mail
Written by Administrator   
Tuesday, 27 February 2007
The frontpage of the BentoBox 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 listed the code showing how some of the module content layouts were achieved.

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

Mono Slideshow - Flash Slideshow Software

Mono Slideshow

The BentoBox Dark demo features an excellent flash based slideshow on the frontpage. This slideshow software is called "MonoSlideshow" and is a commercial slideshow software and is not included with the BentoBox template.

Features
  • Resize and position everything to suit your needs
  • Color every object in the slideshow
  • Performs professional transitions, including the Ken Burns effect
  • Contains high quality typefaces
  • Create your own water mark
  • Supports sound and music
  • Monoslideshow talks XML, so it's easily integrated in your existing site
How does it work?

Monoslideshow is a single .SWF-file. There's no need to edit the slideshow in the Flash IDE itself. Instead, all its information is directly read from a .XML-file. It's compact, extremely versatile and very easy to integrate in your existing website.

content

Featured Gallery Prints - Left Aligned Images with Links and Text

This section features a custom module with left aligned images and links and text wrapped to the side. To set up a module like this one, 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.

- Set the Module Position to your desired location (the "Left" module position is used for this content in the demo).

- Copy and paste in the content code that is listed below in the blue code block into your Custom Output:Content section in the module configuration. This content code is exactly the same code used in that module in the 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.
<a href="#"><img src="images/stories/gallery1.jpg" alt="Waterfalls" 
align="left" style="margin-right:8px;border:5px solid #1a1a1a" /></a>
<a href="#"><b>Waterfalls</b></a><br />Breathtaking waterfall scene prints.
<div class='clr'></div><br /> <a href="#"><img src="images/stories/gallery2.jpg" alt="Canyons"
align="left" style="margin-right:8px;border:5px solid #1a1a1a" /></a>
<a href="#"><b>Canyons</b></a><br />Amazing canyon and gorge prints.
<div class='clr'></div><br /> <a href="#"><img src="images/stories/gallery3.jpg" alt="Lakes"
align="left" style="margin-right:8px;border:5px solid #1a1a1a" /></a>
<a href="#"><b>CSSEdit 2.0</b></a><br />Crystal clear lakes and lakeside
prints.<div class='clr'></div>


content

Closeout Deals - Centered image with Text Below

This section features a module that contains a centered image with text positioned below. To achieve this effect on your own module content, follow these steps below:

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

- Set the Module Position to your desired location (the "Left" module position is used for this content in the demo).

- Copy and paste in the content code that is listed below in the blue code block into your Custom Output:Content section in the module configuration. This content code is exactly the same code used in that module in the 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.
<center><img src="images/stories/closeout.jpg" alt="closeout" 
style="border:5px solid #1a1a1a" /> </center><p>Take advantage
of this great closeout deal on a trip to the Grand Tetons, only $199.
Hurry before the deal, and the Tetons, disappear forever!</p>
Last Updated ( Friday, 04 May 2007 )