Details

Hits: 618

Demo 1:


Demo 2:
Demo 2 Image Tool Tip

Demo 3:
Demo 3 Image Tool Tip

Details

Hits: 617

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:

• 01In the backend of Joomla go menu item Extensions/Template Manager.
• 02Click on the title of the template.
• 03This will bring you to the template manager screen where you can edit the template's parameters.
• 04Click save when you are done

Details

Hits: 1067

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:



4. Next you may need to edit the width and height of your logo here:
The dark logo CSS (for the floating menu) and definition can be found here:



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.

eCommerce powered by Snipcart

This month we've introduced a new module that works with Snipcart.com. 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.

Details

Hits: 747

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 are often purchased from shutterstock.com for this demo only, and is not included with this template. Occasionally open source images are used as well, but are also not included, eg: unsplash.com. You may not use these items for your own use without first purchasing them from their copyright owner. Links will be provided for some of these items if you wish to purchase them from their copyright owners or download them from their sources.

Details

Hits: 695

So what are Site Shapers? They are quick installs of Joomla combined with all the modules, content, etc used on our demo, excluding stock photography. Within a few minutes you can have your site up, running and looking just like our demo. No more importing SQL dumps and installing modules. Just head on over to the download section of this template and grab a Site Shaper. Simply install the Site Shaper like any other Joomla installation, it's that easy!

How to setup a Site Shaper

• 01Login to your cpanel or your server admin panel.
• 02Locate the area where your databases are (usually labeled Mysql Databases)
• 03Create a new database
• 04Next create a new database user and assign it to this newly created database in the previous step
• 05You will then need to extract the site shaper to either a folder on your server or the root directory such as WWW. NOTE: if you already have a website in the root of your WWW folder, we suggest creating a new folder and extract the site shaper there. If your cpanel does not have an extract option or you cannot find it, you may also extract the contents of your site shaper in to a folder on your desktop and upload all the files via an ftp client to your server.
• 06Next, navigate to the url where you extracted the site shaper via your web browser.
• 07Continue through each screen until you reach the below screenshot:
  
  
• 08At the above screen be sure to enter localhost as shown, continue to fill in the following text fields with your newly created database and username information
• 09Follow through the rest of the site shaper setup and click the install sample data at the last screen and the installation is complete! (be sure to rename/remove the installation directory after finishing the install)

Details

Hits: 538

SEO - Get your site noticed!

Not only is this template beautifully designed but it is great for search engine optimization as well! What is SEO? It is simple the act of altering a web site so that it does well in the organic, crawler-based listings of search engines such as google.com. How does this template accomplish this? It's simple, the majority of your most valuable content is found in the main body of your site, through css we are able to alter the layout of the site and call the main content before the left and right columns are called. This allows for your content to be found first by search engines before it reaches your other content, which is vital in search engine optimization. This is a common feature this can be done with almost all of Shape 5 templates as well.

Details

Hits: 694

The S5 Tab Show can be demo'd on this page. The styling of the module shown here is customized specifically for this template with css overrides, and cannot be used with any other template. The same module can be used on any template, but with default or other styling in its place.

The S5 Tab Show will display up to 20 modules in various styles within sliding tabs, and is compatible with responsive sites. Simply publish the S5 Tab Show module to your desired module position and pages. Then start publishing modules to the positions in the Tab Show (s5_tab1, s5_tab2, etc); these modules will become the slides. This is a great way to organize and showcase your site's content or images. Version 3 of this module is incredibly powerful, below is a list of all of its features.

• Transitions are powered by CSS3, so no javascript conflicts
• Optional custom classes
• Up to 10 copies of the module on the same pages; each individually controlled
• Use up to 20 slides
• Select on mouseover or on click for activation
• Set the loation of the tabs or arrows
• Center the tabs or arrows
• Hide the tabs or arrows until mouseover
• Force the tabs or arrows to be shown for tablets and mobile devices
• Select your transition effect
• Set your duration speed
• Add extra padding in between slides or no padding at all
• Optional button text for tabs
• Optional images for tab buttons
• Set a background color or image for each slide or the entire module
• Enter pre-text and post-text

Details

Hits: 818

This module can be viewed on this page. The styling of the module shown here is customized specifically for this template with css overrides, and cannot be used with any other template. The same module can be used on any template, but with default or other styling in its place. Publish your own content into each slide transition and for multiple slide transition effects, navigation arrows and also a drop down gallery tab that allows you to select a slide via a thumbnail. This module is fully responsive as well. The S5 Image and Content Fader v3 is powered by Mootools/Jquery. Best of all it's free!

Features at a glance

• Responsive layout compatible
• Choose between 4 slide transitions: Fade, Continuous Horiztonal, Fade Slide Left, Continuous Vertical
• Specify height and width of module
• Includes a gallery tab drop down to show all images
• Each image slide can have its own hyperlink
• Show up to 10 images at once
• Publish your own content to each picture slide
• Navigation arrows
• Not all slides require titles
• Change delay time
• Hide or show: Navigation arrows, thumbnail carousel and popup text