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)
 
 
 

Overview

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.

topslider


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.

For 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.
Also you should replace the language file, sometimes it's not necessary(bug fix update), but if it's 'upgrade version' it's better to do it, because if template has new features you will see something like this 'TPL_ORION_MINTAKA_ANIMATION' instead of text, or when nothing was added the existing text could be changed. 

To replace language file you should copy the file 'en-GB.tpl_(template_name).ini' from unzipped folder template_name/language/en-GB/ to your_site_root_folder/language/en-GB/

All your settings will be saved.

 


 

Tip - Hidden test page online for testing and debugging

If you need to have a page out of the menu for no one could see it exept ones who has a direct link you can do the hidden page(for example for setting or show it to our support)

There's a few ways how to do it, but we usually do a hidden menu as when we design sites we have not the only test page, usually much more.

Method One - do the hidden menu.

1. Do a new menu, call it - hidden
2. Do new module, the type - "menu", name it "hidden" select hidden menu you did and assign to any position you like(we usually do it in the footer)
3. Important - Set access for "Super Users" not "Public" for no one could see the menu exept you(you should be logged in)
4. Add as many test pages as you want, no one could see the menu, but all pages you have there will be online for you and if you give a direct link to anyone.

Method two - system link(quick one).

1. Add new menu item(article), call it as you wish, save it without closing and important - the menu item should be unpublished, simply switch the status to "Unpublished" before to save.

2. Copy link from "Link" field - will be something like index.php?option=com_content&view=article&id=77
url of your test page wll be your site+system link for example yoursite.com/index.php?option=com_content&view=article&id=77

In both cases you can assign templates and modules to test pages for setting and debugging.
To make them active and visible then you should move menu item from hidden menu in first method or change the status to "published" in second one.

Add comment


Security code
Refresh