Setting Up Module Styles

Sample Drop Down Module

This is an example of a module published to the drop_down row. This row contains 6 modules. To enable the drop down simple publish any module to any of the drop_down_x positions.

Open Panel
  • Register

Custom 1

This is the custom_1 position with the class -transparent_dark applied. It is designed to be 100% of the this area's width. There is also a custom_2 position that will appear in the upper right corner of this area, but should only be used if custom_1 is taller than custom_2.

Top Row1 Modules

This is an example of a module published to the top_row_1 row with the class -transparent_dark applied. This row contains 6 modules, read below for a full description.

Custom 3

This is the custom_3 position. It is designed to be 100% of the this area's width.

Top Row2 Modules

This is an example of a module published to the top_row_2 row. This row contains 6 modules, read below for a full description.

Top Row3 Modules

This is an example of a module published to the top_row_3 row. This row contains 6 modules, read below for a full description.

Typography Options

Details
Written by Super User
Category: Latest
Published: 12 May 2013
Hits: 7331

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

<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>

<div class="s5_redbox"> <div class="point"> Your text here </div> </div>

<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>

<div class="s5_graybox"> <div class="point"> 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:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.



Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

<a> With readon class applied:

readon

<span> With highlight1_text class applied:

highlight1_text

<span> With highlight2_text class applied:

highlight2_text

<span> With highlight_font class applied:

highlight_font

<span> With uppercase class applied:

uppercase


This is a sample title_image class:

First Line Of Text
Second Line
<div class="title_image">
<img src="images/spotlight1.jpg" alt="" />
<span class="title_image_text">JFirst Line Of Text<br />Second Line</span>
<a href="" class="title_image_arrow"></a>
</div>


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


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>
Basic
$49/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

Choose
Standard
$79/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name
Personal Concierge
Choose
Premium
$99/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name
Choose

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".



<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>

<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>

<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>

<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name

</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div style="clear:both;"></div>
</div>

Tool Tips

Details
Written by Super User
Category: Latest
Published: 12 May 2013
Hits: 5343

Note - The tool tips script is by default disabled. If you wish to use it you must enable this script in the template's configuration area. This also includes site shaper installations.

For a tutorial on how to setup this script be sure to view the Vertex Guide on our Tutorials page.


Demo 1:


Demo 2:
Demo 2 Image Tool Tip

Demo 3:
Demo 3 Image Tool Tip

Template Specific Options

Details
Written by Super User
Category: Latest
Published: 12 May 2013
Hits: 11116
This template is built on the very powerful S5 Vertex Framework, which comes packed with amazing features! Learn More About Vertex...

Every template built on Vertex also comes with its own unique template specific options applicable to that particular template such as highlight colors, social icons, and much more. These features are in addition to the standard functions of Vertex, and are still controlled through the very user friendly interface of Vertex. This page will document the features specific to this template.

Template Specific Configuration Interface of Vertex

Below is a screenshot that shows all the template specific features available in the user friendly Vertex admin:



Parallax Backgrounds

Although this feature isn't specific to this template, it is very heavily integrated into the design of this template and is now a new feature built into Vertex. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of this demo adn watch the background of the top_row1 area as you scroll down the page. The new parallax feature is part of a new tab in Vertex called "Backgrounds", where you can control the background for many areas of your website.




Light or Dark Style

Easily switch between a light or dark style for your website. This styling effects the header and footer areas of the site, the rest of the site already is stylized for either both light or dark and there are many module class styles to use depending on your choice. Click the images below for a live demo.

DARK STYLE DEMO (click the image for a demo):



LIGHT STYLE DEMO (click the image for a demo):



Floating Header

This template comes with the ability to enable or disable a floating header and menu area. The header will automatically decrease in size and stay at the top of the website at whatever trigger height you set it to. This is a great way for your users to easily navigate your website!



Custom Highlight Colors

Set your own custom color scheme with the built in highlight colors. There are two built in highlight colors that control menu items, titles, buttons, hover over effects, and much more. You can set these colors to any color that you want.



