Orta Theme Documentation

In this page you can read detailed documentation about our fully responsive Orta Theme.

A) System Requirements

Please make sure that your hosting (server) meets the minimum requirements of Joomla CMS. Otherwise you may have errors or problems during the installation or usage of the template.


B) Template Files (Contents of the Package) - top

In the download section (or downloaded package for single-purchases) you will see:

ot_orta.zip

Standard Joomla 3.x and Joomla 2.5 template installation file. You can install this package directly from your admin panel (Extensions > Extension Manager). Then you can assign your new template as default from Extensions > Template Manager page.

ot_orta_demo.zip

Joomla 3.x quickstart demo package. You can use this package to have a website just like our demo site with its contents, modules, articles, menus etc.

You CAN NOT install demo (quickstart) package directly from your admin panel. You need to unzip and install this package just like a fresh Joomla installation. This package contains all Joomla core files and folders with other required files of the template.
There is no Joomla 2.5 quickstart package since Joomla officialy doesn't support Joomla 2.5 anymore. If you have a Joomla 2.5 site it's strongly recommended to update to Joomla 3.x versions as soon as possible.

mod_optimum_slider.zip

This module is used for the various part of the template: main slideshow, masonsry dynamic grid and "our team" slideshow modules. If you install quickstart package then you don't need to install this module. Otherwise you can install this module just like any other Joomla extension, direclty from Extensions > Manage part of the admin panel. Please read this documentation for more usage instructions.

C) Installation Instructions - top


D) Extension(s) - top

In this theme we used one 3rd party extension:

Optimum Slider

As we instructed above you need to have Optimum Slider module installed on your site. Then you can see details below:

Main slideshow module

On the page Optimum Slider is used as main slideshow module. You can login your Joomla site's admin panel and navigate to Extensions > Manage and if you already don't have Optimum Slider set then create an instance by clicking New button from the top left of the page. Choose Optimum Slider from the list.

Then you can choose Slideshow as slide style.

Slide Style

And click on the Slider Settings tab and you will see all available options for the slideshow. Here is a quick overview of our demo:

Slideshow Module

And click on the Sliders tab to add new slide items or manage current ones.

Slide Item

After adding your slideshow items, you can publish your module on feature-a module position. And choose your menus from the Menu Assignment tab.

Masonry Dynamic Grid module

On the home page you also can see a eye-catching masonry grid module. You can choose Grid as slide style from the module settings.

Grid Layout

Then click on the Slider Settings tab and here is the screenshot from our demo site's settings:

Grid Module

And you can add your slide items from Sliders tab.

Grid slide details

In the Filter field you need to specify a filter word to gather other items under the same tab. You can publish your module on any module position and we pubished it on top-a module position on our demo site.

Our Team slideset module

You can choose slideset type for your module and here is the Slider Settings that we set on our demo:

Slideset

Then click on Sliders tab and create your slide items by entering a slide name and an image. Also please note that we added uk-margin-remove module class suffix for this module. You can enter class names for your modules from your template's setting page, under Modules tab.

E) Module Positions & Variations - top

Module Positions & Styles

You can see the all available module layouts from the image below. You can publish up to 6 modules on each blocks.

Module Layouts

As you can see from the image, there are 4 different layout types: parallel, stacked, first-doubled and last-doubled. You can specify these types for each blocks from the template settings page, under the Layout tab.

Parallel
Parallel is the default layout type. When this type is set for the block, all modules are displayed side by side up to 6 modules.
Stacked
When this type is set for the block, each module covers 100% width of the block, so each module is displayed one under the other (stacked vertically).
First-Doubled
When this type is set for the block, the first module (at the very left side) have double-width.
Last-Doubled
When this type is set for the block, the last module (at the very right side) have double-width.

Module Variations

There are 8 different module styles. You can choose any module variation for any specific module. Just navigate to Extensions > Template Manager > ot_orta page.

Then click on the Modules tab from the left sidebar. On this page you see all available modules that created on your site, you can filter them by position or you can search them by titles.

Find your module from the list and then make your selection from the dropdown list located in Style column.

Module Styles

Here is the module styles list:

  • Box
  • Box Primary
  • Box Secondary
  • Box Gray
  • Box Gray Dark
  • Header
  • Space
  • Blank

F) General Notes on Template Usage - top

We are going to share some usage instructions with you. But the best way to see how we built this template and its contents is to install quickstart (demo) package to your local or remote server. Then you can check all admin panel, modules, menus etc. Also you can check video tutorial section for detailed instructions.

Logo management

On our Warp Framework powered templates, logos are Custom HTML modules. So it's very easy to manage and change them. Navigate to Extensions > Module Manager page in the back-end. If you installed Quickstart (demo) package then you can search for logo word. You will see 2 Custom HTML modules are listed, one for standard logo and one for the logo for small screens. You can open these modules and change their contents according to your needs.

If you didn't install quickstart (demo) package and you need to create logo module yourself, then click on the New button in Module Manager and choose Custom HTML module type. Then add your logo image (or whatever content you want) for the logo area. Choose logo position for standard logo and create another Custom HTML module with smaller image and publish it on logo-small module position for small screens (mobile etc).

