Installing and configuring the YOOtheme Warp Framework

joomlaTemplatesThere are many amazing templates to choose from, for your Joomla website.  The Warp Framework (template) is free, and highly configurable.  YOOtheme are developers based in Germany.  They develop the Warp Framework and Widgetkit and Zoo.  This article will attempt to cover basic management of the Warp 7 framework


Prerequisites

For this article I'm currently using the Venice template, that uses Warp 7.  Hopefully the notes here will help whichever Warp 7 template you are using, including the free Master 2 template.

 

Installation

Start by visiting the YOOtheme download website.

  1. Browse to the Master 2 template.
  2. Download either Joomla 3.x template or the Joomla 3.x Demo Package.

I started with the Demo package whilst I learnt how to make use of this template, as this installs the template and some dummy content.

 

Create Duplicate

Start by duplicating the default style.

  1. Go to Extensions > Templates > Styles.
  2. Check the box for the default Warp style.
  3. Click Duplicate.

You now have your own Warp style for experimenting with.

  1. Click the newly created duplicate for editing.
  2. Enter a new Name (e.g. My Warp Style).
  3. Set as Default for all pages.

Note that by using the Menu assignment tab, you can apply this style to a selection of Menu items, giving your website a stylised, but different coloured look for different areas of the site.

 

Customizer

We are now ready to start changing the colours and others style settings.

  1. Click the newly created duplicate for editing.
  2. Select the Options tab.
  3. Select Settings in the left pane.
  4. Click Customizer button.

The customizer view allows you to make many style changes and see their effect immediately in the view on the right.

  1. Start by selecting a style (e.g. default).
  2. Click the Copy button, to duplicate it.
  3. Enter a Style name and click okay.

 

Updating Warp

You might just need to update Warp on its own.

  1. To update Warp, start by renaming the /warp folder inside your theme's folder (so that you have a backup).
  2. Download and extract the Master 2 theme.
  3. Copy the /warp folder into your theme's folder.

 

Updating the theme

You might want to update the theme and warp together.  Start by checking for any files that you've manually altered.  It's also a good idea to create a new Duplicate Style with all your settings, so that the new Template (new style) won't override your configurations.

  1. Open the style for editing.
  2. Select the Options tab.
  3. Select Information.
  4. In the File Verification area, you'll be able to see any files that have been manually modified.
  5. Make a backup of all theme files just in case.
  6. Upload and extract the .zip file of the Theme.
  7. Recover your modified files by merging them with the new Theme.
  8. Go to Options > Settings.
  9. Click Compile LESS.

 

 

Background

You may wish to add your own background.

  1. Upload your image to the /images folder.
  2. Open the templates/yoo_master2/css/custom.css file for editing.
  3. Add the following lines...
html {
background: url(/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

 

Favicon

Upload your favicon.ico file to /templates/yoo_master2/.

 

Header Logo

The header is simply a custom HTML module in the logo position. You can add your own .png file for transparency. Importantly there is also an opportunity to use a logo on small devices, by publishing a custom HTML module in the logo-small postion.

The optimum size for the standard logo is 566 x 70 pixels.

Be aware that the logos do not need the paragraph tags. Here is an example...

<img src="/images/logoSmall.png" alt="logoSmall" />

 

Hide Warp Branding

You might want to remove the Warp Branding that appears at the footer.

  1. Go to Extensions > Templates.
  2. Click the YooMaster2 - Default Style for editing.
  3. Select the Options tab.
  4. Choose Settings from the left pane.
  5. In the Content section, click Hide Warp branding.

 

Thanks for visiting.