Custom Highlight Fonts

Choose a custom highlight font powered by Google fonts. You can set a custom font for the S5 Flex Menu main level items, titles, buttons, and much more. This is used in conjunction with the default site font which is controlled under the Layout tab of Vertex, and controls many elements as well.



Uppercase Letters

Choose to enable or disable uppercase letters on most menu items, buttons, titles and more.




Small Menu

The S5 Flex Menu gives you the ability to have subtext on each menu item. If you choose not to use subtext on the first level links simply choose to disable this option and the menu will automatically down size.





The Template's Settings

Details
Written by Super User
Category: Latest
Published: 12 May 2013
Hits: 6257

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.

Stock Photography

Details
Written by Super User
Category: Latest
Published: 12 May 2013
Hits: 5520
All content and images shown on this site is for demo, presentation purposes only. This site is intended to exemplify a live website and does not make any claim of any kind to the validity of non-Shape5 content, images or posts published. Stock photography and icons were purchased from shutterstock.com for this demo only, and is not included with this template. You may not use these items for your own use without first purchasing them from their copyright owner. Links will be provided for some images if you wish to purchase them from their copyright owners.
  1. Site Shapers
  2. Search Engine Optimized
  3. S5 Tab Show
  4. S5 Image and Content Fader

Right

This is an example of a module published to the right position. There are also left, insets, rows, etc. positions and many others, be sure to read the full description. This is the default style that will appear for most module positions in the white body area.

Dynamic Colors

To use a dynamic color for a module title simply enter any hex color code along with any module class suffix you would like use into the module class field of any module:

Examples:
BF1FAE
-dark 058B0F
-transparent_dark D69E16
-no_padding A81111

You must enter the suffix exactly as shown with a space after the suffix. If you are not using a class suffix simply enter the hex color only. This can be applied to any module class above.

-no_padding

This is the -no_padding module style and can be applied to most most module positions.

-none

This is the -none module style and can be applied to most most module positions.

-dark

This is the -dark module style and can be applied to most most module positions.

-underlined1

This is the -underlined1 module style and can be applied to most most module positions.

-underlined2

This is the -underlined2 module style and can be applied to most most module positions.

-underlined3

This is the -underlined3 module style and can be applied to most most module positions.

-highlight1_hover

This is the -highlight1_hover module style and can be applied to most most module positions. Hover over this module to see its effect.

-highlight2_hover

This is the -highlight2_hover module style and can be applied to most most module positions. Hover over this module to see its effect.

-transparent_dark

This is the -transparent_dark module style and can be applied to most most module positions. This module is intended to be used over a background image since it is transparent, because this module is shown on a white background it will not show transparent.

-transparent_dark_extra_padding

This is the -transparent_dark_extra_padding module style and can be applied to most most module positions. This module is intended to be used over a background image since it is transparent, because this module is shown on a white background it will not show transparent.

-transparent_light

This is the -transparent_light module style and can be applied to most most module positions. This module is intended to be used over a background image since it is transparent, because this module is shown on a white background it will not show transparent.

-transparent_light_extra_padding

This is the -transparent_light_extra_padding module style and can be applied to most most module positions. This module is intended to be used over a background image since it is transparent, because this module is shown on a white background it will not show transparent.

Bottom Row1 Modules

This is an example of a module published to the bottom_row_1 row. This row contains 6 modules, read above for a full description.

Bottom Row2 Modules

This is an example of a module published to the bottom_row_2 row. This row contains 6 modules, read above for a full description.

Custom 4

This is the custom_4 position. It is designed to be 100% of the this area's width.

Custom 5

This is the custom_5 position with the class -transparent_dark applied. It is designed to be 100% of the this area's width.

Bottom Row3 Modules

This is an example of a module published to the bottom_row_3 row with the class -transparent_dark applied. This row contains 6 modules, read above for a full description.

S5 Box

Login

Register