JP-Ultimate
Version 1.0.001 / 05 2014

Template InstallationTop

In this tutorial we'll show you, how to install a template in your Joomla installation.

Requirements

If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.

Install

Install

To install a template based on the Warp framework use the extensions installer in the Joomla administration. Go to Extensions Install/Uninstall.

Click on Browse..., select the downloaded template file and click in Upload & Install.

Activate

Activate

To activate the new template go to Extensions Template Manager, choose the installed template and click on Make Default.

By clicking on the templates name, you'll be able to change all theme-settings.

Troubleshooting

If the installation does not work this way and you get an error message, you may try to install the template this way:

  1. Download the theme and unpack all template files to a directory on your pc.
  2. Go to the extensions installer in the Joomla administration, use the "Install from Directory" option to set the directory of your uploaded template files.
  3. Click on the Install button and Joomla will install it from the given directory.

Install Demo ContentTop

This tutorial is a step-by-step guide that will show you how to install a Theme Demo Installation Package.

Note: The Theme Demo Packages cannot be installed into an existing Joomla installation. The Demo Packages include a Joomla installation package, the Theme, Theme Demo Content and WidgetKit.

Setup the Theme Demo Installation Package

  1. Download your purchased theme and unzip the file to your pc
  2. Extract the .zip file from Quickstart folder
  3. Upload all unzipped files via FTP or copy the extracted directory to your webserver.
  4. Create a database for this installation, using a tool like phpMyAdmin in your Hosting Control Panel or ask your Web Host for directions on doing this.
  5. Now just open your webserver's url ( eg: website.com ) in your browser address bar and follow the Joomla or WordPress installation instructions.

Joomla 2.5

On the last installation step don't forget to press the Install Sample Data button.

Install sample data

Joomla 3.x

On the last installation step don't forget to press the Install Sample Data button.

Install sample data

Template SettingsTop

The general theme section allows you to control the behaviour and the overall appearance of your theme.

Style

The style section contains the customizer. Hit the Customizer button to add your own style or to modify an existing style. After the customizer is loaded, you can easily customize colors, fonts, margins and even more settings of the theme. The customizer saves only the modified variables and automatically compiles them into CSS.

For further information, please take a look at our Customizer tutorial.

Development

1. LESS Developer Mode

Check the first option and the browser automatically compiles your LESS files via JavaScript every time you load a page. This provides an appropriate testing environment. It's not recommended to enable developer mode on the live site as the constant process of compiling is highly inefficient.

2. Dynamics Styles

The second option enables the browser to load styles by URL. This is useful, if you want to test different styles for your website. Disable this option, when your website goes live.

3. Compile LESS to CSS

To finish your LESS modifications, hit the Compile LESS button and all your changes will be compiled into the final CSS.

IMPORTANT Make sure, you aren't developing in the /styles/STYLE-NAME/css folders, because these folders will be overridden as soon as you hit the Compile LESS button.

Compression

To optimize page load time, choose one of the following compression options.

Setting Description
None All files will be loaded separately and fully sized.
Combination + Minify This option will minimize and combine CSS and JavaScript files into one single file.
Combination + Minify + Data URIs Data URI embeds image data directly into the document, thus reducing the HTTP requests for your image files. This applies only to images that have a maximum size of 10kB.
Combination + Minify + Data URIs + Gzip Gzip allows a faster data transfer through compressed data packages, instead of dealing with large data volumes by sending them separately.

Responsive

The viewport meta tag controls the layout on mobile browsers. If it's not set, the default width on mobile is 980px and the site will look the same as on desktops.

Bootstrap

By checking this option, you disable Bootstrap. This reduces the page loading time, when you only use the Joomla blog and articles.

Content

Enable or disable the To-top scroller and the Warp branding.

Social Buttons

To enable the users to share articles with others, activate the Social buttons option. It inserts small widgets below your articles. These are loaded via JavaScript from Twitter, Facebook or Google+.

Widgets/Modules

Set the default widget and module styles for the specific positions.

NOTE This style will be overwritten as soon as you select a style for a single widget/module in the widget/module settings.

Additional Scripts

Here you can insert additional scripts like the Google Analytics tracking code below, for example. It will be added before the closing body tag in the theme.

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Setup the logoTop

The Logo is actually a simple image element. In Joomla we are using a Custom HTML module published on the themes logo position for it to display.

  1. Go to Extensions Modules Manager.
  2. Click on New.
  3. Select a Custom HTML module.
  4. And fill the Custom Output field.
  5. After publishing the module, the logo will display in the template.

For example use following code:

			logo

NOTE This Templat provides the logo-small position, where you can display an alternative logo image for smaller viewport sizes.

Logo Space and Position

You can set the height of the header where the logo is stored. If you dont want any gap between logo and header set the margin to 0px. If you want a gap of 10px between logo and header set the margin to: 10px 0.

logo

Example code for center logo:

    

Demo

Favicon

The Favicon is located in your theme directory.

