Mikon

Joomla Template Documentation


Mikon Onepage is a sleek, clean, fully responsive and perfect onepage parallax template. This multi-purpose design can be used for any type of website: corporate, agency, nonprofit, consultant agency, freelancer or general business with attitude. Also when your company needs to inform the public about your latest product or mobile app a one-page website is a great solution (layout) for such an announcement.

It gots a fullscreen slider with custom captions, an Awesome portfolio and contact form, Team, ... Its built with twitter bootstrap and very well coded so it is very easy to edit and modify things. We used the fixed position navigation menu. This type of menu remains at the top of the page while scrolling, which can be a very hand element in long-scrolling sites, even if the menu buttons simply take you to a different section on the same page.

Full list of Features:

Template Installation

Package Contents

Package
              |- Documentation   : Template Documentation
              |- Licensing         : Folder contains License
              |- Extensions      : Folder contains extensions
              |- Quickstart Package : Folder contains Quickstart Install Package
              |- Template Only   : Folder contains template only install pack.

Before starting to use this template, let's assuming that you had some basic Joomla! Experience. Installing extensions, basic actions like enable/disable entensions, create modules and asign position... and some basic configuration. However, if you're not, you should take time to learn about Joomla, how to use it and how it works at Joomla! Documentation.

Technical Requirements

Ok, now when you're ready, let's start by unpack all files and folders of the Template Package file to a folder.

Quickstart Pack Installation

The Quickstart Package consists on a complete pack of Joomla!, Joomla Template, Extensions and Sample Content, excellent for beginner users to explore back-end settings and sample content. Installing the Quickstart is just like installing Joomla! and is recommended for newbies but also good for anyone who don't want to go through the individual setup of each component, module or plug-in. After the installation complete, you will have a replica of the live demo that we have.  Once your environment is ready, follow this quick guide:

  1. Localhost only: Create a new folder in the htdocs folder for Xampp (www folder for Wamp). Unpack the contents from mikon_quickstart_j3.zip to that folder.
  2. Live site only: Upload mikon_quickstart_j3.zip to your server using your favorite FTP software. Generally, you will unpack it under public_html folder, wwwroot folder (windows hosting) or the root folder on your server.
  3. Access your site on the browser, http://localhost/your_folder on localhost or http://yoursite.com on your live site.
  4. Follow the Joomla installation prompts as you would a normal Joomla installation and don't forget to install sample data.
  5. Once the installation complete, delete the installation folder, view site and you'll see your site should look exactly like the demo version.
  6. Watch this video tutorial on how to install Joomla! Click here!

Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, various extensions, so you just decided you want to improve the design of your website. Because the development of this template is based on Helix Framework so you will need to install the Helix System Plugin First. So here's what you have to do:

  1. Log-in to your Joomla! back-end (www.your-website.com/administrator).
  2. If your website is already had Helix System Plugin then pass this step, otherwise just download System Plugin Joomla 2.5 & 3 and install it.
  3. Now Enable Helic Framework Plugin.
  4. Install Template, make it dedault, go to front-end and check the new module positions. You will have to reassign your modules to the new positions of the template.

Note: Some users have issues while installing quickstart pack or template on Wamp server (for testing and exploring), this issue is solved by enable curl in php settings. You need to edit 2 files php.ini inside wamp/bin/php/{your php version}/ and wamp/bin/apache/{your apache version}/bin/. Search for extension=php_curl.dll and remove semicolon before this line. Save and restart your wamp and everything will work fine.

Customizing The Template

Open up this template configuration by go to Extensions > Template Manager, click on the name of this template and you will see all settings that you can make.

Basic

You can config : Layout, Header, Logo, Footer, Goto Top, Social.

Presets

You can config : Background color, text color, link color... .

Using Layout Builder

Now we'll go through settings inside Layout Tab which represents the most advantage feature - Layout Builder. With Layout Builder, you can create/remove/edit positions to display modules dynamically.

Go to Layout tab and you will see something like this.

Config for row

Config for column, use grid options Bootstrap

Custom module positions

With this template, we have two ways to do this. The first and easy way is enter position name on Module Manager of your Module. After that, go to Layout Tab of this template configurations, click the cog icon of any column, in position dropdown field of column settings, you'll see your position there, choose it then your module will displays output on that column. Note that if you use this way, all positions are gonna be saved in database. Your templateDetails.xml file won't change.

The second way is also pretty easy. Just edit templateDetails.xml inside folder templates/template_name. Find <positions> tag and add as many positions as you wish. For example, we add new position before footer and name it custom-pos like this:

<positions>
                <position>logo</position>
                <position>menu</position>
...
<position>custom-pos</position>
<position>footer1</position>
<position>footer2</position> </positions>

You can add positions on any line inside <positions> tag, we added it in that line because it's easy to read further on. And now, your custom position will appear on solumn settings in Layout tab of template settings (reload your admin page to make it works).

Now you can assign display of modules by add position to it and don't forget to create new column (and row) if necessary and set position field of column settings to your custom position you've just created.

Menu

You can config : Select Menu, Menu settings, Menu Offsets

Font

You can config : Body Font, Header Font, Other Font ...

If many selectors please use (,) EX: body, h1, h2

Advanced

Using Shortcodes

