JP-Revo Version 1.0.001 | Nov 2013

Theme

Install a Joomla template

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.

Setup a theme with demo package

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

Theme Settings

As soon as you install one of our theme, you have several theme settings that we want to introduce here.

Warp General Theme Settings

General

The general section allows you to edit the "global" settings of your website: Set the default theme profile, allow dynamic profiles, show a browser upgrade message to someone still using a IE6 browser or add your personal Google Tracking Code.

Compression

You can combine, minify, cache and compress (gzip) style sheets and JavaScripts of a theme automatically. Further you can enable the Data URIs feature which allows you to include images in the CSS so there are no extra HTTP requests required to load them.

Social Buttons

You want to promote your content on Twitter or Google+? Just enable Social Buttons in the theme settings and every article will get Twitter and Google+ buttons to share with others.

File Verification

The file verification feature helps you to easily keep track of all modified theme files. With just a click it can tell you exactly which theme files have been modified or deleted, even a few weeks or months later when you might have forgotten that you have changed something somewhere! To prevent modified files when using FTP, make sure the transfer mode is set to binary.

System Check

The {doc: how-to-solve-theme-issues text: system check} gives you a rapid overview of critical and potential issues like writable cache folder, php version etc. so you can handle errors faster.

Warp Profiles Theme Settings

Profiles

A profile can define different settings which are sorted into three main groups: Style, Content and Layout. You can create new profiles, edit already existing ones and assign them to any menu item. Yes, you read it right. Assign any profile to any menu item directly from your theme configuration with just a few clicks. That's not all, profiles have the ability to inherit defined settings from the default profile. This way you can easily make small changes or tweaks and apply them to a page or section of your website! Learn more here

Style Settings

The style settings are all about the overall look and feel of your website you can choose from the different styles, colors and fonts.

Content Settings

This settings group lets you change content related things like date or the to-top scroller. It also allows you to hide the main system output, this is really great if you want to build a page which only uses modules or widgets!

Layout Settings

The layout settings panel is all about the theme's sizes and positioning! You can set the overall width and the sidebars' width and ordering as well. Also the module layouts can be set here, as we have mentioned before you can position equally sized modules right next to each other or stack them on top of each other.


Set up the logo

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

For Joomla

Go to Extensions Modules Manager. Click on New. Select a Custom HTML module.

Select template position

On the following edit screen, you select the logo module position.

Custom Output

And fill the Custom Output field. This is demonstrated to the right. After publishing the module, the logo will display in the template.

For example use following code:

<img src="images/logo.png" width="200" height="50" alt="logo" />

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.


Set up the Joomla menu

This tutorial shows you how to set up the main menu correctly in your Warp based template.

Create the menu

After installation of the template click on Menus Menu Manager Menu Add New Menu in the administration menu on top. Give it a name and click on Save & Close. For more detailed instructions on how to create a menu see the Joomla documentation.

You can now assign menu items to the menu. Click on Menus YOUR MENU Add New Menu Item. For additional instructions on how to create a menu item take a look at the Joomla documentation.

Assign the menu as Main Navigation

Assign the menu as Main Navigation

Before the menu works properly in your template, you have to assign it to a menu module published on the menu module position. To achieve this, click on Extensions Module Manager New. Choose Menu. Next publish the module on the menu position of the template.

Menu Styles

Basically there are two menu styles Mega Drop Down and Accordion. The menu will choose its style automatically depending on what position it is published on. The template's menu position will give you the horizontal Mega Drop Down style, while the sidebar positions will render the menu using the Accordion style. For the Mega Drop Down used in main menu, you must set in your menu module settings Always Show Submenu Items to Yes. Further to get the accordion effect of the side menus, you must make sure the Level 1 menu item is a Separator Type menu item.

Menu columns

Menu columns