Before adding your logo images to your Custom HTML module, you can choose No Editor or CodeMirror as your default editor from Global Configuration of your Joomla site. Then add your logo images. Otherwise your editor would add p (paragraph) tags to your logo and this may cause problems.

Layouts & Profiles

Thanks to advanced Warp framework, you can create unlimited profiles for your template. Thus you can assign different settings to each profile and then you can assign each profile to any menu item. So you can have different template parameters (settings) on different menus (pages).

  1. Navigate to Extensions > Template Manager > ot_orta
  2. Click on the Options tab
  3. Click on the Layouts tab from the left side panel.
  4. Then check the first dropdown list. Choose frontpage profile instead of default profile. Now you can change the parameters and settings on this page and it will effect only the menu items that frontpage profile is assigned.
Profiles

If you don't have a frontpage profile, just click on the Add button to create one and specify a name for your new profile. Then you can assign your profile to any menu items from the assignment field which is located at the bottom of the page.

Sidepanel (offcanvas) module

Our template has an eye-catching module position which is located on off-canvas. If a visitor click on the toggle button, this module position slides in the screen with it contents (modules). You can enable this feature from template's setting page:

Sidepanel

Also you can specify an icon for the toggle button. Just type the icon name in the text field. You can see all available icons from Icons page.

After activating this feature, you only need to publish your module(s) on sidepanel module position.

Our templates that based on Warp Framework also has an offcanvas module position to display menu module for small screens (phone, tablet etc). You don't need to active this feature since it's already activated. Only you need to publish a menu module on offcanvas module position.

G) Custom HTML Codes - top

On our templates we publish some codes within Joomla's core Custom HTML module. Here is the custom html codes we used on this template:

"Quote of the Day" module content

On our demo site we have a quote article published on homepage. You can create an article and use the following code:

		
<div class="uk-width-3-4 uk-container-center uk-margin-large-top uk-text-center">
  <h2>Quote of the Day</h2>
  <p class="uk-article-lead uk-margin-top">They asked me about my job, web design. What I can say is I really love this job and this is why became so successful. If you are willing to be successful then it's the key to love what you are doing and your job. But unfortunately everyone is not that lucky.</p>
  <div><span class="uk-icon-quote-left uk-icon-large"></span></div>
  <h5>Enes Ertugrul</h5>
</div>
	

Pricing Table

As we did on Pricing Table page, you can display unlimited pricing tables on your contents (articles, modules etc) with the following HTML code:

	
<div class="uk-grid uk-margin-large" data-uk-grid-margin="">
  
  <div class="uk-width-medium-1-3 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <div class="pricing-table">
      <div class="plan-name"><span>BASIC PLAN</span></div>
      <div class="price">19€</div>
      <ul class="uk-list uk-list-line">
        <li>Un-limited downloads</li>
        <li>Access to support forum</li>
        <li>7/24 phone support</li>
        <li>Bonus products each month</li>
      </ul>
      <div class="plan-button"><a class="uk-button half-button" href="#"><span><i class="uk-icon-sign-in"></i> JOIN NOW</span></a></div>
    </div>    
  </div>
  
  <div class="uk-width-medium-1-3 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <div class="pricing-table featured">
      <div class="plan-name"><span>GOLD PLAN</span></div>
      <div class="price">29€</div>
      <ul class="uk-list uk-list-line">
        <li>Un-limited downloads</li>
        <li>Access to support forum</li>
        <li>7/24 phone support</li>
        <li>Bonus products each month</li>
      </ul>
      <div class="plan-button"><a class="uk-button half-button" href="#"><span><i class="uk-icon-sign-in"></i> JOIN NOW</span></a></div>
    </div>    
  </div>
  
  <div class="uk-width-medium-1-3 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <div class="pricing-table">
      <div class="plan-name"><span>PLATIN PLAN</span></div>
      <div class="price">39€</div>
      <ul class="uk-list uk-list-line">
        <li>Un-limited downloads</li>
        <li>Access to support forum</li>
        <li>7/24 phone support</li>
        <li>Bonus products each month</li>
      </ul>
      <div class="plan-button"><a class="uk-button half-button" href="#"><span><i class="uk-icon-sign-in"></i> JOIN NOW</span></a></div>
    </div>    
  </div>
  
</div>	
	

About Us - Our Team page

