What is exactly a QuickStart Installation provided on your template and how do i install it?

The QuickStart package included all the files needed to install joomla 1.5/1.6/1.7 latest stable version, our template, components, modules and plugins, also the sql dump content included to set the template exactly like we show on the demo showcase.

QuickStart = Joomla 1.5/1.6/1.7 + gk template + components, modules and plugins + sql demo content.

How to install?

Just create a new database, unpack and upload all the files available inside of the quickstart folder to your Joomla! website. Them make a normal Joomla! installation and login into your administrator panel using “admin” as username and “demo” as password.

Exact step by step Quickstart installation process will be found here (Joomla! 1.5) and here (Joomla! 1.6/1.7).

Quickstart package installation is the best solution when we create a website from the basis, we want to be acquainted with template’s possibilities or we want to customize a template to our needs before it will be installed on the proper website. In all these cases, a Quickstart installation is more convenient rather than template’s installation itself.

Template’s installation is recommended when you want to modify an existing website and you cannot prepare its content once again. You have to remember here that a migration from one template to another one (we are talking about templates of different providers) is connected with at least reconfiguring modules settings because module positions differ significantly among different template providers.

In the case of Joomla! 1.7/2.5, template’s installation is connected with copying some settings basing on setting from a Quickstart package. There is one reason, when resigning from params.ini files, it is impossible to move settings in template’s package; they are available from database level and some settings cannot be specified because of some XML format restrictions which is used for template’s options description.

One of the greatest changes in Gavern 3.0 is redesigned ‘Layouts’ tab. This part brings more functionalities and improvement user interface in managing template layouts.

This tab is divided into two main parts:

• Template width
• Template columns

Template width option allows a user to specify width of the template, this value can be set in percents or pixels. In the first case, template width should be given with '%' suffix like: '98%'. When you set template width in pixels, please remember to add 'px' after number value. (e.g. '1020px')

Template columns area can be used for setting different width for every template position. All values in this form are set in percents and have effect to a whole template.

To specify width for particular template positions, a user needs to click on a proper position name in a simplified module positions grid area, then every module position width in selected row can be changed. To save changes, users need to click ‘Save’ button after every change made. Remember, a sum of percentage values in every row should be equal 100%, so please check whether a pop-up window shows a message: ‘Current columns width: 100%’ in every row to avoid further layout problems.

BikeStore is a responsive template which has a layout completely different than the templates like Fashion or Music Free. In BikeStore we have decided to create a two column layout. At the “Layouts” section in the template back-end, you can find the following options:

The template structure is relatively simple:

The Top1, Top2, Bottom1, Bottom2 and Bottom3 module positions are specially prepared to store the modules in maximal four-column layout.

Let’s discuss the options available in the “Layouts” section:

• Body left/right padding – an option known from our other responsive templates – it is used to generate horizontal paddings in theelement.
• Template width – the maximal width of the template – for browser widths bigger than the tablet width files tablet.css and mobile.css are not loaded.
• Tablet width – second edge value for the used CSS files – for browser widths bigger than mobile width and smaller than tablet width it is loaded the tablet.css file.
• Mobile width – third and last edge value for the used CSS files – for browser widths lesser than this value are loaded files tablet.css and mobile.css
  Important!  The mobile.css file should contain only these values which are not set in the tablet.css file, because due specifying only the max-width in the media queries for the mobile devices the tablet.css file is also loaded.
• Box paddings – using this option you can specify paddings for the module boxes and for the mainbody. It is necessary to achieve proper spaces in the template layout.
• Sidebar position – you can specify the left column or the right column. Of course if there is no modules on the sidebar position then the sidebar is not loaded.
• Sidebar width – the sidebar width is specified in percents.
• Custom sidebar width – you can use this option to override the value of the sidebar width option for specific Item IDs or components (using the option address parameter value).

More information about the template options from other sections are available on other pages of this documentation.

Yes, we don’t include in our Quickstarts images (photos) from Template Demo. Instead we use blank “GK DEMO” images. We we assume that our customers have their own pictures, which better fit to their project goals. The images are not licensed to be distributed with the Gavick Quickstart.

But, don’t worry, because you can:
1) Use your own photos (legal & no costs).
2) Buy pictures from international microstock like shutterstocks, stockphoto etc.
3) Download licensed CC from Flickr or any other website.
4) Hire photographer or just ask your client for them.

In most cases in our demo quickstart sidebar column is on the right side by default, but using GK Template (Gavern Framework) settings you will be able to set:

• Sidebar position – between left or right values.
• Sidebar width – width value for sidebar area; changing the sidebar width also changes the mainbody area width.

Choose the best position that fit to your project goals or client needs. You can use the sidebar to add different types of content adding different kinds of modules.  Even put your Ad Sense ads on sidebar position using the Custom HTML module. Remember to save changes each time you would change template options.

GK Fest template (Joomla 2.5/Joomla 3.1) has been prepared primarily for websites for cultural events. Header section has been made using only styled text with nice guitar image, which can be replaced easily.

All text content is stored inside one Custom HTML module placed in “header” position, named also “header”. But to change it you have to disable WYSIWYG editor for a while, because sometimes it could delete/clean some our source code.

1. Go to User Manager and click on your account name, change your editor to “Code Mirror” or “No editor” and use Save button to apply changes.
2. Now you can go to : Module Manager -> find there a “Header” module and open it.
3. There you’ll all HTML code also for button label, event start and end date.

Guitar image (PNG 24-bit image with transparency to get better results) you should find here: templates/gk_fest/images/guitar.png

To show guitar image as background we used CSS:

.gk-animation .gk-guitar {
	background: transparent url('../images/guitar.png') no-repeat 0 0;
	height: 419px;
	position: absolute;
	right: 0;
	text-indent: -9999px;
	top: 30px;
	width: 187px;
	z-index: 2;
}

So if you want to change it to other picture you can simply replace PNG image (guitar.png) with yours (you can use this same filename) and override CSS to set right dimensions if it proves necessary.

Gray Map image in module background -> this file you’ll find also in template folder, here: templates/gk_fest/images/map.png

If you, but accident, deleted or broke original HTML code from module – don’t panic, here it’s (from J2.5 version):
<div class="gk-animation" data-height="530">
<div class="gk-animation-wrap">
<div class="gka-bg">Background</div>
<h2 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="200" data-time="500">Festival 21 Feb. - 27 Feb. 2012</h2>
<h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Festival Musico</h1>
<div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
<div class="gk-jscounter gk-scale-up" data-dateend="21-2-2015" data-timeend="19:42" data-timezone="+2" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="900" data-time="500">Counting finished!</div>
<div class="gk-guitar" data-start="{opacity: 0, right: '-200px'}" data-end="{opacity: 1, right: 0}" data-delay="900" data-time="450">Guitar</div>
<a href="#" class="gk-ticket" data-start="{opacity:0, top: '45px'}" data-end="{opacity:1, top: 0}" data-delay="1300" data-time="450">
<strong>Get a ticket</strong>
<small>Authentic Tickets on Time or Your Money Back!</small>
</a>
</div>
</div>

Some changes can be made via template configuration (info) but some not. So you will probably ask: How can I change the space between elements (paddings & margins), font size or capitalization of article titles in GK template(s) – these are a common questions during template customization, sometimes asked by your client. To answer  them, you have to do three steps: (1) check, (2) test and (3) implement changes.

We suggest you use: Firebug for Firefox or Firebug Lite for Google Chrome. Instead of having to make a CSS change, reload, make a change, reload you can just edit it live to see the results.

Installing Firebug in Firefox

In Mozilla FireFox, go to the Tools menu, select “Add Ons” and under “Get Add Ons” type “Firebug” in the search box. Click the Install button. You may need to restart Firefox after installation.

(1) Use firebug to check, click on the inspect icon. With HTML tab you can look at your CSS rules and see which ones of them are actually used on your website and which aren’t. Once you select the element, look in the bottom right hand corner of your firebug window. Here you will see the CSS elements and attributes of those elements that relate to the object you have selected on the website. To the right of each element you will see the Location of the CSS element in the document as well as the line it appears on.

(2) Test your modification using firebug live editing CSS properties. For example, here’s how we can see the effect of changing article appearance in the GK Rockwall template (space, color, uppercase).

Before (default view)

Right-click on this section of the web page and choose “Inspect element”. Firebug will immediately highlight this section in the bottom panel. Let’s start by changing the space between the Category & Date section and the title for K2 items.

Space between category/date and title

As you see this section is located in article header inside <ul> and we used margin: 0 0 32px; What this means is that the bottom margin has a default value of 32px.

Move your mouse over the value of the margin property, and change from 32px to 5px. Notice when you change the value,  the changes are applied immediately. This step allows you reduce space, however only temporarily. Rewrite or copy the new code:

article header ul { margin:0 0 5px; }

Now let’s reduce title font size; click on the <h2> tag on the right firebug panel.

How to change article title font size