The number of columns and the width of columns of a menu item's drop down menu can be set via its Page Class Suffix. To do that edit the menu item for which you would like to change the amount of columns. On the right hand side, click on Page Display Options button. Set the Page Class Suffix entry to the number of columns you would like to be displayed, i.e. "columns-2". The same goes for the columns' width: Set the width you would like it to have, i.e. "columnwidth-200". This will set the width of this menu item to 200 px, ignoring the column width, which is set in the template parameters for all drop down columns.

Using icons in menu items

Using icons for menu items

If you'd like to display icons for drop down menu items, just navigate to the desired level 2 menu item of your Main Menu Menus Main Menu. On the right hand side you will find a list of parameter categories, i.e. Page Display Options, Link Type Options. Depending on the Menu Item Type there will be a parameter Link Image in one of these parameter categories. I.e. if your Menu Item Type is an External Link, you will find the Link Image parameter in Link Type Options.

Using icons for menu items

Here you can select an image in your Joomla installation directory.

For Joomla 1.5 the image must be located at /images/stories.

Add subtitles to menu items

Add subtitles to menu items

A subtitle can be added to a menu item by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Menus Menu Manager. Then create a new menu item or edit an old one. Place two "|" (pipe) characters behind the titles caption and enter a text for the subtitle.


Module Layout

This theme comes with the default Warp6 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

Set up the Module

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.

Using Styles / Icons / Badges / Module Class Suffixes

Modules can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations.

As Joomla doesn't provide flexible parameters for modules we make use of the Module Class Suffix to pass parameters to style our modules. We use the following pattern to pass the parameters: KEY-VALUE. For example, if you use color-orange you can access the variable color which has the value orange. The Warp framework uses four pre-defined module parameters: style, color, badge and icon. But you can also add your own parameters. For example: myparameter-myvalue. Via the Module Class Suffix, you can pass as many variables as you want ... you just separate them with a space. For example: style-rounded color-black. All these variables can be accessed in the /html/modules.php file which controls all module handling and loading.

Pre-defined Module Parameters

Add sublines to menu items and module headers

The available values for the module parameters vary depending on which template you are using. Check out the Module Variations page of your template to find out which values are available.

Example: mod-clean icon-cart badge-hot

Add subtitles to module headers

Add sublines to menu items and module headers

A subtitle can be added to a module title by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Extensions Module Manager and add the subtitle text behind two "|" characters in the title property of your module.

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"

Set the module width in the menu

Set the width of a module on the menu position

In your Joomla backend, navigate to Extensions Module Manager. Click on the module you have published on the menu position. In the parameters to the right you have to add the width to the module class suffix, e.g. dropdownwidth-255. Now the module in your menu will have this width.


Revolution Slider

  1. Install the Revolution Slider from extension folder
  2. Read the detailed Instructions here: Revo Slider
  3. Set the Module Headline = OFF
  4. Publish the module at module position "header-a"

Social Menubar

  1. Disable the Joomla Editor
  2. Add a custom Joomla module
  3. Insert the Shortcode below into this module
  4. Set the Module Headline = OFF
  5. Publish the module at module position "bottom-c"

Shortcode

<ul class="spicesocialwidget">
<li class="facebook"><a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"></a></li>
<li class="googleplus"><a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a></li>
<li class="pinterest"><a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"></a></li>
<li class="twitter"><a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"></a></li>
<li class="rss"><a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a></li>
<li class="skype"><a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a></li>
<li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li>
<li class="dribbble"><a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a></li>
<li class="flickr"><a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a></li>
<li class="linkedin"><a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"></a></li>
<li class="youtube"><a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"></a></li>
</ul>


How to use Profiles

A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and assign them to any menu item. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

The Default Profile

Default Profile

In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here.

Profiles can also be loaded in the frontend of your website by adding a parameter to an URL. For example index.php?profile=myprofile. We use this feature for example to load the different theme variations by clicking on a link on the website. But if you don't need this it should be disabled. This can be done by setting Dynamic Profiles to No, right below the Default Profile parameter.

Create a new profile

Create a new Profile

New profiles can be created in the profile theme settings by clicking on Add and entering a name for your new profile.

Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.

