Daily Archives: 5 Δεκ 2007

Module Positions and Styles

On this page you will see all the module styles and module positions available plus how to setup each of them.

All modules are fully collapsible!

How to install and setup module styles:

  1. Download any module you wish to publish to your site.
  2. In the backend of Joomla navigate to the menu item Extensions/Install Uninstall

  3. Browse for the module’s install file and click Upload File & Install.
  4. Once the module has be installed navigate to the menu item Extensions/Module Manager (same menu as above)
  5. Find the Module just installed and click on it’s title.
  6. Change any parameters that you wish and be sure to set it to published and publish it to your desired module position.
  7. To apply a module style simply fill in the module class suffix field with any of this template’s included module styles. This parameter setting is found under Module Parameters on the right side of the screen.

  8. Assign what pages you would like the module to appear on and finally click Save.

 

S5 Menu With Multiple Effects

The S5 Menu system gives you the option to choose between the jQuery or the S5 Effects scripts to power your site menus. The demo here is all running the jQuery menu system. You can easily switch to the S5 Effects library via your template parameters area in Joomla (extensions > template manager > select the template and click edit)

The S5 jQuery menu functions just like the S5 No-MooMenu except it is powered by jQuery. To demo the menu just mouse over the top menu and you will notice the menu smoothly expand and fade in.

Menu screenshot:

 

4 Options:

I like what I see! I want to JOIN TODAY.

Typography Options

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

<div class=”s5_greenbox”> <div class=”tl”> </div> <div class=”tr”> </div> <div class=”bl”> </div> <div class=”br”> </div> Your text here </div> </div>

<div class=”s5_redbox”> <div class=”tl”> </div> <div class=”tr”> </div> <div class=”bl”> </div> <div class=”br”> </div> Your text here </div> </div>

<div class=”s5_bluebox”> <div class=”tl”> </div> <div class=”tr”> </div> <div class=”bl”> </div> <div class=”br”> </div> Your text here </div> </div>

<div class=”s5_graybox”> <div class=”tl”> </div> <div class=”tr”> </div> <div class=”bl”> </div> <div class=”br”> </div> Your text here </div> </div>

This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>

This is an image with the “boxed” class applied:

This is an image with the “boxed_black” class applied:

This is an image with the “padded” class applied:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet_small
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class=”ul_numbers”:

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>