Gunce Theme Documentation

In this page you can read detailed documentation about our June 2015 Fully Responsive Gunce 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_gunce.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_gunce_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.

gunce_easyblog.zip

This is the custom EasyBlog theme for Gunce template. To activate this theme please unzip it first to your local computer. Then upload /gunce folder to the following directory of your Joomla installation:

/components/com_easyblog/themes/

Then login your admin panel and navigate to Components > EasyBlog > Themes page. Find Gunce in the themes list and assign it as default template by clicking the start icon just near its name. That's all.

EasyBlog Component

Please note that EasyBlog 5 is a paid (commercial) extension and not included in the demo (quickstart) package. You need to purchase it separately. You can use BLOGTHEME discount code to purhcase it with 20% discount from StackIdeas.com website.

C) Installation Instructions - top


D) Extension(s) - top

In this theme we used one 3rd party extension:

EasyBlog 5

As we stated above EasyBlog 5 component is not included in the template download packages since it's a paid extension. So you need to purchase it separately from StackIdeas.com. You can install it on your site as other standard joomla extensions. Please refer to EasyBlog documentantation for further and detailed instructions.

After you install the EasyBlog 5 on your site please follow the instructions below to have a similar look like our demo:

Thumbnail size

We set thumbnail size as 760 x 450px on Gunce theme's demo. So you can login your backend and navigate to Components > EasyBlog > Settings > Media > General tab and there you will see Thumbnails options. Please set Maximum width as 760 pixels and Maximum height as 450 pixels. You can change quality value as you want.

EasyBlog Thumbnails Settings

Image Wall module on bottom-c position

On demo site's bottom-c position we published EasyBlog's Image Wall module.

Image Wall

Here is the settings for that module:

Image Wall Module

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 3 different layout types: parallel, stacked, 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 left side) have double-width.

Module Variations

There are 7 different module styles. You can choose any module variation for any specific module. Just navigate to Extensions > Template Manager > ot_gunce 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
  • Header
  • Space
  • Blank

Module Suffixes

Also you can use the following module suffixe(s) (type them in the Class column in template options > under Modules tab):

To add border bottom with another coloured line:

border-bottom
You can use multiple class suffixes at the same time. In that case do not forget to put a space between the class names.

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 you can use the following HTML code:

		
<div class="logo-text">Gunce Theme</div>
<div class="uk-h4 uk-text-secondary"><i class="uk-icon uk-icon-book"></i></div>
<div class="site-slogan">my personal blog</div>			
		
	

Publish your module on logo position. You can create another instance (copy the previous one) and publish it on logo-small position for small screen (mobile) devices.

If you want to add your logo as an image insteas of text you can add your images via your editor or as an HTML code.

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.

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_gunce
  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:

Author Module with Profile Image (sidebar-a)

On our demo site we have an author Profile module. You can create a Custom HTML module and use the following code:

		
<div><img class="uk-border-circle author-border uk-animation-hover uk-animation-scale uk-animation-reverse" src="/PATH_TO_THE_IMAGE" alt="Avatar" width="200" height="200"></div>
<p class="uk-text-muted">This is my personal blog. You can find my opinions on different topics and my memories.</p>
<h3 class="uk-panel-title">Ayten</h3>
	

Social Icons on sidebar (sidebar-a)

On demo site's home page, there is a Custom HTML module published on sidebar-a position which displays 8 different social icons. Here its code:

	
<div class="uk-margin-top uk-text-center">
  	<div class="uk-margin">
      <a href="#" class="uk-icon-button uk-icon-tumblr"></a>
      <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
      <a href="#" class="uk-icon-button uk-icon-github"></a>
      <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
    </div> 
  	<div class="uk-margin">
      <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-facebook"></a>
      <a href="#" class="uk-icon-button uk-icon-vine"></a>
	</div>
</div>
	

You can visit Icons page to see all available icons.

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 uk-button-secondary" href="#"><i class="uk-icon-sign-in"></i> JOIN NOW</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 uk-button-primary" href="#"><i class="uk-icon-sign-in"></i> JOIN NOW</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 uk-button-secondary" href="#"><i class="uk-icon-sign-in"></i> JOIN NOW</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-3">
    <figure class="uk-overlay uk-overlay-hover">
      <img src="/demo/joomla/2015/june/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>
     <h4 class="uk-text-center name">Firat Suer</h4>
    <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-3">
    <figure class="uk-overlay uk-overlay-hover">
      <img src="/demo/joomla/2015/june/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>
    <h4 class="uk-text-center name">Zehra Bulut</h4>
    <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-3">
    <figure class="uk-overlay uk-overlay-hover">
      <img src="/demo/joomla/2015/june/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>
    <h4 class="uk-text-center name">Murat Tekin</h4>
    <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>	
	

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.

Sunday, 26 July 2015 Posted in 2015 Templates