Tutorials

How to make your website look like demo site

#1 - Unzip the quickstart package in the downloaded file.

#2 - Install it like the way you install joomla, check the install sample data in the last steps of installation to make your site look like the demo.

The quicskstart package include : joomla, extensions, plugin and template.

Logo

The logo Hexagon is the default sample logo and you should replace it with your own.

Technically, logo is an image file called logo.png located in folder joomla_root_folder/images/st_hexagon/logo.png

To change it, please edit the module named "logo".

Template Color

ST Hexagon provides 6 major color variations for you to choose from. Each color variation covers fills drop-down menu, links and some others.

Follow these steps bellow to configure template color :

#1 - Access the admin area >>> Extensions >>> Template Manager >>> st_hexagon - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Choose template color in parameter "Showcase" and background image in parameter "Select Background"

All available colors are described below.

Default color

Yellow

Orange

Blue

Green

Red

Menu Style

ST Hexagon provides three menu styles to present your website navigation. The default Joomla! built-in menu module (mod_mainmenu) is utilized, so you don’t need to install any external menu modules.

Main menu default

To set up Main Menu please select the menu module you want to use and set up parameters as follows:

Title : Main menu (or any other you like)
Show Title : Hide
Position : Tool
Status : Published
Access : Public
Select Menu : Main Menu (you might want to use another menu source here)
Start Level : 1
End Level : All
Show Sub-menu Items : Yes
Menu Class Suffix : avatar-main-menu avatar-menu-icons gold (Please only use “avatar-menu-icons gold” if you want to display icons - gold is icon's color)
Alternative Layout : Responsive

Main menu with icon

To set up icons, you need to go to menu item settings and take the following steps:

Add symbol combination icons-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name.

Slide menu left

Side Menu is a unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To set up Slide Menu left please select the menu module you want to use and set up parameters as following:

Title : Slide menu (or any other you like)
Show Title : Show
Position : left-top
Status : Published
Access : Public
Select Menu : Main Menu (you might want to use another menu source here)
Start Level : 1
End Level : All
Show Sub-menu Items : Yes
Menu Class Suffix : avatar-slide-menu-left avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

Slide menu right

To set up Slide Menu right, do the same config with Slide Menu left. In parameter Menu Class Suffix : avatar-slide-menu-right avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

Slide menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

Tree Menu

Tree Menu represents menu items in a clear tree-like hierarchy which is very appropriate for indexing menu. By default all sub-menu items are collapsed until you select the parent menu item.

To set up Tree Menu please select the menu module you want to use and set up parameters as following:

Title : Tree menu (or any other you like)
Show Title : Show
Position : left-top
Status : Published
Access : Public
Select Menu : Main Menu (you might want to use another menu source here)
Start Level : 1
End Level : All
Show Sub-menu Items : No
Menu Class Suffix : avatar-tree-menu avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

Tree Menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

Module style and Icons style

ST Hexagon comes with different module styles and icons. For each module you can combine it with 23 predefined icons for module title styling. Take a look around to see how module styles are applied.