Quickstart package for Joomla 3.x + Template Only
Thank you for choosing our FREE template! We hope that FREI will suit your needs in developing your site, but you can also check all our Joomla templates here.
You can choose to install the template with its full demo package - the Quickstart package, or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation, rather than only the template itself.
1. How to install the Quickstart Demo package:
To make it easier and more clear for you we made a short video on how to install the quickstart for our Joomla templates.
2. Template Only installation:
All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in templates/TEMPLATE-NAME/css/custom.css.
Customizations from the template settings page:
First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called TEMPLATE-NAME - Default). You will find 9 tabs as follows:
1. Basic Tab:
Boxed Layout: choose between boxed or full-width layout.
Body Background Image:
By default you have 4 preset styles with color schemes included.
Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.
By default in the Layout tab you will find the preset module positions and template layout. You can either use the created module positions or create your own module positions.
Customizing module position or entire row from the template settings:
Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. Per example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.
Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.
From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.
6. Custom Code: here you can add custom lines of code if needed.
Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files.
9. Assignment: assign any of your menus to the template.
This option is used mostly when you want to display different preset on a different menu.
If you want to have a different color theme on any of your menus you need to:
Site admin > Extensions > Template Manager -> click on Frei.
In the Basic Tabs:
Sticky Header: Yes
Select your favicon and save it.
Enable No, but if you want to use the boxed version, you can just switch to Yes.
Everything is explained in Changing the Logo section in the documentation.
To change the logo:
You can choose Logo Image, Retina Logo Image and Mobile Image.
To use the presets and change colors go to:
To add or rearrange modules you need to go to:
Site admin > Extensions > Template manager;
click on FREI template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.
FREI template comes with 4 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3
You can open the layout builder from Joomla admin > Extensions > Template manager > FREI > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.
1. Open templates/frei/templateDetails.xml and locate the following lines:
2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):
- save and close the file
3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.
4. Go to
templates/frei/less/theme.less and add the new css style for the new position. The class of the new position should be:
5. Finally create a module and publish it in the new position.
The template comes with a cool spinning animation, which can be applied to any element. You can apply the effect to both text and animation. All you need to do is to add one of the 2 spinning classes to your element:
1. Slow spinning effect - apply the .spinme class to your element
2. Fast spinning effect - apply the .spinme-fast class to your element
Example 1 - image with slow spinning effect
Example 2 - icon with fast spinning effect
The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.
1. JCE - download and install JCE from https://www.joomlacontenteditor.net/
You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus, when you open an article or a module, you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.
Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.
2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name.
<i class="fa fa-camera-retro"></i> fa-camera-retro
More icons can be found here.