To change the favicon, simply replace that file.

iPhone/iPod touch icon

The iPhone/iPod touch icon is located in your theme directory.

To change the icon, simply replace that file.

Setup the Main Menu & Mobile MenuTop

After creating your menu, you need to assign it to a menu module published in the menu module position. To do so, just go to Extensions > Module Manager, create a new Menu module and publish it in the menu position of the template.

Module in menu position

You can also publish any module in the menu position. The module name is used as menu item and the module content appears in the dropdown.

Menu styles

There are three different menu styles, the Navbar and its mega dropdown as a main menu, the Navs with the accordion effect in sidebars and the Subnavs in the toolbar or footer. Warp automatically styles the menu according to its module position.

Mobile Menu

There ist new module position calls "off-canvas" which is dedicated for mobile menus.
Duplicate your current main menu module and publish the duplicated menu on module position "off-canvas"

NOTE You can insert any menu module at the mobile module position "off-canvas".

Module PositionsTop

This theme comes with the default Warp module layout. The blue module positions allow to choose a module layout which defines the module alignment and proportions: equal, double or stack. You can easily add your own module layouts. The two available sidebars, highlighted in red, can be switched to the left or right side and their widths can easily be set in the theme administration. For modules in the blue and red positions you can choose different widget styles.

Widget LAyout

Module SetupTop

This tutorial shows you how to set up the module system in your Warp based template.

Create a module

After installation of the template click on Extensions Module Manager New in the administration menu on top. Select a module and configure it on the following screen. Publish it to one of the template's module positions. For more detailed instructions on how to use modules see the Joomla Documentation.

Module Variations

This theme comes with different module styles, badges and icons. For each module you can pick a style and combine it with an icon or badge to create your own unique look. Here is a list of the available options:

Class: uk-text-center
Animation: No, Fade, Scale Up, Scale Down, Slide Top/Bottom/Left/Right
Repeat: On, Off
Style: Default, Box, Box Primary/Secondary, Header, Spacce, Blank, Shadow
Icon: 500 Icons (Font Awesome)
Badge: Success, Warning, Danger
Display: Desktop, Pad, Phone
Demo Image

Publish a module in the menu

Publish your module on the position menu. Having both your main menu and your module published on the menu position, it should look like this in your Joomla module manager:

Module Manager showing modules on position "menu"

CustomizerTop

Learn all about managing theme styles and how to add your own.

The Warp customizer simplifies your workflow and allows you to add new styles with no need for any CSS knowledge. It is divided into two sections. The left hand vertical bar indicates the settings for the theme and on the right you can see your selected theme. All modifications within the customizer will instantly be displayed in the preview on the right side.

NOTE To optimize performance, we recommend disabling add-ons, like Firebug in Firefox.

What are styles?

A style is a set of LESS variables, which define your customization.

How to create a new style

  1. Select a style within the customizer.
  2. Hit Copy and enter a new name to duplicate the style.
  3. Now you can start customizing your own style.
  4. Once you are satisfied with your adjustments, hit Save and the customizer saves your style LESS files into the /styles/STYLE-NAME/style.less folder and compiles the CSS files into /styles/STYLE-NAME/css folder.

NOTE, please NEVER customize the pre definied style. Copy a Style at the customizer section and then you can edit your duplicated style.

How to use the customizer

By default, the customizer shows only a selected number of variables. Theses variables are the most used in the theme. There are different customizer modes to determine, to what detail you want to customize your theme.

Mode Description
Advanced mode Activating the advanced mode extends the default variables with additional developer variables, which are rarely adjusted.
More In Advanced mode you can see a (More) button next to groups which displays all variables. The @ symbol indicates variables that are defined through other variables.

InstallationTop

  1. Download the latest Widgetkit version and unpack all Widgetkit files to a directory on your pc.
  2. Go to the extensions installer in the Joomla administration, use the "Install from Directory" option to set the directory of your uploaded Widgetkit files.
  3. Click on the Install button and Joomla will install it from the given directory.

Requirements

If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.

Widgetkit ManagerTop

Widgetkit has a simple and easy to use interface. When you open Widgetkit you'll get an overview of all available widgets. Using the navigation bar you can click through them to open the individual settings of a widget. In general Widgetkit provides two types of widgets.

Content Widgets

Content type widgets like slideshows, accordions etc. help you to organize your content in a slick way. You can include them using shortcodes in your article or through modules and widgets everywhere on your page - even multiple times on the same page.

The Widgetkit Manager gives you a list of all your widgets and related actions like edit, copy and delete.

Widgetkit Manager

Global Widgets

These type of widgets like the lightbox or mediaplayer are globally available and can be used on any page. Simply use their HTML markup or attributes to activate them in any article or any custom HTML module and Text widget. The widget settings define a selector on which elements the widget should become active. It comes preset with a default selector which works for all common use cases, but you are also able to change it if you need to.

Widgetkit Manager

