Renkli Theme Documentation

In this page you can read detailed documentation about our fully responsive Renkli 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_renkli.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_renkli_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.

mod_optimum_slider.zip

This module is used for the various part of the template, like: Portfolio animated module on home page and Portfolio dynamic grid page. 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 about this module.

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:

Portfolio -animated- module on home page (Our Portfolio module)

On the home page page Optimum Slider is used as cross-blocks module which has images and contents. 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 from the settings of the module you will see Slide Style as dropdown list, you can choose Block as slide style.

Slide Style

And click on the Slider Settings tab and you will see all available options for the slideshow. In case you don't see such a tab, please save your module once. From this tab you can set your module's general settings such as "enable animation" etc.

And click on the Sliders tab to add new slide items or manage current ones. Do not forget to click on the Save button which is located top-right corner of the each slide item to save your slides before saving the module.

Slide Item

After adding your slideshow items, you can publish your module on any module position (on the demo it's published on top-a). And choose your menus from the Menu Assignment tab.

Masonry Dynamic Grid module

On the Pages > Protfolio 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.

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 comparing others.
Last-Doubled
When this type is set for the block, the last module (at the very right side) have double-width comparing others.

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

Additionally you can specify title-border module class suffix to add a colorful border-bottom to your module titles (see image below).

title border

And you can add title-center module suffix to center your module titles.

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.

Page suffixes

Navigate to your site's admin panel and follow Menu > Main Menu > Home and click on Page Display tab and fill in the Page Heading field with a desired page title (on the demo we used Latest From Blog) and fill in the Page Class field with home-page suffix. Thus your title will be displayed just like our demo template (see image below).

home title

On the template's demo site, as home menu item's type Featured Articles is used. Please do not forget to add your articles' images from Images and Links tab of the articles. You can specify your article images from Intro Image media field.

Parallax

There is an eye-catching parallax background image effect on the parallax module position. To have same effect on your side, you just need to publish at least one module on parallax position, that's all. But if you want to change parallax background's image, you can upload your own image to following path with the same file name:

/templates/ot_renkli/images/parallax.jpg

Make sure that your image size is large enough to have a good parallax effect.

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
On Renkli Theme we used uk-icon-exchange icon.

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 of UIkit framework.

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:

Main intro module on home page

On our demo site we have a custom HTML module on home page at the very top of the page (pulished on feature-a position with the following code:

		
<span class="uk-icon-quote-left uk-icon-background uk-text-white"></span>
<h1 data-uk-scrollspy="{cls:'uk-animation-slide-top', delay: 300}">THINK. PLAN. WORK. FINISH.</h1>
<div data-uk-scrollspy="{cls:'uk-animation-slide-top', delay: 600}">  
<p class="uk-article-lead">We design solutions for digital interactions.</p>
<p class="uk-article-lead">With its approach, our team generates extraordinary value for brands through innovative design.</p>
</div>
	

As you can guess codes between span tags at the very top of the code is for the big transparent icon placed in the background. You can change icon as you want from available icons on Icons page of UIkit framework

Also you can define any animations for each elemnt from UIkit's Scrollspy component.

Pricing Table on home page and Pricing page

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

	
<!-- Pricing Table Starts Here -->
<div class="uk-grid pricing-tables uk-grid-collapse uk-margin-large" data-uk-grid-margin data-uk-scrollspy="{cls:'uk-animation-fade', delay:500}">
  
  <div class="uk-width-medium-1-3">
    <div class="pricing-table">
      <div class="plan-icon"><span class="uk-icon-bookmark"></span></div>
      <div class="plan-name"><span>BASIC PLAN</span></div>
      <div class="price">19€</div>
      <ul class="uk-list">
        <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-primary uk-button-large uk-button" href="#"><span>JOIN NOW</span></a></div>
    </div>    
  </div>
  
  <div class="uk-width-medium-1-3">
    <div class="pricing-table">
      <div class="plan-icon"><span class="uk-icon-paper-plane"></span></div>
      <div class="plan-name"><span>GOLD PLAN</span></div>
      <div class="price">29€</div>
      <ul class="uk-list">
        <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-primary uk-button-large uk-button" href="#"><span><i class="uk-icon-sign-in"></i> JOIN NOW</span></a></div>
    </div>    
  </div>
  
  <div class="uk-width-medium-1-3">
    <div class="pricing-table">
      <div class="plan-icon"><span class="uk-icon-rocket"></span></div>
      <div class="plan-name"><span>PLATIN PLAN</span></div>
      <div class="price">39€</div>
      <ul class="uk-list">
        <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-primary uk-button-large uk-button" href="#"><span>JOIN NOW</span></a></div>
    </div>    
  </div>
  
</div>
<!-- // Pricing Table Ends Here -->	
	

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="/[PATH_TO_YOUR_IMAGE]" 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="/[PATH_TO_YOUR_IMAGE]" 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="/[PATH_TO_YOUR_IMAGE]" 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="/[PATH_TO_YOUR_IMAGE]" 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>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p class="uk-article-lead uk-margin-large-top">Would you like to work with us? So check the informations below:</p>
<div class="uk-grid" data-uk-grid-margin>

    <div class="uk-width-medium-1-3">
        <ul class="uk-list uk-list-space">
          <li><i class="uk-icon uk-icon-check"></i> Pellentesque habitant morbi</li>
          <li><i class="uk-icon uk-icon-check"></i> Ultricies eget, tempor sit amet</li>
          <li><i class="uk-icon uk-icon-check"></i> Donec eu libero sit amet quam egestas</li>
        </ul>
    </div>

    <div class="uk-width-medium-1-3">
        <ul class="uk-list uk-list-space">
          <li><i class="uk-icon uk-icon-check"></i> Pellentesque habitant morbi</li>
          <li><i class="uk-icon uk-icon-check"></i> Ultricies eget, tempor sit amet</li>
          <li><i class="uk-icon uk-icon-check"></i> Donec eu libero sit amet quam egestas</li>
        </ul>
    </div>

    <div class="uk-width-medium-1-3">
        <ul class="uk-list uk-list-space">
          <li><i class="uk-icon uk-icon-check"></i> Pellentesque habitant morbi</li>
          <li><i class="uk-icon uk-icon-check"></i> Ultricies eget, tempor sit amet</li>
          <li><i class="uk-icon uk-icon-check"></i> Donec eu libero sit amet quam egestas</li>
        </ul>
    </div>
</div>

<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-1">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center">
            <p><strong>Join our team now</strong> We can do great things all together. Get your place in our team today<a class="uk-button uk-button-outline uk-margin-left" href="#" target="_blank">GO</a></p>
        </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.

Friday, 26 February 2016 Posted in 2016 Templates