In this tutorial we'll show you, how to install a template in your Joomla installation.
If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.
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:
This tutorial is a step-by-step guide that will show you how to install a Theme Demo Installation Package.
On the last installation step don't forget to press the Install Sample Data button.
On the last installation step don't forget to press the Install Sample Data button.
As soon as you install one of our theme, you have several theme settings that we want to introduce here.
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.
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.
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.
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.
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.
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
The style settings are all about the overall look and feel of your website you can choose from the different styles, colors and fonts.
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!
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.
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.
Go to Extensions » Modules Manager. Click on New. Select a Custom HTML module.
On the following edit screen, you select the logo module position.
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" />
The Favicon is located in your theme directory.
To change the favicon, simply replace that file.
The iPhone/iPod touch icon is located in your theme directory.
To change the icon, simply replace that file.
This tutorial shows you how to set up the main menu correctly in your Warp based template.
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.
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.
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.
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.
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.
Here you can select an image in your Joomla installation directory.
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.
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.
This tutorial shows you how to set up the module system in your Warp based template.
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.
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.
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
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 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:
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.
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.
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.
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.
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.
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.
If any of these requirements are missing you might need to contact your webhost and ask them to install or enable the needed extensions.
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 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 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.
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.
Download the WidgetKit Lite here: https://www.yootheme.com/widgetkit
More information about the WidgetKit here: https://www.yootheme.com/widgetkit
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.
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
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.
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.
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.
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 .
Here are some useful resources to get you started with the web developer tools:
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.
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}
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.
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
Many thanks to YooTheme.com for this amazing WARP Framework for Wordpress
YooTheme WidgetKitMany thanks to YooTheme.com for the cool WidgetKit for Wordpress
JoomlaplatesHelp and support, click here
FotolioAll 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.