As we did on About Us - Our Team page, you can display your team members or any person's profile with custom links in your contents (articles, modules etc) with the following HTML code:

	
<div class="uk-grid our-team" data-uk-grid-margin="">
  <div class="uk-width-medium-1-4">
    <div class="uk-panel uk-panel-box uk-panel-box-gray">
		<div class="uk-panel-teaser">
        <figure class="uk-overlay uk-overlay-hover">
          <img src="/demo/joomla/2015/july/images/optimum/team-1.jpg" alt="">
            <figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
              <div>
                <p class="uk-text-large"><strong>Firat Suer</strong></p>
                <p>
                    <a href="#" class="uk-icon-button uk-icon-github"></a>
                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                    <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                    <a href="#" class="uk-icon-button uk-icon-html5"></a>
                </p>
                <p><strong>CEO / Founder</strong></p>     
                <a hrf="#" class="uk-button uk-button-primary">Details</a>
              </div>
            </figcaption>
         </figure>
      </div>
	     <h4 class="uk-text-center name">Firat Suer</h4>
    </div>
    <h3>His Skills</h3>
    <div class="uk-progress">
      <div class="uk-progress-bar" style="width: 40%;">HTML & HTML5</div>
    </div>
    <div class="uk-progress uk-progress-warning">
      <div class="uk-progress-bar" style="width: 84%;">CSS & CSS3</div>
    </div>
    <div class="uk-progress uk-progress-success">
      <div class="uk-progress-bar" style="width: 62%;">JS & jQuery</div>
    </div>
  </div>
  <div class="uk-width-medium-1-4">
    <div class="uk-panel uk-panel-box uk-panel-box-gray">
		<div class="uk-panel-teaser">
        <figure class="uk-overlay uk-overlay-hover">
          <img src="/demo/joomla/2015/july/images/optimum/team-2.jpg" alt="">
            <figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
              <div>
                <p class="uk-text-large"><strong>Zehra Bulut</strong></p>
                <p>
                    <a href="#" class="uk-icon-button uk-icon-github"></a>
                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                    <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                    <a href="#" class="uk-icon-button uk-icon-html5"></a>
                </p>
                <p><strong>Developer</strong></p>
                <a hrf="#" class="uk-button uk-button-primary">Details</a>
              </div>
            </figcaption>
        </figure>
      </div>
      <h4 class="uk-text-center name">Zehra Bulut</h4>
    </div>
    <h3>Her Skills</h3>
    <div class="uk-progress">
      <div class="uk-progress-bar" style="width: 95%;">PhotoShop</div>
    </div>
    <div class="uk-progress uk-progress-warning">
      <div class="uk-progress-bar" style="width: 84%;">Adobe Illustrator</div>
    </div>
    <div class="uk-progress uk-progress-success">
      <div class="uk-progress-bar" style="width: 72%;">After Effect</div>
    </div>
  </div>
  <div class="uk-width-medium-1-4">
    <div class="uk-panel uk-panel-box uk-panel-box-gray">
		<div class="uk-panel-teaser">
        <figure class="uk-overlay uk-overlay-hover">
          <img src="/demo/joomla/2015/july/images/optimum/team-3.jpg" alt="">
            <figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
              <div>
                <p class="uk-text-large"><strong>Murat Tekin</strong></p>
                <p>
                    <a href="#" class="uk-icon-button uk-icon-github"></a>
                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                    <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                    <a href="#" class="uk-icon-button uk-icon-html5"></a>
                </p>
                <p><strong>Lead Designer</strong></p>
                <a hrf="#" class="uk-button uk-button-primary">Details</a>
              </div>
            </figcaption>
        </figure>
      </div>
	    <h4 class="uk-text-center name">Murat Tekin</h4>
    </div>
    <h3>His Skills</h3>
    <div class="uk-progress">
      <div class="uk-progress-bar" style="width: 90%;">HTML & HTML5</div>
    </div>
    <div class="uk-progress uk-progress-warning">
      <div class="uk-progress-bar" style="width: 84%;">CSS & CSS3</div>
    </div>
    <div class="uk-progress uk-progress-success">
      <div class="uk-progress-bar" style="width: 72%;">JS & jQuery</div>
    </div>
  </div>
  <div class="uk-width-medium-1-4">
    <div class="uk-panel uk-panel-box uk-panel-box-gray">
		<div class="uk-panel-teaser">
        <figure class="uk-overlay uk-overlay-hover">
          <img src="/demo/joomla/2015/july/images/optimum/team-4.jpg" alt="">
            <figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
              <div>
                <p class="uk-text-large"><strong>Murat Tekin</strong></p>
                <p>
                    <a href="#" class="uk-icon-button uk-icon-github"></a>
                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                    <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                    <a href="#" class="uk-icon-button uk-icon-html5"></a>
                </p>
                <p><strong>Lead Designer</strong></p>
                <a hrf="#" class="uk-button uk-button-primary">Details</a>
              </div>
            </figcaption>
        </figure>
      </div>
	    <h4 class="uk-text-center name">Seda Acar</h4>
    </div>
    <h3>Her Skills</h3>
    <div class="uk-progress">
      <div class="uk-progress-bar" style="width: 90%;">HTML & HTML5</div>
    </div>
    <div class="uk-progress uk-progress-warning">
      <div class="uk-progress-bar" style="width: 84%;">CSS & CSS3</div>
    </div>
    <div class="uk-progress uk-progress-success">
      <div class="uk-progress-bar" style="width: 72%;">JS & jQuery</div>
    </div>
  </div>
</div>	
	

If you install template's quickstart (demo) package, you can visit UIkit article from Article Manager and see all other elements' codes.

If you have problems to make your template look like our demo site, the please first install our quickstart demo package and edit it as you wish. Or see how we manage to do it and then apply to your own site.

Wednesday, 07 October 2015 Posted in 2015 Templates