You can change font-size and line-height default values, for example from 44px to 32px, and 52px to 42px. So your new code should look like this:

#k2Container article header h2 {
    font-size: 32px;
    line-height: 42px;
}

Note: You don’t have to include properties which you don’t change.

You can also change text-transform from “uppercase” to  “none”.

#k2Container article header h2 {
    font-size: 32px;
    line-height: 42px;
    text-transform: none;
}

Because the title is also a link, if you want to change its color you have to click on <a href=” under  <h2> :

You have to change the hex color for the font, from default #222222 (dark gray) value to any other. For example:

#gkMainbody article a:active, #gkMainbody article a:focus, 
#gkMainbody article a:hover, #gkMainbody article header a {
    color: blue; }

But if you want to use different color for the hover effect you have to modify it a little bit:

#gkMainbody article a:active, #gkMainbody article a:focus,  
#gkMainbody article header a { color: blue; }
#gkMainbody article a:hover  { color: green; }

Result after all above CSS changes

Read articles about colors here.

I don’t need this element

Often, the solution to a problem can be found just by disabling a few CSS properties and seeing what the world looks like without them. As you mouse over each property, you’ll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on.

(3) Implement changes using an override technique.

As the editing in Firebug is live, you’re not editing source code. Since Firebug does not save changes to your template, you will need to copy the changes you’ve made in Firebug and paste them into (three options):

• Custom CSS field  (template configuration).
• Your template’s css\override.css file.
• Firebug will also tell you exact line number where certain elements appear in the template.css, joomla.css, k2.css or style1.css file. So you can also make changes there, but this is not a recommended solution!

For more details about CSS customization –> Read this article .

Because of changes to Template manager since Joomla 2.5 (this also applies to Joomla 3.2) installing a template manually isn’t as easy as it was in Joomla 1.5, but it’s still simple if you know how.

If you have, for example, a template package (but not a Quickstart package!) that you want to install in Joomla that is larger than the maximum file upload size, due to limitations of the web hosting environment, you have to use the Discover tool from Extension Manager.

1. Upload the unzipped template folder with all included files (for example “gk_msocial”) under the /templates folder on your server.
2. Go to the Extensions manager -> Discover (tab from Toolbar).
3. Click on the “Discover” button to discover “template files” that may be available for install.
4. Select the newly discovered template in the Discover screen and click on the “Install” button.
   
5. After few seconds you should receive the installation success message (on green background).
   
6. Now you should see the installed template in your Template Manager and of course you can use it and set as default.

p.s. By the way, the Discover feature can also be used to discover and install multiple Joomla extensions at the same time.

This guide show you how to update a template based on the Gavern framework without uninstalling and reinstalling the template.

Using “Update” tab in template configuration if a newer version of your template is available so if you do see these Versions Notifications, you should visit the Downloads section of your template and then download the latest package.

Note: Information about new versions of Joomla! template you will find here: https://www.gavick.com/updates.html?task=group&id=4

Important: If know/remember which files you have modified in your customization before you start updating make a backup of all the customized template files, so you can recover it and redo all changes at any time. In most cases it would be template images (like logo) and override.css file.

Once you have your Joomla template downloaded on your computer, login to the administrative area of your Joomla website and upload the template through the Extension Manager (Extensions -> Extension Manager).

When you upgrade any Gavick product, you don’t have to uninstall the old one! Just install the new product over existing by standard installation method through Joomla installer. If you uninstall a product, you irrevocably delete all the records from the database and the product (template or module) settings.

The last step for those who made customization

After installation you can replace files or part of code from “new” template version with from “old” template files. Please note, that if you have heavily modified your template’s layout (php files) or few css we recommend to compare what has changed between file versions, and then merging those changes.

Done. Your new template version should look as before and work even better.

Most websites probably use only one template. However, in Joomla! 3.x, it’s possible to assign specific templates to style individual pages or groups of pages. It’s very simple to set up your site to display in this manner. It is assumed you have already installed few new templates.

Menu assignment in Templates

This section in Template configuration contains all the menu items configured in your Joomla! 3.x website. To apply the current style to a menu item’s corresponding web page, check the box next to the menu item.

You can press the Toggle Selection button to invert the menu item selections.

Once you make your selection then save your choice.

Since Joomla 1.5 there have been big changes in the Joomla! Template Manager. Right now you cannot rename a folder by using FTP to change its name, because information regarding the folder is stored in different locations. This is because the Joomla! template is treated as an extension, so some information is in the database as well as in the files.

