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
This is the custom_1 position, it is designed only for the image slide module. This position does not appear on IE7/8, in its place custom_3 will show, and only shows for IE7/8.
  • Register
This is the custom_2 position. It is designed only for the tab show module.

Top Row1 Modules

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

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. Only this style and -row2_large are stylized for this row, no other classes should be used in this row.

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: 4921

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

<a> With readon class applied:

readon_lines

<span> With highlight1 class applied:

highlight1

<span> With highlight2 class applied:

highlight2

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>

Tool Tips

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

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: 13727
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:



Custom Background Color

By default this template displays a dark honeycomb image towards the footer of the site, and where this image does not cover the hex color 030302 is shown. In the Vertex admin you can change this color to any color that you want, once you change it form 030302 the honeycomb pattern is no longer shown (because it wouldn't match the new color), and the background becomes whatever color you set it to. In addition to this you can also change the color of the line shown just above the footer text to match the new background color.



Custom Highlight Colors

Set your own custom color scheme with the built in highlight colors. Highlight1 primarily controls the buttons and tab show background color, while highlight2 mostly control active status, links and titles. You can set these colors to any color that you want.



Main Level Menu Color

Because the main menu appears on an image and does not have a background of its own you can choose any color you want for the flex menu's first level menu items to match your header image nicely. The drop downs will remain with a white background and dark grey text.



Custom Header Image

Easily apply any image that you would like as a custom header image for your site. The image will automatically stretch to fit, but it should be relatively large to begin with, between 1500px and 2000px is a good width to use. We recommend matching the custom background color option to match your header image, but you do not have to.

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.



Social Icons

Easily link to a social media site with the built in social icons found in the header of this template. Simply enter the url of your social site in the configuration and the icon will automatically appear. To disable an icon simply leave the url blank for that particular icon.




Uppercase Leters

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



Small Menu

On this demo you can subtext on the first level parent items. If you choose not to use subtext on these links simply choose a small menu option and the menu will automatically down size.



The Template's Settings

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

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: 3753
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 Slide

Right Inset

This is an example of a module published to the right_inset position. There is also a left_inset position and many others, be sure to read the full description.

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.

-dark

This is the -dark 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.

-inset

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

-highlight1

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

-highlight2

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

-no_shadow

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

-title_lines

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

-title_lines_no_bg

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

-centered

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

-highlight1_title

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

-highlight2_title

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

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.

Bottom Row3 Modules

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

S5 Box

Login

Register


Fields marked with an asterisk (*) are required.