Floating Menu

Details

Created on Thursday, 12 December 2013 19:22

The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.

Features at a glance:

• Set a background image to the menu, gradient or solid color
• Set to snap or smooth scroll in
• Determine at which point as you scroll down your page that the menu drops in
• and many more features, just check out the screenshot below

Admin area of the Floating Menu:

Parallax Backgrounds

Details

Created on Thursday, 12 December 2013 19:21

Parallax backgrounds as well as other background options are built directly into the Vertex Framework. 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 the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.

Features:

• Set the scroll speed of the images
• Set background repeat style
• Set background image size, 100%, cover, contain, etc
• Set custom backgrounds for all s5 rows in the framework.
• Enable or disable parallax on a per row basis

Admin Area Of The Backgrounds Tab:

Typography Options

Details

Created on Sunday, 12 May 2013 03:48

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

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 class applied:

highlight1

<span> With highlight2 class applied:

highlight2

<span> With uppercase class applied:

uppercase

<a> With readon_highlight1 class applied:

readon_highlight1

<a> With readon_highlight2 class applied:

readon_highlight2

<a> With readon_border_highlight1 class applied:

readon_border_highlight1

<a> With readon_border_highlight2 class applied:

readon_border_highlight2

There is also a class readon_border_white that appears like the two classes above, but because of the white background here it would not be visilble. It used on the homepage inside of the S5 Image and Content Fader module.

<a> With large_readon_highlight1 class applied:

large_readon_highlight1

<a> With large_readon_highlight2 class applied:

large_readon_highlight2

<a> With large_readon_border_highlight1 class applied:

large_readon_border_highlight1

<a> With large_readon_border_highlight2 class applied:

large_readon_border_highlight2

There is also a class large_readon_border_white that appears like the two classes above, but because of the white background here it would not be visilble. It used on the homepage inside of the S5 Image and Content Fader module.


This is a customer quote box, you simply need to change out the text, image name, and the three hex colors in code shown below to ones of your choice:

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>

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:

Tool Tips

Details

Created on Sunday, 12 May 2013 03:47

Demo 1:


Demo 2:
Demo 2 Image Tool Tip

Demo 3:
Demo 3 Image Tool Tip

The Template's Settings

Details

Created on Sunday, 12 May 2013 03:47

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

Template Specific Options

Details

Created on Sunday, 12 May 2013 03:46

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 Highlight Colors

One of the first things you will notice about Oasis is the vibrant colors found throughout the design, this is all made possible by the very wide variety of color configuration options shown in the screenshot above. In addition to that you can also change the color of any module row under the Backgrounds tab within Vertex. Below is an example of how these color choices work.



The colors choices you can pick from the Vertex admin are:

1. Change the background color of any module row under the Backgrounds tab.
2. Change the background color of the custom_2 row.
3. Set a background color to show behind the menu when custom_1 is not present (see below for more information).
4. Two highlight colors control buttons, titles, links and more.
5. Set the login and register link colors that show in the upper right corner.
6. Choice a background color for the S5 Box (login and register popup).
7. Set the active and inactive colors of the S5 Tab Show tabs.

Header Background Image and Color

Whenever the custom_1 position is used it will show undernearth the menu and logo area. The logo menu and logo area is opaque so the image in custom_1 will show through. Whenever there is not a module published to custom_1 the header area needs its own background color or image since it no longer has a module showing through from underneath it. You can easily set a solid color or a background image for when custom_1 is not present.

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