There are a few solutions to this issue, but here we will use the simplest method, using a new GK template package that has just been downloaded from our website.
1) Rename the zip filename
2) Rename the folder filename inside the zip
3) Now rename all folder names from “gk_creativity” to (for example) “gk_new” in the templateDetails.xml file.
In the xml you need to change the folder name in several places, that’s why we suggest you use the Search & Replace tool to search for ‘gk_TemplateName’ and replace it with ‘gk_new’ in your favorite text editor (Notepadd++ or other) – to be sure that you didn’t miss one of them.
4) Rename the language file according to new name, for example, gk_new\language\en-GB.tpl_gk_new.ini
5) Repack and check that all changes have been saved.
6) Install as a new template (!)

Of course it won’t change the description of the template inside the first tab, if you would like to change this you have to edit the templateDetails.xml file.

Note: According to GavickPro terms and conditions – you can not remove the copyright information in the header of the template.xml file.

You may have noticed if you downloaded a template from gavick.com, it came in a compressed form, for example gk_instyle_J!3. Joomla! can unzip and install this file online during installation process. Installing your Joomla 3.x template is, in most cases, achievable with a simple 3-step process. Follow along with the tutorial and see how easy it is to get your Joomla! website looking great.

Step 1.

Login to the Administration Control Panel of your Joomla! 3.x website and navigate to Extensions -> Extension Manager.

Step 2. Browse & Upload.

Once the manager in open, click the Upload Package File tab. Click the browse button and navigate to the gk_template.zip file on your computer. Select it and click Upload & Install; after a few seconds you will receive an install success message on a green background.

Tip: Have you got any problems during this step? You have to use manual installation technique -> Read this article.

Note: You can install as many templates on your site as you like and even assign a different templates to different menu items.

Step 3. Set as a Default.

By assigning a default template, the system will  display, your site based on that template.

Now navigate to Extensions -> Template Manager. You will see a list of templates installed on your Joomla! website. Click the checkbox next to the template name you wish to use, then click the “Default” icon at the top right of the page or click on star icon after template name. This will append your installed template to the Joomla! website.

Your new GavickPro template is now active.

After you have installed a new template, probably not all module blocks will show up. This is because templates from different companies contain different (and differently named) module positions. Read this guide to check all module positions.

Note: The Joomla template controls the graphical presentation of your website. It determines the layout, colors, type-faces,  graphical elements and other aspects of the design that make your site unique. The template does not contain text, nor modules.

Each of us have a vision of ideal web page, the concept for customization of chosen GK template. You need some CSS knowledge and know where to add Custom CSS into template to make those changes. Choosing effective, appropriate, and harmonic colors contributes quite a bit to the overall success of your Joomla! page. In this guide we will show you how to change color (background and font color) of those three selected sections in Gavick templates for Joomla.

