Follow the steps below in order to install the Quickstart Package manually.
- Extract the .zip file to a web-accessible folder in your server (usually inside /public_html).
- At the folder (directory) where you previously extracted the .zip file create a file named "configuration.php" using the contents from here: https://github.com/joomla/joomla-cms/blob/staging/installation/configuration.php-dist
- Setting up the database:
- In the folder installation/sql you'll find the database files of the Quickstart package. You will have to rename the ones referenced as joomla.s01, joomla.s02, etc. to joomla01.sql, joomla02.sql and so on. The files referenced as joomla.s0x could be more than one depending on the package.
- Download the files joomla.sql and the ones you renamed (joomla01.sql, joomla02.sql, etc.) locally.
- Open phpMyAdmin and select the database in which you will import the data.
- Import all .sql files.
- You will notice that the tables have #__ as prefix. Select them all and from the "With selected:" filter choose "Replace table prefix. Enter the #__ as the one in use now and the new prefix of your choice, i.e. vtwiq_, as the new one and click on Submit.
- You will also have to change the admin password in order to have access to the site's backend. Locate _users table and Edit the Administrator user. Erase the password field and put your own. Before Saving, choose through the "Function" select the "MD5" option.
- Setting up the configuration
- Open the file configuration.php you previously created.
- Enter the correct database credentials, $user, $password, $db, $dbprefix.
- Change the $log_path and $tmp_path to correspond to your own.
- Take a look at the notes from the original file you copied from the Joomla repository on GitHub. Adjust/fill-in accordingly.
- Remove the installation folder.
- Visit your site and access the backend using /administrator.
Every Quickstart package apart from K2 contains other free extensions that are already installed and bundled in the package.
All of our packages contain the following free extensions:
- Admin Tools by AkeebaBackup
- Akeeba Backup by AkeebaBackup
- AllVideos by JoomlaWorks
- Cache Cleaner by NoNumber
Depending on the template extensions like TinyLetter Subscribe may be included. Make sure to check each template's documentation to check if any additional extensions are included.
Click here to read about commercial extensions.
This tutorial will help you clarify the differences between installing, setting up and upgrading.
If you have followed our tutorials you will have already a fully functioning site with content. If you are familiar with HTML/CSS you have propably added your own custom styles.
But what happens when a new version of the template comes out? Do you need to backup up your work, upload the new template and start patching or FTP'ing files?
Fortunately, you don't need to do any of these tasks. When a template upgrade is published (eg. v1.0 to v1.1) you will have a quickstart package for new installations, the standalone template files and the upgrade pack.
The upgrade contains all the template files apart from index.php (to preserve changes if you have new module areas), custom.css and custom.js files.
Just download the quickstart package and you can safely upgrade to the newest version without the fear of losing any changes.
All files or folders that have changed or added in the newer versions are mentioned in detail to each template's download page under Changelog to help you keep track of the changes in case you have modified some other file besides the three mentioned above.
Note: For more information on installing Joomla templates read this tutorial.
Note: For more information on installing the Quickstart package read this tutorial.
Note: For more information on customizing your stylesheets read this tutorial.
- The favicon is located in the root of each template folder, i.e. templates/nuFashion/favicon.ico. Just replace the the existing favicon with your own. You can generate it through various applications or online tools, such as http://www.degraeve.com/favicon/. The favicon size should be 16x16.
- Since version 1.0.1 of our templates, the App icons setup is located in the Template Parameters under Branding of the Standard tab. You can select or upload your App icons through the corresponding field for each of the following sizes. The images have to be in a .png format and not precomposed.
- 57x57 - for iPhone and iPod touch
- 72x72 - for iPad
- 114x114 - for high-resolution iPhone and iPod touch
- 144x144 - for high-resolution iPad
At this point you will have probably noticed that we use only two CSS files (or three depending on the template), one for K2 (k2.css), another one (template.css) for everything else and in some cases the colorvariations.css file.
But what happens when you want to make minor changes but still want to keep getting updates without breaking something?
The answer is very, very simple. In all of our templates you will find a file called custom.css under the css folder and a custom.js file under the js folder.
When you upgrade the template (using the upgrade package) you will notice that your custom styles have remained intact while getting the newest version of the template.
By default all of our templates have options for Google Analytics.
Go to the template's parameters (Extensions → Template Manager → Your Template) and enter your Google ID and domain (without www.) on the Google Analytics section.
If you wish to use another service, like Quantcast or comScore you need to publish a new K2 Tools module (custom code funtionality) with your code in the TEMPLATENAMEHERE_statistics position.
This position will render directly above the closing <body> tag.
To change the logo and tagline you need to follow the steps below.
- On the backend of your site, go to Extensions → Template Manager. Locate the template and open it.
- Under the Standard tab there is the Branding section. There are three options for the Logo. You can either use it as text or as an image and add an alternative text when using the logo as image.
- If you choose to use it as text, just use the 'Text as logo' field and type in. The logo will appear with the Google Font we have pre-selected on each template.
- If you choose to use it as an image, you can use the 'Logo image' field, upload it in the images folder and select it. The image field overrides the Text field even if it is filled in.
- On the 'Alternative text used for the logo image' field just put on the alternative text you want for the logo.
- To change the Tagline, just type the prefered text in the 'Your site's tagline' field. On each template's demo you can see which is the predefined position for the Tagline. If you don't want to use it at all, just leave the option blank.
In all our templates we use the Simple Image Gallery Pro extension by JoomlaWorks as our image gallery mechanism. This component supports six different layout templates which can be overridden to the template. Additionally to that, we have implemented one more layout for each template named after the template's name. All you have to do is select it through the component's parameters. You can find the reference in each template's documentation.
For two of our templates (nuMovies and nuFashion) we provide styling for the Frontpage Slideshow component by JoomlaWorks as the homepage slideshow as well. This component is accompanied by a module which also supports template overrides. As with Simple Image Gallery Pro, we have implemented specific layout templates for each template. Each template's documentation indicates which module template you should use.
These are commercial plugins and are NOT included in the installation package.
After purchasing the commercial extension from JoomlaWorks and installing it you can choose the appropriate component or module template you want to use according to your needs.
Click here to read about free extensions.
Apart from the Joomla 'traditional' menus we have implemented a social menu for the templates.
Instead of using template parts which are not as versatile as modules or using custom HTML modules which are not very user fiendly, we created CSS classes for our menu items.
What to do:
- You should create a new menu called something like 'Social Menu'.
- In the menu you must setup a new menu item as an external link with the appropriate link and title.
- Now head on to Link Type options and on the Link CSS Style field type in the class linkIs + Sociallink
For a menu item linking to a facebook account you should add the class linkIsFacebook (look at the visual walkthrough of each template), for a link to a Twitter profile the class should be linkIsTwitter.
Please Note that the name of the social media network should always be capitalized.
The templates cover the majority of big networks such as linkedin, google+, flickr, youtube, etc. You may also use the linkIsRss and linkIsMail classes.
Use of responsive classes
As you already know all our templates are fully responsive. What happens if you want some modules or elements on the template to be visibile only on large resolution or only on mobile phones?
The solution actually is quite easy. All you need to do is use the following classes either as a module suffix or directly on your HTML code.
The following classes hide elements or modules on different viewports.
.hide-on-small-phones - Hides your element only on smaller viewports. Below 320 pixels.
.hide-on-phones - Hides your element on viewports smaller than 569 pixels.
.hide-on-tablet - Hides your element on viewports ranging from 569 up to 800 pixels in width
.hide-on-desktop - Hides your element on desktop viewports. 801 pixels and up.
The following classes show elements or modules on different viewports.
.show-on-small-phones, .show-on-phone, .show-on-tablet, .show-on-desktop.
Remember you can always use these classes with the .hidden class, in order to avoid writing any unnecessary CSS code.
If you want a module to be shown only on viewports below 320px you can use the .hidden and .show-on-small-phones classes as the module suffix. Please note that you have to use the show-on- class last.
The same applies if you want an element to be printed or not or even to be shown only on the printed page. You can use the .hide-on-print and .print-only classes.
Other layout classes
Most of the templates use different classes for their layouts but some classes are common for all templates.
A basic HTML/CSS knowledge is required for the use of these classes.
.alpha - This class always floats your element or module to the left with no left margin.
.right - This will float your element or module to right with no right margins.
.floatLeft and .floatRight will float your element but the will not alter any margins.
.clr you can use this class as a suffix or as a div like <div class="clr"></div> to clear any floating elements.
The css files that are included in each template are k2.css for the K2 Component and its modules, and template.css for everything else. Since nuModusVersus template (mid July 2013), though, we provide all styles in template.css file and the color variations in colorvariations.css file.
All template.css files contain a Table of Contents to use as a guide.
It is advised to make any modifications or additions in the custom.css file. That way you won't be losing any of your changes upon update.