JP-Xtra | Template Documentation


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

Template Installation


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.



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.



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.

Quickstart Installation

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

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 all Extensions.

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: ) in your browser address bar and follow the Joomla installation instructions.

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





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 watch the Customizer tutorial.


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.

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.

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.

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.


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.


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. How to disable the responsive Feature


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


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+.



Store your modifications in a layout profile and assign it to different pages. The default layout will be used on pages without an assigned layout.


Select which style the layout should load.

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.

To undo your modifications within a theme style, hit reset to reverse the changes to the default theme values.


Display specific content elements in the theme. Select this option to hide the Joomla system output.


Choose the sidebar widths and align the sidebar to the left or right.


Choose the grid layout for each position. Further, you can enable horizontal dividers and prevent the responsive grid behavior. Note: Both options are not taken into account for the stacked layout.



Customize your modules appearance and select your favorite style, icon or badge. 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, headline-border
Animation: No, Fade, Scale Up, Scale Down, Slide Top/Bottom/Left/Right
Repeat: On, Off
Style: Default, Box, Box Primary, Box Secondary, Header, Space, Blank
Icon: 500 Icons (Font Awesome)
Badge: Success, Warning, Danger
Display: Desktop, Pad, Phone

Customize your menu appearance. To configure your menus

Columns: 1-4
Column Width: Set the width in px
Icon: 300 Icons Included
Subtitle: Insert a subtitle for your menu item

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 on module position "logo"
  6. For mobile devices we have added a module position "logo-small" for responsive view

For example use following code:

  1. Duplicate the logo module and publish the duplicated logo on module position logo-small
  2. Now you can insert your logo to display an alternative logo image for smaller viewport sizes.

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

Mobile Menu
  1. Duplicate the Mainmenu module and publish the duplicated menu on module position off-canvas
  2. Now you have the same Main Menu module on module position off-canvas
You can pubish any menu on module position offcanvas. This module position will be shown in responsive view.

Module Positions

Mobile Menu Module Layout
This theme comes with a lot of module positions. The blue module positions allow to choose a module layout which defines the module alignment and proportions: equal, double or stack.

Mobile Menu Column Layout
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 module styles. Take a look at the module variations page to get an overview.


Headerbar Slideshow

Download the latest module version from Rockettheme here:

  1. Install the module
  2. Extensions > Install > select the file which you have downloaded

If you want to have the same Look & Feel as shown on our demo, please use the settings shown below:

  1. Extensions
  2. Module Manager
  3. New
  4. RokSprocket > Pick a Layout > Features > Simple

More detailed documentation of this module:

Top B - Icons


The Top B is actually a simple custom module. In Joomla we are using a Custom HTML module to display special content.

  1. Go to Extensions » Modules Manager.
  2. Click on New.
  3. Select a Custom HTML module.
  4. Click Source Code
  5. And insert the html code below to theCustom Output field.

For example use following code:


Fast and lightweight

Well designed and coded framework to provide optimal loading times.

All possible icons:

Bottom B - Google Map

The Google map is a simple custom module. Video Howto


The Top B is actually a simple custom module. In Joomla we are using a Custom HTML module to display special content.

  1. Go to Extensions » Modules Manager.
  2. Click on New.
  3. Select a Custom HTML module.
  4. Click Source Code
  5. And insert the html code below to theCustom Output field.

For example use following code:


How to use the Customizer

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.

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.
To optimize performance, we recommend disabling add-ons, like Firebug in Firefox.

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.
Please NEVER customize the pre definied style. Copy a Style at the customizer section and then you can edit your duplicated style.

How to customize

If you want to customize a template ( logo.gif, color, font or background) and don´t know the css class, please use Firefox with the Firebug extension. Now you can analyze every CSS style for customizing the template CSS. Firebug Tutorial

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.


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 .toolbar-outer) 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 this tutorial.

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.
Please never edit the original CSS files, because these files will be overwritten with the next theme update. Always add your custom style to the custom.css

Watch the Tutorial Video

Click here

Template Updates

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

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

Download Latest Warp Version