To add new values or to select different options than the default ones, you first need to activate the override with the checkbox on the left.

If you later decide, that you don't want to override one of the default values any longer, simply uncheck the box.

Manually created profiles can be renamed, deleted and assigned to different pages.

Assign a profile to a page

Assign a Profile

One of the major features is the ability to assign different profiles to different pages. This allows you to change the theme's style and layout only on certain pages.

To assign a profile to a single or multiple pages, click on Assign Pages and select the pages you want to load your new profile. You can select multiple items by holding Ctrl-Key while clicking.

Please note that you can only assign one profile per page. If you have already assigned a profile to a page, it will be displayed in grey color and can't be selected.

Example: Create different layouts for different pages

Create different layouts for different pages

One of the most common uses of profiles is to load different page and module layouts for certain pages.

For example let's say your module layout for position Top-A is set to Equal, which means the modules will float horizontally next to each other. But on your frontpage you need your modules on that position to be displayed with the Stack layout, so your modules appear vertically above each other.

To do so you create a new profile called Frontpage, activate the checkbox for Top-A Layout and select Stack. Next click on Assign Pages, to select your frontpage and to save your changes. Now the layout setting for Top-A will be overridden on the frontpage.

Another common use is to hide the System Output on certain pages if you want your page to just contain modules or widgets and no article.


Install / Slideshow / Lightbox

  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.

Joomla

Install a Joomla extension

To install Widgetkit use the extensions installer in the Joomla administration. Go to Extensions Extension Manager.

Click on Browse..., select the downloaded Widgetkit archive and click in Upload & Install

That's it. You're done! To start simply go to Components Widgetkit.

 


Widgetkit Manager

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
In our Themes we are using the Widget LITE only, because its free and has "headerbar", Lightbox and Spotlight included. If you want to have the full options and all functions you can purchase the WidgetKit Pro.

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 WidgetKits

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 headerbar where the WidgetKit ( Slideshow) is published


How to customize a theme

In this tutorial we'll show you, how to start customizing a Warp theme and which tools you need to learn to make small modifications like changing the look and colors of a theme.

Web Developer Tools

Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.

Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

Web Developer Tools

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.

Finding the right CSS file in your theme

As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your template's directory structure have a look at .

Tip: Disable the theme's Gzip and Compression feature or any other caching script you may be using on your your site when you start out on customizations. If you don't do this, you will not see the file and line locations of the code you want to customize and you also will not see changes you made immediately. Also remember to frequently clear browser caches.

More Resources

Here are some useful resources to get you started with the web developer tools:

Where to put the CSS to style my custom content?

If you want to style your content, for example some custom markup inside your Joomla or WordPress articles, please use the custom.css file, located in your template's css directory.

Create your own theme style

The recommended way to customize themes is to create your own custom style. Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. All styles benefit from inheriting layouts and assets from the main theme, which allows you to create minor customizations really fast. The main benefit from using a custom style is that it allows you to update a theme without merging all your customization later. Read on {doc: create-a-new-style text: how to create a new style}

Learn the basics

In general one can say that theme customization is not an easy task. Sometimes it might not work on your first try, but if you do invest some time, things will start to do what you expect them to. Further you don't necessarily need a profound knowledge of web programming, but you do need to know your way around HTML and CSS. Of course if that knowledge is supported by some PHP and JavaScript skills - depending on the task - that is even better. Here are some useful resources to get you started:

Make sure to read through the tutorials of the customizing section which explain how Warp themes work and also provide guidelines on how to modify them.


How to update

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.

Usually after you download and install a theme, you may have customized it to meet the requirements of your website. In this process you may have changed images, added some HTML or made CSS modifications. In your theme settings the file verification quickly shows you all the modified and missing files in your theme that differ from the version you got from our download section. Now you instantly know which files you have modified in your customization before you start updating your individual template with the new template version.

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 for Joomla or /themes/THEMENAME/WARP for WordPress 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.

Credits

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.

Back to Top