• 註冊


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.

 

 
 
 
 
<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 sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

 

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

 

Site Shaper


So what are Site Shapers? They are quick installs of Joomla combined with all the modules, images, etc used on our demo. Within a few minutes you can have your site up, running and looking just like our demo. No more importing SQL dumps and installing modules. Just head on over to the download section of this template and grab a Site Shaper. Simply install the Site Shaper like any other Joomla installation, it's that easy!

How to setup a Site Shaper


Note - please read the entire tutorial. If you already know how to install Joomla then just install the site shaper just like a regular Joomla install, if you don't know how to install Joomla continue reading.

    • Login to your cpanel or your server admin panel.
    • Locate the area where your databases are (usually labeled Mysql Databases)
    • Create a new database
    • Next create a new database user and assign it to this newly created database in the previous step
    • You will then need to extract the site shaper to either a folder on your server or the root directory such as WWW. NOTE: if you already have a website in the root of your WWW folder, we suggest creating a new folder and extract the site shaper there. If your cpanel does not have an extract option or you cannot find it, you may also extract the contents of your site shaper in to a folder on your desktop and upload all the files via an ftp client to your server.
    • Next, navigate to the url where you extracted the site shaper via your web browser.
    • Continue through each screen until you reach the below screenshot:




  • At the above screen be sure to enter localhost as shown, continue to fill in the following text fields with your newly created database and username information
  • Follow through the rest of the site shaper setup and click the install sample data at the last screen and the installation is complete! (be sure to rename/remove the installation directory after finishing the install)



SQL Dumps


It is highly recommended that you use a Site Shaper if you want to get your site looking like our demos. If you just want the data we have used then an SQL dump is for you.

  • Login to your phpmyadmin via cpanel or another server database admin panel.
  • Navigate to the database your Joomla install is using
  • Select all tables and drop them. (NOTE: This will delete all your website data on this current Joomla install)
  • Next, click import and import the SQL dump we provide
  • Now you are done, just login via your Joomla admin with username=admin and password=admin


Features:

  • Supports a range of multimedia formats: images, flash, video, mp3s, html!
  • Auto detects formats or you can specify the format
  • Html descriptions
  • Enable/Disable page overlay when multibox pops up (via template parameters)
  • Enable/Disable controls (via template parameters)

  • Images Example

    Image #1. It can support html.
    Image #2. It can support html.
    Image #3. It can support html.

    To enable use the following around any group of images:

    <a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb2" class="s5mb" title="Grouped Image Example #1:"> <img src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

    <a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb3" class="s5mb" title="Grouped Image Example #2:"> <img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

    <a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb4" class="s5mb" title="Grouped Image Example #3:"> <img src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>

    Video Example:

    Youtube.com Video - CLICK ME
    UP: Carl and Ellie


    You can use the following video formats: flv, mov, wmv, real and swf. Just insert the URL to the videos in the href of the hyperlink, here is an example of how we did this for a Youtube video:
    <a href="http://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div class="s5_multibox youtube">UP: Carl and Ellie </div>

    YouTube Tutorial: Simply right click on a youtube video and copy the embed code, then paste into a text editor and look for the embed src and use that URL in your hyperlink.
    <embed src= http://www.youtube.com/v/VGiGHQeOqII

    MP3 Example:

    MP3 example - CLICK ME
    mp3 example

    <a href="http://www.shape5.com/demo/images/music.mp3" id="mb8" class="s5mb" title="Music">MP3 example</a> <div class="s5_multibox mb8">mp3 example - CLICK ME</div>

    iFrame:

    iFrame/HTML Example - CLICK ME
    Google.com

    <a href="http://www.google.com" rel="width:790,height:600" id="mb28" class="s5mb" title="Google.com">iFrame/HTML Example - CLICK ME</a> <div class="s5_multibox mb28">Google.com</div>



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

Easily set your own widths! This template gives you the ability to set your own width for the positions listed below. You can also choose to set your template to have fluid width (changes per screen size) or a fixed pixel with (what this demo is currently set to)

 

1. Page body width

2. Left column width

3. Right column width

 

All of this is done very easily in the template configuration.

 

 

The S5 IE6 Warning Plugin is by default enabled on our site shapers. This plugin will show the following warning to all users browsing with IE6:

This template comes loaded with options that you can use to customize your site exactly how you want it. Here's how to get to these custom settings:

  1. In the backend of Joomla go menu item Extensions/Template Manager.
  2. Click on the title of the template.
  3. This will bring you to the template manager screen where you can edit the template's parameters.
  4. Click save when you are done




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

會員登入

瀏覽人次

文章瀏覽點擊數
954777
公眾服務
廣告看板
 
廣告看板
 
廣告看板
 
廣告看板
 

誰在線上

目前有 一個訪客 以及 沒有會員 在線上

Copyright © 2016 hkrvca.org.hk All Right Reserved.

Login Form

S5 Register

?>