CSS COLORS: The colors specified in CSS can be one of the named colors (such as green or blue), colors created from hexadecimal RGB triplets (such as #3c99df or #cccccc), or colors created using the rgb() CSS function. The background-color and background property accepts the same color values as the foreground color property.

If you ever wondered where You can add Custom CSS code into GK templater – this manual will help you.

How to change color of TopBar element

Each template is different but in most cases you have to change (override) color from, for example:

Background color for TopBar in CouldHost template

#gkTopBar, #gkMenuWrap #gkTopBar { background: #3C99DF;}

TopBar background color changed to gray (#ccc) from blue (#3c99df)

#gkTopBar, #gkMenuWrap #gkTopBar { background:  #CCC; }

#gkTopBar, #gkMenuWrap #gkTopBar { color: black; }

#gkTopBar a, #gkMenuWrap #gkTopBar a { color: red; }

#gkBottom1, #gkBottom2, #gkBottom3 { background: yellow;}

#gk-footer, body > footer { background: green; }

#gkFooter { background: blue; color:#fff; border-top:1px solid red;}
#gkFooter a { color: #fff; }

(M) Social footer with blue background color

GK Shop & Buy with orange color of Footer

body {background: #FFA500;}

#gkFooter { color: #111;}

.gkFooter { background: green; }

.gkFooter { background: green;  border-top: 1px solid green; color: #fff; }

GK Game News with green (Hulk) color of footer element

On occasion you might like to take a nice JomSocial theme from, for example, (M)Social, and use it in another Gavick template. How do you do this? This short, simple guide will show you:

First step

You have to copy some folders and files but the process also requires a small bit of php customization. Copy the following folders and the files inside from the (M)Social template package to your current template – use your preferred FTP client to do this:

• gk_msocial\html\com_community
• gk_msocial\css\jomsocial.css

Second step

Using an HTML/PHP editor modify this file in your GK template : layouts\blocks\head.php – and add this line of code:

$this->API->addCSS($this->API->URLtemplate() . '/css/jomsocial.css');

near the other similar strings (after line 23)

Now copy the modified file to your server and replace the existing file. This will work fine in most cases, though there may be some exceptions depending on multiple factors.

Sometimes you would like to delete all the GK template styles that come with default Gavick Joomla Template and replace with your own custom one. Sure you can use override method but if you sure that can can control later update process in my opinion the easiest way is modifying the existing template styles. It allows you to reduce number of loaded kb and take control of over the appearance of the template (for example used colors).

How to remove existing style

In Joomla! if you want to remove the existing styles you should do the following steps:

1. Disable the style switcher under features tab – because in result you will leave only one active style.
2. Select the style I as a default style in the template settings
3. You can remove other styles files:

• css/styleX.css,
• css/typography/typography.styleX.css, css
• css/system/error.styleX.css
• css/system/offline.styleX.css

X – style2, style3, style4, style5 and style6

You should leave only the following files:

• css/style1.css,
• css/typography/typography.style1.css, css
• css/system/error.style1.css
• css/system/offline.style1.css

Of course don’t remove other .css files (gk.stuff.css, font-awesome.css, template.css etc.)  – they are very important.

How to remove choosing styles from template configuration options

You can remove other styles from the list in the template options by editing a templateDetails.xml file, find this part:

<field name="template_color" type="list" default="1" label="TPL_GK_LANG_TEMPLATE_COLOR" description="TPL_GK_LANG_TEMPLATE_COLOR_DESC">
<option value="1">TPL_GK_LANG_COLOR_1</option>
<option value="2">TPL_GK_LANG_COLOR_2</option>
<option value="3">TPL_GK_LANG_COLOR_3</option>
<option value="4">TPL_GK_LANG_COLOR_4</option>
<option value="5">TPL_GK_LANG_COLOR_5</option>
<option value="6">TPL_GK_LANG_COLOR_6</option>
</field>

It should be changed (reduced) to only this:

<field name="template_color" type="list" default="1" label="TPL_GK_LANG_TEMPLATE_COLOR" 
description="TPL_GK_LANG_TEMPLATE_COLOR_DESC">
<option value="1">TPL_GK_LANG_COLOR_1</option>
</field>

So only one style, chosen by you option will be available in template configuration (back-end).

Now edit the following files and define your own style colors based on your color scheme:

• css/style1.css,
• css/typography/typography.style1.css, css
• css/system/error.style1.css
• css/system/offline.style1.css

Color scheme

Do you need to pick out a new color scheme, but don’t know where to begin? Read also this article about choosing a best color scheme: http://www.gavick.com/documentation/joomla-templates/customizing-joomla-template/colors-and-color-scheme/

In template such a GK John S. using the template configuration you can control the width of the layout, but if you want to increase the max width of the #Mainbody and #gkBottom1, #gkBottom2, #gkBottom3 and #gkBottom4 elements (sections) you have to override a few lines in CSS. The default value defined by us is 1000px, so if you want to use a bigger quantity use for example 1300px.

Please do not use a value equal to or greater than that which you have defined in the Layout tab (default is 1400px), because this can cause bottom browser scrollbars. We suggest that you always use a -100px lower value.

GK John S. – default max-width is set to 1000px

You have to use the following CSS code:

.frontpage #gkMainbody .box .header, .frontpage #gkMainbody .box .content, #gkBottom1.gkSingleModule .box .header, 
#gkBottom2.gkSingleModule .box .header, #gkBottom3.gkSingleModule .box .header, #gkBottom4.gkSingleModule .box .header, 
#gkBottom5.gkSingleModule .box .header, #gkBottom6.gkSingleModule .box .header, #gkBottom1.gkSingleModule .box .content, 
#gkBottom2.gkSingleModule .box .content, #gkBottom3.gkSingleModule .box .content, #gkBottom4.gkSingleModule .box .content, 
#gkBottom5.gkSingleModule .box .content, #gkBottom6.gkSingleModule .box .content {
max-width: 1300px;
}

GK Template – Custom CSS code field

The resulting effect should be similar to this one:

Right now MainBody and all single Bottoms positions are set to use max-width: 1340px

Most websites probably use only one template. However, in Joomla! 3.x, it’s possible to assign specific templates to style individual pages or groups of pages. It’s very simple to set up your site to display in this manner. It is assumed you have already installed few new templates.

Menu assignment in Templates

This section in Template configuration contains all the menu items configured in your Joomla! 3.x website. To apply the current style to a menu item’s corresponding web page, check the box next to the menu item.

You can press the Toggle Selection button to invert the menu item selections.

Once you make your selection then save your choice.

The post Assign multiple templates to your Joomla site for even more diverse content and features appeared first on GavickPro Documentation.

With so many options and customization possibilities in Joomla installing a template manually can be a time-consuming yet rewarding task. Of course, there are alternative options such as our Quickstart package, which will help you get a full Joomla site that matches our demo layout and functionality in minutes. However, these full Joomla install packages are not always the best option for established websites which have a lot of content or customization in place that would be hard to backup and replicate in a new site. Not to worry though; if you’re not able to use the quickstart installation method this guide is on hand to lead you through installing a template manually in an existing Joomla instance.

Choosing your Install method

Installing templates in Joomla 3 is generally a very simple process that takes only a few moments; the more time-consuming part is configuring the plugins and modules that provide the extra functionality and layouts that you can see in our demo site. For this reason, if possible we recommend that you install a new copy of Joomla with all the demo content in place with our quickstart package. However, if you have an existing site and can’t or don’t wish to start afresh, then manual installation of the template is the way to go. Let’s take a look at what steps you’ll need to take to get your template installed.

Manual Installation Steps

The number of steps required in manual template installation depends heavily on what exactly you’re looking to achieve. Are you looking to completely match the demo layout of the template, or do you want to build your own layout using the same basic functionality? Are you intending to make use of the modules demonstrated in the test site, or do you have your own modules ready to go? However, regardless of how much you want to do, there are two steps that you’ll need to take no matter whether you’re intending to match the demo layout or start building your own template-specific content from scratch:

• Install the core template package.
• Install the framework plugins.

In this article we’ll cover both these steps, as they’re almost essential to laying the groundwork for any custom content based on our templates. Once these are complete you can then start adding modules, installing extensions; basically, you can start building your site.

Installing the Core Joomla Template Package

What’s the core template package? It’s the zip file that contains the main files and folders for the template, including the CSS, PHP and JavaScript code and more. This step is a remarkably easy one thanks to Joomla treating template packages much like any other extension for an efficient installation. First, you’ll need to grab the right package for your chosen template. Make sure you’re logged-in to our website and head over to the download section & click on your chosen template. You’ll see a set of files for download. Some of these you will certainly need, whilst others you might only need if you are intending to fulfill some additional steps beyond the basic install. The files will usually be as follows:

• gk_templateName_J!x.zip – This package, where “templateName” is the name of the template and “x” is the Joomla version (i.e. J!3), is the core template package, and essential if you’re going to manually install the template. Make sure to download this package!
• gk_templateName_quickstart_J!x.zip – The quickstart package is for people who are installing a brand new Joomla installation with all demo content prepared; we don’t need this in manual installation so you can ignore it.
• gk_templateName_rest_files_J!x.zip – This package contains the source PSD files for the template and, more importantly, the plugins used to provide additional framework functionality like typography. It’s highly recommended you download this file too, as the plugins are usually a major part of the template functionality and should be installed.

To install Joomla template follow these steps:

1. Login to your Joomla admin area as normal
2. click on Install Extensions in the left menu, or Extensions → Extension Manager in the top menu.
3. Once in the Extension Manager click on the Upload Package File tab:

4. Click on the Choose file button and select your newly-downloaded template package for upload; that’s the gk_templateName_J!x.zip file and not the rest files; they’ll be used later.
5. Once selected, hit the Upload & Install button to get started.

Wait a few seconds and the template should be uploaded and installed, ready for you to use.

What if it doesn’t complete installation?

If you find that you’re unable to complete the install via the above method, then an alternative method will need to be used. You might have encountered a JInstaller: “:Install: Cannot find XML setup file” error, or perhaps you’re trying to upload a package that’s larger than the maximum upload size; just bear in mind that one of the issues with any kind of computer-based system is that sometimes they go wrong, and it’s not always for an obvious reason. One extension might install flawlessly on one Joomla install, but breaks down completely when installed on another Joomla instance. So if you’re having trouble with the install don’t rush to blame your Joomla installation or the template; instead, try out these alternative methods first to see if you’re still getting the same issue, and remember that our dedicated team in our Support Forum are on hand to assist you further if you get completely stuck.

Manual Template Installation via the Discover Tool

If you’re a bit of a Joomla history buff, you might recall that it was entirely possible to install a template in Joomla 1.5 by just uploading the template folder and its contents to the templates folder in your Joomla installation. Nowadays in Joomla 3 things require an extra step to prevent accidental installation. That extra step is provided by the Discover tool, which can be found in the Joomla Extension Manager; when activated it will scan through its folders and find any extension, plugin or template that has its files on the server (in the appropriate install location) but hasn’t yet been activated or installed, and will activate them so they’re ready to use like you’ve just uploaded them as normal.

This installation method for templates isn’t particularly hard, but it does require access to your server via FTP since you’ll need to get the template files onto your server without going though the usual Joomla interface. First things first; remember the zipped-up template package you downloaded earlier? You’ll need to extract this package on your local machine before uploading; once extracted you should have a folder named after the template (for example “gk_msocial”) with all the template files inside. Next, connect to your server via the FTP program of your choice (if you’re unfamiliar with FTP you can find a beginner’s introduction on our blog to help you get to grips with it. Once connected, upload the extracted template folder to your /templates folder in your Joomla installation.

Once the upload is complete head back over to the Extension Manager of your Joomla admin area. Once there, click on the Discover tab in the left menu; Joomla will do a quick check to see if there are any unactivated extensions or templates in its folder. It should now detect your uploaded template and list it for activation.

Now you can add a checkmark to the discovered template and click the Install button in the top-left to activate the theme.

After few seconds you should receive the installation success message (on green background).

And there you go; the template is now installed.

P.S. By the way, the Discover feature can also be used to discover and install multiple Joomla extensions at the same time.

Manually Installing a Joomla template from a directory

This method is almost identical to using the Discover tool; the only major difference is that the rather than Joomla finding an uploaded package and activating it, in this case it finds the uploaded package and installs it; that is, moves the important files from the directory to the proper install location. As such, which method you choose to use is entirely up to you, though in rare cases you may find one of the methods to be more successful than the other!

To install a template from a directory you’ll need to start by doing the same steps as with the Discover tool; extract your template zip package locally, and use FTP to upload it to your server. What’s different in this case is the upload location; instead of uploading the package directly to the /template folder, you should upload it to the /tmp folder of your Joomla installation, where Joomla stores files during installation or other file manipulation procedures. When you’ve finished uploading login to your Joomla admin panel and click on Extensions → Extension Manager as you do when uploading the package file, but click on the Install from directory tab instead. You will see a field labelled “Install Directory”; this defaults to the /tmp folder so you can leave it as it is and click the Install button.

The system will attempt to install the template, and if it is successful you’ll see a confirmation message.

Now you’re all installed and ready to move on to the next step.

Installing Joomla Plugins

What’s the difference between a plugin and a module? In the case of our Joomla templates, plugins are used to expand the functionality of our Gavern Joomla Framework that powers our templates. Those extra features you find in all our templates, like great typography options, social media sharing of articles etc…? They’re made possible through plugins. As such, if you want the full experience of the framework it’s a good idea to install all the additional plugins. Thankfully, you can get the extra plugins installed just like templates and extensions, so it only takes a few seconds.

The plugins for the template framework are included in the rest files download package for your chosen template; you may recall that this was one of the recommended packages to download earlier in this article. Well, now’s the time to put it to use. Extract the rest files zip package on your local machine; inside the archive are three folders called modules, source and plugins. Naturally, we’re interested only in the plugins folder for now. Inside the folder you’ll find a set of approx. five zip packages with names such as Facebook, gk_typography etc…Each of these zip archives contains one of the plugins used by the framework.

To install, we’ll just follow the same steps as when installing the template:

1. navigate to your Extension Manager in your Joomla admin panel,
2. click on the Upload package file tab,
3. click on Choose file and select one of the plugins,
4. and finally click on Upload & Install to get it installed.

Repeat these step to install all of the plugins one-by-one; the plugins are lightweight so it’ll only take you a few moments before everything’s installed.

Next up, you’ll need to activate the plugins you’ve just installed or they won’t actually do anything useful! In your Joomla backend navigate to your Extensions → Plugin Manager section; you’ll see a list of installed plugins. Now you’ll need to find your new plugins in the list and change them from disabled (red “x” in the status column) to enabled (green tick in the status column) by clicking on them individually, or bulk-changing them by adding a checkmark to each plugin you want to activate and clicking the Enable button at the top of the screen. Your plugins are now installed and your template is ready for content to be added to it.

What comes next?

Your template is installed, the plugins have been added and activated; what’s the next step? This will likely be different for every user since you’ll all be aiming for different goals, but there are a few things you can look to do. If you’re aiming to match the demo layout exactly, then it’s a good idea to import the template settings; the JSON file that contains the settings is available from each template’s Configuration Page where you may also find details of what modules are placed where along with their content and individual settings, which you’ll need if you’re trying to achieve the same layout. Even if you’re looking to make your own content separate from the standard demo layout it’s still worth installing any modules used in the demo; all GavickPro’s modules offer powerful features while being open-source and free to download, so head on over to our Joomla Modules download page if you want to get started. Have fun, make the most that you can with our great templates, and don’t forget that we’re here to help in our support forum if you run into any issues when using your template!

The post A guide to manual Joomla template installation appeared first on GavickPro Documentation.

Some changes can be made via template configuration (info) but some not. So you will probably ask: How can I change the space between elements (paddings & margins), font size or capitalization of article titles in GK template(s) – these are a common questions during template customization, sometimes asked by your client. To answer them, you have to do three steps: (1) check, (2) test and (3) implement changes.

We suggest you use: Firebug for Firefox or Firebug Lite for Google Chrome. Instead of having to make a CSS change, reload, make a change, reload you can just edit it live to see the results.

Installing Firebug in Firefox

In Mozilla FireFox, go to the Tools menu, select “Add Ons” and under “Get Add Ons” type “Firebug” in the search box. Click the Install button. You may need to restart Firefox after installation.

1. Use firebug to check, click on the inspect icon. With HTML tab you can look at your CSS rules and see which ones of them are actually used on your website and which aren’t. Once you select the element, look in the bottom right hand corner of your firebug window. Here you will see the CSS elements and attributes of those elements that relate to the object you have selected on the website. To the right of each element you will see the Location of the CSS element in the document as well as the line it appears on.
2. Test your modification using firebug live editing CSS properties. For example, here’s how we can see the effect of changing article appearance in the GK Rockwall template (space, color, uppercase).

   Before (default view)

   Right-click on this section of the web page and choose “Inspect element”. Firebug will immediately highlight this section in the bottom panel. Let’s start by changing the space between the Category & Date section and the title for K2 items.

   Space between category/date and title

   As you see this section is located in article header inside <ul> and we used margin: 0 0 32px; What this means is that the bottom margin has a default value of 32px.

   Move your mouse over the value of the margin property, and change from 32px to 5px. Notice when you change the value, the changes are applied immediately. This step allows you reduce space, however only temporarily. Rewrite or copy the new code:

   article header ul { margin:0 0 5px; }

   Now let’s reduce title font size; click on the <h2> tag on the right firebug panel.

   How to change article title font size

   You can change font-size and line-height default values, for example from 44px to 32px, and 52px to 42px. So your new code should look like this:

   #k2Container article header h2 {
       font-size: 32px;
       line-height: 42px;
   }

   Note: You don’t have to include properties which you don’t change.

   You can also change text-transform from “uppercase” to “none”.

   #k2Container article header h2 {
       font-size: 32px;
       line-height: 42px;
       text-transform: none;
   }

   Because the title is also a link, if you want to change its color you have to click on <a href=” under <h2> :

   You have to change the hex color for the font, from default #222222 (dark gray) value to any other. For example:

   #gkMainbody article a:active, #gkMainbody article a:focus, 
   #gkMainbody article a:hover, #gkMainbody article header a {
       color: blue; }

   But if you want to use different color for the hover effect you have to modify it a little bit:

   #gkMainbody article a:active, #gkMainbody article a:focus,  
   #gkMainbody article header a { color: blue; }
   #gkMainbody article a:hover  { color: green; }

   Result after all above CSS changes

   Read articles about colors here.

   I don’t need this element

   Often, the solution to a problem can be found just by disabling a few CSS properties and seeing what the world looks like without them. As you mouse over each property, you’ll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on.

3. Implement changes using an override technique.

   You may ask us “In which file I have to make those changes“. As the editing in Firebug is live, you’re not editing source code. Since Firebug does not save changes to your template, you will need to copy the changes you’ve made in Firebug and paste them into – you have three options:

   1. Custom CSS field (template configuration).
   2. Your template’s css\override.css file.
   3. Firebug will also tell you exact line number where certain elements appear in the template.css, joomla.css, k2.css or style1.css file. So you can also make changes there, but this is not a recommended solution!

   Read more details: How to use custom CSS code .

The post Using simple CSS rules to modify your Joomla template design appeared first on GavickPro Documentation.