Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

Sample Sidebar Module

This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
Template Specific Features
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

Stylize your site with any color you want. Set your own custom color scheme with the built in highlight colors. These control menu items, titles, buttons, hover over effects, backgrounds, and much more. You can set this color to any color that you want. Below is an example so you can see how this works.

Custom Highlight Font

Choose a custom highlight font powered by Google fonts. You can set a custom font for the 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 other elements as well.

Uppercase Letters

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

Hide Menu Arrows

With this option you can disable the menu item sub menu arrows.

Login, Register, Search and Font Resizer

On our demo of Fresh Bistro we have disabled all of these but if you desire to enable the below screenshot shows that they will appear at the top of your site.

Centered Logo

In this design we have for the first time included a centered logo within the main menu. To do so we had to add some JavaScript and custom CSS. Below is a screenshot of the logo as seen on the site and following it is a small tutorial to guide you on how to set this up.

1. The first step to create the centered logo is to create an external link menu item and publish it between all your other menu items. To get it centered at a good spot you may have to reword or add/remove a menu item since the logo is just another menu item itself. It works best when you have an even amount of menu items so that you can just stick the logo right in the middle of them. Below is a screenshot of this first step under the Joomla menu manager area.

2. The next step is to click the tab "link type" and enter in the CSS class for the logo so the design knows where to position your logo. So enter in the class "s5_logo_spacer" as shown below:

3. We recommend using a custom HTML module and publishing it to the "logo" position vs just using the built in logo method that we include with our designs. (this will allow us to show a dark image for the floating menu). So in your custom module you will enter the following:

<div class="s5_sitelogo">&nbsp;</div>

4. Next you may need to edit the width and height of your logo here:
template.css (line 640)

.s5_sitelogo {
background: url("../images/s5_logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #ffffff;
height: 114px;
width: 216px;

The dark logo CSS (for the floating menu) and definition can be found here:

template.css (line 647)

.s5_wrap_fmfullwidth .s5_sitelogo {
background: url("../images/s5_dark_logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #ffffff;
height: 114px;
width: 216px;

5. Lastly we have the widths of the actual menu item where the logo is placed. These also may need to be adjusted. We highly recommend using Firebug for Firefox or a similar tool in order to see what CSS you need to edit.
template.css (line 689)

#s5_menu_wrap_top .s5_logo_spacer {
text-indent: -999999px;
width: 234px;

template.css (line 697)

#s5_nav li.s5_logo_spacer {
height: 103px;
margin-left: 20px;
margin-right: 20px;
margin-top: -41px;
padding-top: 42px;

eCommerce powered by Snipcart

This month we've introduced a new module that works with You simply publish it to the "cart" position and check our the tutorial on how to set it up under the "extensions > s5 snip cart" area of this demo. The category area is simply a Joomla "list categories" menu item that we setup 4 categories with articles published to each category.

footer food


123 Meyers Street
Bigtownville, CO 56021

Contact Us

T: 800-234-9324
E: [email protected]

Have a Question?