Shortcodes are small bits of code that cut down on repetitive typing of HTML while adding "cool features" that are easily accessible to content creators. Rather than writing html code, this feature help you produce html outputs in easy way with tags. You can add css selector to it like normal html tag and style. Just write an article and copy, paste, or type shortcodes code, you'll see it work at front-end.

Accordion

[accordion]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
            [/accordion]

Carousel

[carousel]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
            [/carousel]

Tab

[tab]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
            [/tab]

Icon

[icon name='ICON_NAME' size='15px' color='#abcxyz' class='abc']ADD_CONTENT_HERE[/icon]

Currently, we use Fontawesome Version 4.2 For icon and icon name, please visit Fontawesome Cheatsheet.

Testimonial

[testimonial
                name="AUTHOR_NAME"
                email="AUTHOR_EMAIL"
                company="AUTHOR_COMPANY"
                designation="AUTHOR_DESIGNATION"]
              content
            [/testimonial]

Buttons

              [button type="flat" size="" link="#"]Flat[/button]
              [button type="3d" size="" link="#"]3D[/button]
              [button type="outline" size="" link="#"]Outline[/button]
              [button type="info" size="" link="#"]Info[/button]
              [button type="success" size="" link="#"]Success[/button]
              [button type="warning" size="" link="#"]Warning[/button]
              [button type="danger" size="" link="#"]danger[/button]
              [button type="inverse" size="" link="#"]Inverse[/button]
              [button type="block outline" size="large" link="#"]Block level button[/button]
              [button type="flat" size="large" link="#"]Large button[/button]
              [button type="flat" size="" link="#"]Default button[/button]
              [button type="3d" size="small" link="#"]Small button[/button]
              [button type="outline" size="mini" link="#"]Mini button[/button]

Rows and Columns

Columns with are set by bootstrap classes.

[row id="ROW_ID" class="ROW_CLASS"]
			[col class="span4"]ADD_CONTENT_HERE[/col]
			[col class="span8"]ADD_CONTENT_HERE[/col]
			[col class="span12"]ADD_CONTENT_HERE[/col]
			[/row]

Image Gallery

[gallery columns="number of columns" filter="yes"]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
            [/gallery]

Video

[spvideo]youtube or vimeo link[/spvideo]

Google Map

[map 
                lat="LATITUDE"
                lng="LONGITUDE"
                zoom="VALUE 1 to 10"
                maptype="map type"
                height="height in number"
            ]

Alert

[alert type="TYPE"]ADD_CONTENT_HERE[/alert]

type=warning, danger, success, info

Quote

[quote align='align' source='source']content[/quote]

align=left, right

Extensions

Unite Revolution Slider Module

[Link] [Docs] : This is a commercial extensions and you can only use this along with this template for only 1 project.

This template uses Unite Revolution Slider (valued at 25$). For more information, tutorials and documentation, please visit UniteCMS website. Your job is to make new slider and config it. The slider settings UI is easy to follow. Bellow image shows single slide edit screen.

Main Menu > Components > Unite Revolution Slider 2

BT Google Maps Module

The parameters are divided into the following areas:

SP Price Table Module

From Basic option we fixed the Plan Name, Plan Price, Plan Details, Plan Signup, Signup Link. Here is another option for make the table featured. We do the same to the others, like Plan 2, Plan 3. Here is another option for select the logo also.

SP Portfolio Module

A brand new module, SP Portfolio(updated version) comes with Huge efficiency that lets you to build your own portfolio within few minutes.

For this latest awesome portfolio users have to create a new category. Then create some new article for the portfolio under this category.

After doing this users have to fixed the portfolio settings from basic, layout and advanced option.

Option In this template we fixed the category by portfolio. And also fixed the column, count and others necessary settings from here.

Layout From layout settings we fixed the Module Layout by Default and select other settings which is necessary for this template.

ST Fancy Icon Boxes Module

Config: Icon(FontAwesome), Title, Desctiption, Link

ST Parallax Module

You can config for background parallax, content can load text or load module

ST Partner Module

You can add unlimit partner: name, link, logo

ST Team Module

You can add unlimit member of your team: name, image, description, position, website, email, social

ST Testimonial Module

You can add unlimit testimonial: name, image, description, position, website, email, social

Home Page Build Example

While configurating extensions may messing you up, here we will provide an example configurations and settings to make homepage looks like our demo. Before we start, let's make a template style by goto Template Manager, open up this theme style settings (choose the default one), type a new style and save as copy.

Creating Layout

Go to Layout Tab in your Template Style Manager and make something Like this. Maybe you won't need to do anything because the default Style on the template was already made it.

Module Position

Main Menu > Extensions > Module Manager, Filter: slide, about,...

Menu settings

Menus > Main Menu

Example for "Service" menu

On menu "Service" select Menu Item Type: External URL, link: #sp-service-wrapper

service is section on template layout builder

If you have inner page please make sure full link to section example: http://yourdomain.com/#sp-service-wrapper

Effect settings

Main Menu > Extensions > Template Manager > Mikon, select layout tab

You need add class "wow animate_class" for custom class (row or col)

animate_class you can see here Animate Css

Last Words

Thanks for purchase our template, hope you happy with it. And if you need any support or have any question please visit out support forum or email to us.