Download the WidgetKit Lite here: https://www.yootheme.com/widgetkit More information about the WidgetKit here: https://www.yootheme.com/widgetkit

Display SlideshowTop

There are two ways to display a Widgetkit widget on your website. You can either use a shortcode or publish a dedicated Joomla module or WordPress widget displaying any Widgetkit widget. Widgetkit Shortcodes

Shortcode

Shortcodes provide a simple way to use widgets in the content of any article on your site. Just copy and paste them in your articles and you're done! When the article is being displayed on your site the shortcode will be replaced with the widget output.

Widgetkit Joomla Module

Joomla Module

You can also use the Widgetkit Joomla module to display a widget on any of your templates module positions. Go to Extensions Module Manager to launch the Module Manager. You will see there is only one Widgetkit module which is used to display any widget. In the module settings you simply select the widget which you created before in the Widgetkit Manager.

The current Template has a module position slider where the WidgetKit ( Slideshow) is published

CustomizationTop

Find out how to add your own customizations and learn more about file hierarchy in Warp.

To provide as much flexibility as possible, Warp applies a special file cascade. If you include any file like CSS, JS or template PHP files, Warp looks successively in specific folders for the files and the first file found will be loaded. This gives you full flexibility to override any important theme related file.

We will explain the override cascade a bit further. If you just want to know, how to override theme files, jump down to the appropriate examples.

Override cascade

As an example, this is what the override hierarchy for the /layouts folder would look like.

1. Styles folder

The /styles/STYLE-NAME/layouts folder of your theme is at the top of the hierarchy and modifications or additions you make here will override all other theme files. Also this folder will be preserved during updates, so it's the safest place to make your modifications.

2. Theme folder

The theme's /layouts folder is the place where all the theme specific layout files are being stored.

3. Systems folder

The /warp/systems/joomla/layouts folder provides the individual system implementation needed to integrate with a particular CMS. This layer makes Warp adapt to a certain system to form a consistent API for theme development.

4. Warp folder

The /warp/layouts folder contains basic overrides made by the core framework. Each part of the core framework is universal and designed to work on every supported system.

The cascades for the /js, /css and /layouts folders are defined in the theme's config.php. If you want to register another folder in the cascade, you can do so here.

Layout overrides

To customize the general theme layout, you need to override the /layouts/theme.php. To do so, create the /styles/STYLE-NAME/layouts directory, copy the file in there and start adding your own PHP code.

This way you can also override system files. For example, just take the Joomla article layout /warp/systems/joomla/layouts/com_content/article/default.php and copy it to your style folder /styles/STYLE-NAME/layouts/com_content/article/default.php and modify it. Now your modified article layout file will be used instead of the default system layout.

Add your own CSS

There are several ways of adding your own custom CSS to a Warp theme. You can use the Customizer to change most aspects of the theme without having to write any CSS. Keep in mind that your style will only be shown in the Customizer, if there is a style.less file inside the style's folder. When you use the Customizer, changes will be saved in the style.less file. Together with the theme LESS files it will be compiled into the /css/theme.css file and override any customizations you may have done.

Add custom CSS

You can use the Customizer and also add your own CSS by creating a custom.css file inside the /css folder. That way your CSS won't be overwritten when you save changes in the Customizer.

Add CSS without using LESS and the Customizer

If you are not planning to use the Customizer at all, just duplicate an existing style and delete the style.less file. Now the /css/theme.css will no longer overwritten when compiling LESS. You can write customizations directly in the the theme.css file.

Please read the WARP7 Documentation here:
https://www.yootheme.com/themes/documentation

Theme UpdatesTop

Here is a brief instruction on how to update a theme based on the Warp framework without uninstalling and reinstalling the theme.

Notifications will either be for the Theme Framework ( WARP ) eg: New version available! Download Theme Framework X.X.XX

Note: Updating the Template Framework ( WARP ) will not result in your Template version from changing, the template and Framework have their own Versioning.

Warp Framework Update

To update the WARP framework do the following steps: VIDEO HOW TO > HERE
  1. First of all make a backup of all the customized theme files, so you can recover it and redo all changes at any time.
  2. Download the latest theme version and extract the package to your Desktop.
  3. Copy all files to /templates/TEMPLATENAME/WARP and replace all files.
  4. Redo your changes by merging your customized files with the new ones.

Tip: If you want to modify your theme, it's recommended to create your own style. A style uses a separate directory and this way the all your changes will be kept when updating your original theme files by replacing them.

CreditsTop

WARP Framework

Many thanks to YooTheme.com for this amazing WARP Framework for Wordpress

YooTheme WidgetKit

Many thanks to YooTheme.com for the cool WidgetKit for Wordpress

Joomlaplates

Help and support, click here

Fotolio

All Images from Demo Content are purchased by Joomlaplates and licensed to JoomlaPlates.com and they are not include the Theme package. Our demo content and slideshow pictures are only for demonstration use. Re-use of any graphics, icons or photos from the demo content for any purpose is strictly prohibited.