Note: This section is still at the stage of filling with content... Please be patient:)
(The order of filling is about  fallowing: Article about most used functions first, less used ones later. Created articles have shorter description at the beginning and will be edited and expanded later. If you have any questions please leave in comments.)

Note2: The framework is in the active development and it means your version or current version can slightly differ(descriptions and esspecially screenshots)

Recently added docs and Updates

2017 April 15
Added Header docs(header main elements docs - Logo and Navigation bar follows )

2017 April 10
Added Icon Modules docs

excuse our grammar errors(English is not our native language) - we have Andrew(native Londoner) to fix them - but he is lazy



This documentation for framework - OrionKit2, template done on this framework is Orion Rigel and Orion Belt(ver 2) will be updated with it soon(for now it has old structure, but most functions are similar, just a little different)
OrionKit 2 is a stand alone kit of of tools and libraries which is located in the template folder.

Template/Framework Structure

structurecss- standard Joomla! template folder for Cascading Style Sheets.
fonts - additional folder for stand alone fonts - Roboto and Font Awesome
html -  standart Joomla! template folder for overriding template elements
images - Standard Joomla! template folder
js - standard Joomla! template folder for js scripts
layouts - main template parts of layout
orionkit - framework
in the root - Joomla! standart template files, php, xml, png

Orionkit directory has the files which usually are not changed depending on templates, there are additional xml files for template configuration objects which render template elements like module sections, preloader, iconmodules OK-elements etc custom form fields helpers.

You do not need to know about all of the items, all you need to know is what will help you understand and use all power of the template and how to configure all the elements of framework.



Top Slider

Top Slider is a hidden container with module position "topslider", it's very top above header,  always hidden, and slide down when a user click an open button.

What is it for?
Any kind of module you want, which should be hidden but good visible as its click button is always top center, for example, announcment, note, warning, disclaimer, login, share buttons or any other which you think is the best place for it..

This element has the fallowing features:

  • 1-4 parallel modules
  • customizing backgrounds of container and button
  • text fields for open and close buttons

How to customize topslider.
go to Extensions > Templates > your template
Select the tab Template Customizing and click Top Slider Customizing
In this window you can change background and color, and chemge the text for open and close button.
Modules style means:
boxed - your modules will be in white box but outside background will be which you did(default is white)
Clean is - no any boxes and colors you did.


OK Elements

OK Elements are the different elements like an Email, Telephone etc which you can display in different parts of template, all you need is - select it in the dropdown list of the template style settings. Depending of template it can have two or more places where you can use OK Elements.

For now framework has the following elements to select:

  • Email
  • Telephone
  • Both Email and Telephone
  • Follow Us(Social Media Icons)
  • Icon Modules

some more are in development...

Screenshot - selection an element to display on topbar left

select element

Follow Us(Social Icons)

It's a simple element where you can add links to your account in the social medea(twitter, facebook, youtube etc). It can be displayed as icons or buttons with icons and captions.
Note: Option 'display as button' you can use only if you have maximum 3 links(there's no space enough to display more - the exception is if you display it on the footer only)

Screenshot - icons only

social 01

Screenshot - buttons

social 02

First you need to add your urls in Extensions > Templates > Your_template / Extra Elements / Social

Screenshot - select option how to display and add urls

social 1


Then you can place this element in any available place(Template Customizing tab) simply select it in the list, depending of templates it can have 2-4 places.
Example - you can select it in topbar left and footer.

Screenshot - add to available place

social 2

Email / Phone(coming soon....)

Icon Modules

Icon module is a hidden container for module position, which can be a dropdown or modal(Pro). You should assign any module to position iconmodule-1,2,3 etc and set the view of icons.

idrop 1 idrop 2

idrop 3By default we have 4 preset nodules with icons Search, Login, Share, Bars(usually means menu), but you can change icons as you wish or add more(up to 10).
Note: if you add more icons don't forget to enter FA(Font Awesome) class or you icon will not b displayed.

Icons use the Font Awesome(fa) classes. All you need is to write down FA class into FA icon field
We didn't do it as a select list as it will be too long(it has 675 icons).

A short list of most used icons we have in dashboard(see screenshot right) - just copy/past any.

If you need more icons you should do the following steps:

idrop 4

See screenshot  example how to find fa class(official site of Font Awesome) - it's 2nd class in class attribute of code after "fa"


idrop 5

Sections(coming soon....)

Dotnav(coming soon....)

How do do different styles for different pages.

Fer example, you want to have tamplate for inner pages with right side-bar and thin header, but want to have homepage without sidebars and content(only module sections), big header and dot navigation(home page demo - no content, sections only + dot navigation).

All you need is set template with the different styles.

  • For inner pages use default style.
  • Then click 'Save as copy', and call it for example 'Home'.
  • Assign it on home page.
  • Set as you with.

making new style


Now you have 2 different template styles 'Home' will be on home page only, 'Default' for the rest of pages.
Same way you can do as many pages(styles) as you wish - for example exept Home page and article pages you can do separate style for gallery, forum, sign up etc

See screenshot

making new style 2

How to update template

As every extensions the templates can have the updates, and it's better for you to update it when you get notifications. Notification you can see in the template dasboard, but as you can not enter it for long we send a newslatter as well(you should be register).

The update can be done when:

  • Common update - Any bugs found and fixed
  • Upgrade - we improved or added new functions

Joomla! templates can not be updated like the other extensions via Extension or Update manager.

There's 2 methods to update:

  1. Uninstall and install again(not recommended)
  2. Overwrite existing template via FTP(recommended)

1st can be done via Extension manager(Extensions > Manage > Manage and Extensions > Install), but if you use this method you will remove all your settings, and it's especially bad if you have a few styles for different pages.

2nd is simply unzip template package and upload template folder to your site > templates > template-name folder.
All your settings will be save.

Add comment

Security code