Responsive Layout
  • Register

Typography Options

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

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

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: 13943
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: 4227

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

Demo Information

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. Photography was purchased from shutterstock.com for this demo only, and is not included with this template or any membership. You may not use these images for your own use without purchase. Links will be provided for some images if you wish to purchase them from their copyright owners.

S5 Box

Login

Register


Fields marked with an asterisk (*) are required.