Template Customization

Customization

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. The same applies for WordPress files.

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 for the related style. That way your CSS won’t be overwritten when you save changes in the Customizer.

Set up the Joomla menu

Set up the Joomla menu

This tutorial shows you how to set up the main menu correctly in your Warp 7 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.

Read More

Set up the logo

Set up the logo for Joomla Template

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.

Desktop Logo

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. After publishing the module, the logo will display in the template.

Read More

File permission issues

File permission issues

Learn, how to handle file permission issues with your Warp theme.

There are two ways of accessing files when working with Joomla: either directly via your webserver or through an FTP client. Different files and directories have permissions specifying who can read, write or access them. Sometimes the permission settings of your webserver and your FTP client can collide, so that when trying to install an extension from the backend you are suddenly confronted with messages, like JFolder::create: Could not create directory or Directory not writable: /administrator/templates/system/ or you may not be able to save theme settings.

Change file permissions

Read More

Template Information

Get an overview of versions, file modifications and potential issues in your theme.

Versions

The dashboard section displays the current version number of the theme and the framework. This kind of information might be useful, if you need to resolve technical issues. It is advisable to update the framework and the theme simultaneously.

Read More

Joomla Menu Settings

Manage and organize your menus with additional settings. Menu items can be filtered by the position to which they are assigned.

Menu Settings

The following table shows you all additional menu settings.

Read More

Joomla Layout Settings

The layout settings manage the positioning of different layout parts.

This section makes the arrangement of your content very easy and flexible. You can enable or disable system output, define the layout of the theme’s widget or module positions and select a style you created in the customizer. Additionally you have the possibility to store your modifications in a layout profile and assign it to different pages.

Style

This option enables you to assign a style to your layout. In addition with the customizer and the layout manager this makes styling your pages very flexible.

Read More

Customizer

Template Customizer

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.

Read More

Joomla Template Configuration

Joomla Template Settings

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

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.

Read More

How to update Joomla template

Learn how to update Joomla template without losing your customizations.

If a newer version of your template or Warp framework is available, you will receive a notification in the theme settings. In that case, just visit the Downloads section and download the latest template package.

Update Warp 7

  1. Create a copy of your theme’s /warp folder. That way, you will have a backup in case the update fails.
  2. Download any Warp 7 theme and unzip the package.
  3. Copy the /warp folder from the theme and replace the one in your theme with this one.

NOTE Sometimes a Warp update also requires to update the theme to reflect the changes in Warp accordingly.

Update Joomla Template

The file verification in the theme settings shows all modified and missing files in your theme to help you detect which files you have customized before you start updating. Changes in Warp’s administration area will generate the config.json, which is not shown in the file verification. So be sure to have a backup of that file. To update your theme, do the follow these steps.

  1. First of all, make a backup of all your customized theme files, so you can recover modifications at any time.
  2. Download the latest theme version and extract the package to your Desktop.
  3. Copy all files to /templates/THEME-NAME for Joomla and replace all files.
  4. Recover your modifications by merging your customized files with the new ones.
  5. Open Warp’s administration area and hit Compile LESS.

IMPORTANT We strongly recommend to create a new style for all modifications and make a backup before updating. That way all your changes will be kept when updating your original theme files by replacing them.

How to install a Joomla template on your existing website

Install Joomla Template

This tutorial gives you a brief overview of the general Joomla! and Joomla Template installation process.

Installation

Setting up a Joomla Template follows the standard Joomla installation procedure and works like with any other template.

  1. Download Joomla from the Joomla website.
  2. Setup a new Joomla install.
  3. Install and activate your theme.

For more information, take a look at the official Joomla documentation.

Read More

Blog Settings

This area of settings allows you to enable some appearance elements (icons in posts) as much a social comments and social share buttons.

Show Type Post Icon(s)

Each Joomla article can have option to use Post formats it means use addcional illustration icon, which can show about what type of article (post) is that content.

Front-end

Icon

Back-end

Video Blog

Of course those icons from Post Format settings are based on FontAwesome typography.

Comments Settings

This build-in option adds IntenseDebate Comments system, Facebook comments and / or Disqus Comments to your site. All in one tool. You don’t have to install any addcional plugin anymore to get this feature. Social allows your readers to log in via a preferred social network and add comment under article. All you have to do is choose and set correct Facebook Application ID, IntenseDebate Account or Disqus Username/Subdomain. Sorry, but right now you can use only one selected social comments system or disable it for all content.

Joomla blog comment settings

Social Share buttons

You can also enable Social Share buttons under each article. Current version have improved social share alignment. In future (upcoming) version we will add more social share buttons.

Joomla social blog post

Joomlead Advanced Settings

This section of JoomLead template settings allows you to reduce size of loaded template files. By speeding up template, you offer a better experience for your customers, improve your page speed (and therefore, possibly, your search engine ranking) and make your CMS appear more stable and professional.

Cache template settings

After you will decided that you have finished last works on template customization we suggest you to turn on some Cache options.

Compress CSS

In order to reduce the number of requests from a browser to the server to render a page, and to take advantage of browser caching, this tag also does some advanced processing of the stylesheets. It generates uniquely named css file which are then returned to the browser, and allowed to cache on the browser.

template settings

Note Custom CSS field is not compressed when you’re using this option. It will help you to keep control about small changes.

Compress JavaScript

Also optimize JavaScript is to improve your site performance by compress JS files into one – so that the total size and number of requests will be decreased.

When the optimization option is enabled, the optimized JS file package will be auto generated when a page is viewed in the first time. After enabling this option please check whole website. In some cases it may generate conflicts between this compress option and some third-party extensions, so then leave this one off or use third, following option if you know which file shouldn’t be compressed.

Exclude JavaScript files to be optimized

You may want to exclude some JavaScript files and folders from compression by using this option. To exclude JS files that you don’t want to optimize, just add the file name, if you have many files, please separate them with comma.

Less

Compile less

Compile LESS to CSS option – Helix 3 is developed with LESS system built-in. When customize your site, we suggest you to work with LESS files. All your changes in the LESS files will be compiled into the final CSS files. It will override previus changes

We just released an update for Gantry5 Particles. 2.0.5 is a huge update with new features and bug fixes. Full Changelog
Hurry up before it's too late. GET 50% OFF on all products - Use Coupon Code Black50 at Checkout Join Us Now