1. Start
  2. Additional Files
  3. Template Installation
  4. QuickStart Installation
  5. MainBody/Sidebar Layouts
  6. Module Positions
  7. Theme Features
  8. Logo Editing
  9. Tips
  10. Homepage Variations
  11. HTML Structure
  12. CSS Files and Structure
  13. LESS CSS
  14. JavaScript Structure
  15. Graphic Source Files (.Png)
  16. Using Slideshows
  17. ShortCodes
  18. The ShortCode List
  19. Components & Modules
  20. Portfolio
  21. F.A.Q.
  22. Source & Credits

Magnus Multi-Purpose Theme for J2.5 & J3.2

Premium Template from ArtofThemes.com

Magnus Multi-Purpose Responsive Joomla! Theme is powerful multipurpose theme that will help you to build practically any site: for Blogs, Store Fronts, Magazines, Portals, Design Studios, Corporate Websites and whatever your mind can dream up! We hope you will enjoy working with Magnus theme. Thank you for purchasing we theme. Should you need any further information, please do not hesitate to contact us.

Yours faithfully, ArtofThemes.

Additional Files

Ancillary files for the template:

Template Installation

Step 1 - Template Installation (Not Joomla!)
1) Install from Admin → Extensions → Extensions Manager
2) Browse for MagnusV4 & Gantry Framework.zip and click Upload & Install


Step 2 - Template Default
1) Make the template default at Admin → Extensions → Template Manager
2) Select magnus - default * master
3) Press Make Default


If you install the only template file (MagnusV4 & Gantry Framework.zip), sample data does not load.

QuickStart Installation

If you are new to Joomla, we have Magnus Quickstart packages which are provided as an additional option to the template. Magnus Quickstart is a customized Joomla install, that installs a replica of the demo onto your site - inclusive of sample data, content, extensions, the template and sample images.

Note: All sample content images will be replaced with blank versions in the Magnus Quickstart version.

NOTE: Demo images are blanked out in Quickstart Package. Images used in the ArtofThemes demos for sample content should not be used by 3rd parties. These are for use as demo content only! See Terms of Service for more information.

The demo images have been replaced with placeholder images. (All stock images are just for demo purpose only and NOT included in the final purchase files)

How to Install Magnus QuickStart Package

Step 1 - Upload

Note: You can upload all the files via FTP, or use cPanel or SSH to upload the zip and
unzip directly onto the server. Enquire with your hosting provider.

Create a fresh database. (Tutorial for cPanel, Tutorial for Phpmyadmin)

Step 2 - Installation


MainBody/Sidebar Layouts

There are 84 module positions. If no module is published to a position, it will not appear, collapsing the entire area.

Non-Standard Elements
There are non-standard elements that are injected into the template grid structure when enabled via the template parameter, such as the logo into navigation-a. These features stack vertically with any modules published to that position.

Configure at Admin → Extensions → Template Manager → magnus, then go to Layouts tab and set the varying Mainbody/Sidebar layout possibilities.

Layout Control
Control all modules positions with Gantry, in terms of widths within the module row, and left/right/middle placement for the mainbody/sidebar area.

Gantry Framework : Layouts Documentation


Module Positions

MainBody Layouts

Configure at Admin → Extensions → Template Manager → magnus, then go to Layouts tab and set the varying Mainbody/Sidebar layout possibilities.

Here, you can change both the grid size of the Mainbody/Sidebar position, but also the location of the sidebars. You can place the sidebars at varying combinations to the left, right or both or the Mainbody.

Forced Positions

There are times when you just don't want to have your modules taking up all the room in a horizontal row no matter what the layout. For example you might want to have a module on the left and a module on the right, with nothing in the middle.

This is made easy with Gantry with the Force Positions parameter for each layout, allowing you to set the count to a specific row number, such as 4, even if 4 modules are not published for that row.

Injected Features

Features are specific elements of functionality, that are incredibly flexible and can be used to perform any kind of logic you would need. They are injected into a position when enabled, and are stacked vertically; inclusive of: Date, Font Sizer, Login Panel and more.

Grid Sizes

Configure at Admin → Extensions → Template Manager → magnus, then go to Layouts to set the grid widths and allocated positions.

By default, each grid is given an equal distribution, but this can be modified to a custom distribution between modules, such as 3/4/5 instead of 4/4/4. These options are available for when 2-6 modules are present.

Collapsible Positions

If no modules are published to a position, the entire area or row will not appear or collapse.

Theme Features

There are Features that are injected into a position when enabled, and are stacked vertically; which includes: Date, Font Sizer, Branding, Copyright, ToTop Smooth Slider, System Messages, Reset Settings, SmartLoad, Display Component On/Off and Google Analytics.

Logo Editing

Uploading the Logo

There are two methods of changing the Magnus logo: via the manual change and logo picker.

If you cannot see your new logo, ensure you have uploaded it to the right directory and the directory permissions are writeable. Enquire with your hosting provider.
The Logo Picker

Enable Logo and set to Custom at Admin → Extensions → Templates Manager → magnus → Features.
Select your logo, Insert and Save

The Logo Picker

Enable Logo and set to Custom at Admin → Extensions → Templates Manager → magnus → Features.
Select your logo, Insert and Save


I recommend using Firebug Addon from Mozilla. This way you will find exact styles applied for each tag and trust me, it will make your life easier. It also has a console to track JS errors.

Here you can see a demos using Firebug http://www.youtube.com/results?search_query=firebug .

Just download it and test it, you won't regret it!

Homepage Variations

You will find different homepage variation options in each design.

Homepage Variation 1 - http://demo.artofthemes.com/joomla/magnus/index.php/homepage/home-variation-1

Homepage Variation 2 - http://demo.artofthemes.com/joomla/magnus/index.php/homepage/home-variation-2

Homepage Variation 3 - http://demo.artofthemes.com/joomla/magnus/index.php/homepage/home-variation-3

Homepage Variation 4 - http://demo.artofthemes.com/joomla/magnus/index.php/homepage/home-variation-4

Homepage Variation 5 - http://demo.artofthemes.com/joomla/magnus/index.php/homepage/home-variation-5

HTML Structure

This theme is a fixed 960px grid layout with many columns and variations. The template is based on Gantry Framework which is very powerfull and has many variations of layouts. The grid system is based on 12 columns each 60px wide, separated by 20px space. More details about 960 grid system you can find here.

As you can see in this screenshot, Gantry system has multiple rows where the modules are included. Each row has maximum 6 modules (example).

CSS Files and Structure

 MAGNUS Template uses these css files:


LESS is a dynamic stylesheet language that extends CSS with dynamic behaviours such as variables, mixins, operations and functions. LESS allows your code to be cleaner, optimized whilst also reducing the overall time to create and maintain your code base.

Gantry supports LESS, rooting the compiler and core processes into the Framework itself. Furthermore, the administrator and frontend template are constructed with LESS files that are then outputted as CSS files to the browser. Gantry handles all the complex processing, so you can concentrate purely on the styling.

Note, when making modifications, remember to:

Always edit the .less and not the compiled .css files that are output to /css-compiled/ folder
Ensure the /less/, /css/, and /css-compiled/ directories for the template are writeable
Clear the Joomla, Less, Gantry and Browser caches

LESS: the Basics

LESS is designed to extend CSS, so you start with the basic principles and attributes that are associated with CSS, IDs, classes and others. Therefore, the format will look familiar. In terms of examples, the /LESS files will be shown first, followed by the Compiled CSS files which are the outputted files that appear in the /css-compiled/ directory.


These are standard values that can be repeated throughout your stylesheets, and thus, one line change will generate a global change, rather than having to change each instant manually. An example from the Gantry template is below:

@bodytitle: #303030;
a:hover {
color: @bodytitle;
h1, h2, h3, h4, h5, h6 {
color: @bodytitle;

/* Compiled CSS */
a:hover {
color: #303030;
h1, h2, h3, h4, h5, h6 {
color: #303030;

As you can see in the above example, anywhere @bodytitle is used in the LESS files, it will be changed to #303030 in the compiler.

Mixins combine Variables with Functions, by allowing you to include all the properties associated with a class into another class. These class injections can include functions, as shown in the example extracted from LessCSS.org below:

.rounded.corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;

#header {
#footer {

/* Compiled CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

Nested Rules

Nested Rules are for inheritance, allowing your style sheets to be cleaner and shorter, by placing selector groups within one another, rather than specifying each instant each time. See a Gantry Template example below:

ul.menu {
list-style: none;
margin: 0;
padding: 0;
ul {
list-style: none;
li {
margin-bottom: 8px;
a, .item, .separator {
display: block;
font-size: 1.1em;
font-weight: bold;

/* Compiled CSS */
ul.menu {
list-style: none;
margin: 0;
padding: 0;
ul.menu ul {
list-style: none;
ul.menu li {
margin-bottom: 8px;
ul.menu li a, ul.menu li .item, ul.menu li .separator {
display: block;
font-size: 1.1em;
font-weight: bold;

Functions & Operations

Functions & Operations allow you to perform mathematical operations to CSS values as well as manipulate values through functions, as is available with JavaScript. See the below example extracted from LessCSS.org:

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);

/* Compiled CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
#footer {
color: #114411;
border-color: #7d2717;

The above outline is to introduce you to the basics of how LESS works, for a more detailed overview of how variables, mixins, functions and operations work, please visit: LessCSS.org.
LESS in the Gantry Template

All LESS files associated with the template are located in the /templates/[TEMPLATE]/less/ directory. Gantry 4 utilizes a powerful PHP-based LESS compiler powered by lessphp. Gantry 4 outputs the processed LESS files into the /templates/[TEMPLATE]/css-compiled/ directory.

Not all CSS files are compiled into a single file. Any CSS file that requires to be standalone, for purposes of template parameters, such as loading Fusion Menu instead of SplitMenu, will be independent of the main /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE] file.
How are LESS files compiled?

When a change is detected, Gantry automagically recompiles your LESS files into CSS files. To add a LESS file, you have two options. You can insert the following function into your PHP code:


Where NAME.less is the name of your less file in your /templates/[TEMPLATE]/less/ directory. The addLess() method takes several optional parameters:


An example of this as used in the default gantry template is:

$gantry->addLess('global.less', $gantry->templateName . '-compiled.css', 8, array('headerstyle'=>'"header-'.$gantry->get('headerstyle','dark').'.less"'));

You can see in this example that global.less is the source LESS file, and the output is going to be gantry-compiled.css. Priority has been harcoded as 8, and the last parameter is an array of a single item headerstyle passed to the LESS compilation. The ability to pass variables makes less compilation very powerful and flexible.

When you pass variables to less compilation your output will take the format of [TEMPLATE]-compiled-[MD5_VARIALBLE_NAME_VALUES], for example: gantry-compiled-845729384248h3hf4haeioh.css.

An alternative way to add LESS files is to simply create the file then add a reference in the /less/global.less master LESS file. The global.less file imports the other LESS files via the @import function, see the example below:

// Core variables and mixins
@import "variables.less";
@import "mixins/index.less";

// Core and Grid
@import "gantry-core.less";
@import "joomla-core.less";

// Template core styling and layout
@import "template.less";
@import "style.less";
@import @headerstyle;
@import "prettify.less";

Furthermore, for features that require a separate LESS file, you can use a variety of different techniques. The simplest is to insert the add LESS function into /features/styledeclaration.php, as noted in the example from the Gantry Template:

if ($gantry->get('typography-enabled')) $gantry->addLess('typography.less');

This adds a conditional, where the parameter typography-enabled is active, the /less/typography.less file will be compiled.

LESS Template Options

You can control CSS compression, Compile Wait Time and Debug Header, as well as manually clear the cache with the Clear Cache button at Extensions → Template Manager → gantry → Advanced → Less Compiler.

Additionally, CSS compression increases site performance and optimization by consolidating all the CSS into a single file, with none or negligible whitespace. This reduces the file size of the CSS file and making it quicker for a browser to load.

Custom LESS files

Often you will have a need to add some custom CSS to override a particular style in the template. You may not want to edit the provided LESS or CSS files as this could potentially cause problems with updates of the template. With Gantry 4 you can create custom LESS files of the format: /less/[LESS_FILE_NAME]-custom.less and these will get picked up and compiled into the main compiled CSS file.

For example in the default Gantry template, there is a file less/template.less. If you were to create a new file called less/template-custom.less, you could add your own custom LESS elements in here and they would automatically be pulled in to your compiled CSS file.

JavaScript Structure

Most of the js files are located in templates/gantry/js/ folder.

Graphic Source Files (.Png)

You can find all the graphic source files into the Png folder, including the main png layout of the homepage, menus, logos and slider source files, etc...

Using Slideshows

 All the slideshows are converted to modules. You can find all of them inside Modules Manager, inside the position called "feature-a".

They are each assigned to a certain page, according to the menu.

Each module has it's own "administrator" panel where you can add your own slides and change it's settings.

For Slideshows:

Nivo Slider - http://demo.artofthemes.com/joomla/magnus/index.php/slideshows/slideshow-one

RokSpRocket Slideshow - http://demo.artofthemes.com/joomla/magnus/index.php/slideshows/slideshow-two

Widgetkit Slideshow - http://demo.artofthemes.com/joomla/magnus/index.php/slideshows/slideshow-three

Ken Burns Effect - http://demo.artofthemes.com/joomla/magnus/index.php/slideshows/slideshow-four

Images, Video and Flash Slider - http://demo.artofthemes.com/joomla/magnus/index.php/slideshows/slideshow-five

And so on, you will find plenty options in each module.

Note: Sometimes, YJ PieceMaker Module (Images, Video and Flash Slider) would be able to not working.
In such cases,  YJ PieceMaker Module need to save the module on and off in administrator module manager.


WYSIWYG Friendly Typography and Styling

RokCandy provides BBCode style macro functionality for Joomla. It provides a WYSIWYG-safe macro syntax to allow you to easily add complex HTML with a simple BBCode macro. RokCandy changes the preset syntax, such as [example] to the relevant HTML code during the rendering of the Joomla article.

RokCandy allows you to create complex HTML output as simple macros to allow your complex content to be created quickly and easily with a minimum of fuss.


If the following was set in the RokCandy configuration: [example title={title}]{text}[/example] it would output the following code:

<div class="example">
<p>Some content</p>

That is a simple example, but the degree of sophistication is limited by your own creativity. A more complex example be can seen below:

<div class="complex">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="br">
<div class="header">
<h3 class="title">Title</h3>
<span class="subheader">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.</span>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="/images/stories/image1.jpg" alt-"Image" class="image"/><br />

The above example could be styled to be an expandable, 4 rounded corners element which distinct styling for the header and content divisions. As you can see, it is a complex setup via HTML to implement, and even more difficult if you have an illiterate client or content editors are in play. The following syntax could be used [complex title={title} subheader={subheader} image={image}]{text}[/complex] which is clearly simpler and easier to use.


The ShortCode List

ShortCodes for HTML Elements / Typography











[notice class="{classname}"]{text}[/notice]

[highlight class="{classname}"]{text}[/highlight]

[icon class="{classname}"]{text}[/icon]

[contentbox class="{classname}"]{text}[/contentbox]



[blockquote class="{classname}"]{text}[/blockquote]

[list class="{classname}"]{alist}[/list]




[inset side="{side}" title="{title}"]{text}[/inset]

[dropcap class="{classname}"]{text}[/dropcap]





[readon url="{url}"]{text}[/readon]

[readon2 url="{url}"]{text}[/readon2]

ShortCodes for Icons

[icon class="{email}"]{text}[/icon]
<span class="text-icon email">{text}</span>

[icon class="{phone}"]{text}[/icon]
<span class="text-icon phone">{text}</span>

[icon class="{quote}"]{text}[/icon]
<span class="text-icon quote">{text}</span>

[icon class="{chart}"]{text}[/icon]
<span class="text-icon chart">{text}</span>

[icon class="{cancel}"]{text}[/icon]
<span class="text-icon cancel">{text}</span>

[icon class="{tags}"]{text}[/icon]
<span class="text-icon tags">{text}</span>

[icon class="{write}"]{text}[/icon]
<span class="text-icon write">{text}</span>

[icon class="{info}"]{text}[/icon]
<span class="text-icon info">{text}</span>

[icon class="{clock}"]{text}[/icon]
<span class="text-icon clock">{text}</span>

[icon class="{rightarrow}"]{text}[/icon]
<span class="text-icon rightarrow">{text}</span>

[icon class="{leftarrow}"]{text}[/icon]
<span class="text-icon leftarrow">{text}</span>

[icon class="{people}"]{text}[/icon]
<span class="text-icon people">{text}</span>

[icon class="{downarrow}"]{text}[/icon]
<span class="text-icon downarrow">{text}</span>

[icon class="{uparrow}"]{text}[/icon]
<span class="text-icon uparrow">{text}</span>

[icon class="{person}"]{text}[/icon]
<span class="text-icon person">{text}</span>

[icon class="{calendar}"]{text}[/icon]
<span class="text-icon calendar">{text}</span>

[icon class="{doc}"]{text}[/icon]
<span class="text-icon doc">{text}</span>

[icon class="{whitestar}"]{text}[/icon]
<span class="text-icon whitestar">{text}</span>

[icon class="{twitter}"]{text}[/icon]
<span class="text-icon twitter">{text}</span>

[icon class="{search}"]{text}[/icon]
<span class="text-icon search">{text}</span>

[icon class="{star}"]{text}[/icon]
<span class="text-icon star">{text}</span>

[icon class="{facebook}"]{text}[/icon]
<span class="text-icon facebook">{text}</span>

[icon class="{home}"]{text}[/icon]
<span class="text-icon home">{text}</span>

[icon class="{photo}"]{text}[/icon]
<span class="text-icon photo">{text}</span>

[icon class="{heart}"]{text}[/icon]
<span class="text-icon heart">{text}</span>

[icon class="{minus}"]{text}[/icon]
<span class="text-icon minus">{text}</span>

[icon class="{plus}"]{text}[/icon]
<span class="text-icon plus">{text}</span>

ShortCodes for Buttons

[btn_grey url="{url}"]{text}[/btn_grey]

[btn_grey2 url="{url}"]My Button Text[/btn_grey2]

[btn_grey_light url="{url}"]My Button Text[/btn_grey_light]

[btn_red url="{url}"]My Button Text[/btn_red]

[btn_red_light url="{url}"]My Button Text[/btn_red_light]

[btn_red_light2 url="{url}"]My Button Text[/btn_red_light2]

[btn_red_light03 url="{url}"]My Button Text[/btn_red_light03]

[btn_green url="{url}"]My Button Text[/btn_green]

[btn_green_light url="{url}"]My Button Text[/btn_green_light]

[btn_green_light2 url="{url}"]My Button Text[/btn_green_light2]

[btn_blue url="{url}"]My Button Text[/btn_blue]

[btn_blue_light url="{url}"]My Button Text[/btn_blue_light]

[btn_blue_dark url="{url}"]My Button Text[/btn_blue_dark]

[btn_blue_dark2 url="{url}"]My Button Text[/btn_blue_dark2]

[btn_blue_dark_text url="{url}"]My Button Text[/btn_blue_dark_text]

[btn_orange url="{url}"]My Button Text[/btn_orange]

[btn_orange_light url="{url}"]My Button Text[/btn_orange_light]

[btn_orange_light2 url="{url}"]My Button Text[/btn_orange_light2]

[btn_orange_dark_text url="{url}"]My Button Text[/btn_orange_dark_text]

[btn_purple url="{url}"]My Button Text[/btn_purple]

[btn_purple_light url="{url}"]My Button Text[/btn_purple_light]

[btn_purple_dark url="{url}"]My Button Text[/btn_purple_dark]

[btn_purple_light2 url="{url}"]My Button Text[/btn_purple_light2]

[btn_pink_dark url="{url}"]My Button Text[/btn_pink_dark]

[btn_pink url="{url}"]My Button Text[/btn_pink]

[btn_yellow_light url="{url}"]My Button Text[/btn_yellow_light]

[btn_yellow_dark_text url="{url}"]My Button Text[/btn_yellow_dark_text]

[btn_brown url="{url}"]My Button Text[/btn_brown]

[btn_brown_light url="{url}"]My Button Text[/btn_brown_light]

[btn_white url="{url}"]My Button Text[/btn_white]

[btn_black url="{url}"]My Button Text[/btn_black]



Components & Modules

K2 ('de facto' content solution for Joomla! professionals) - http://demo.artofthemes.com/joomla/magnus/index.php/k2/k2-category

Kunena Forum - http://demo.artofthemes.com/joomla/magnus/index.php/kunena

RokSprocket (A Revolutionary Multi-Purpose Content Module) - http://demo.artofthemes.com/joomla/magnus/index.php/portfolio

Content Slider - http://demo.artofthemes.com/joomla/magnus/index.php/features/content-slider

Headlines Module - http://demo.artofthemes.com/joomla/magnus/index.php/features/headlines-module

Google Map Module - http://demo.artofthemes.com/joomla/magnus/index.php/contacts

Newsletter Module - http://demo.artofthemes.com/joomla/magnus/index.php/features/newsletters

Widgetkit Lightbox - http://demo.artofthemes.com/joomla/magnus/index.php/features/lightbox

Widgetkit Spotlight - http://demo.artofthemes.com/joomla/magnus/index.php/features/spotlight

Media Player - http://demo.artofthemes.com/joomla/magnus/index.php/features/media-player

Image Gallery - http://demo.artofthemes.com/joomla/magnus/index.php/features/image-gallery


The portfolio section is built with the amazing K2 Component.

To edit the Portfolio items, go to Components > K2 > Items. They are located inside the Portfolio category.


Magnus Template FAQs

1. What are Magnus template features?
- Please check our Template Features page for all Magnus features in one complete list.

2. Is Magnus compatible for Joomla 2.5?
- Yes, Magnus is compatible with Joomla 2.5.

3. Is Magnus compatible for Joomla 3.0?
- Yes, Magnus is compatible with Joomla 3.0.

4. Can I install QuickStart Package on existing Joomla! website?
- No. QuickStart Package will install both Joomla and the demo sample content and images, so you will need a fresh Joomla! installation.

5. I installed Magnus QuickStart Package but the images are different with the demo site.
- As explained, to avoid image license copyright issue, all sample content images shown in our demo site will be replaced with blank versions in the QuickStart Package version.

6. YJ-PieceMaker Module (Images, Video and Flash Slider) is sometimes it works and sometimes it's not...
- Sometimes, YJ PieceMaker Module (Images, Video and Flash Slider) would be able to not working.
In such cases,  YJ PieceMaker Module need to save the module on and off in administrator module manager.

7. Php version error when installing Joomla 3.0
- If you get an error like this: Your host needs to use PHP 5.3.1 or higher to run this version of Joomla!

htaccess.txt instead of. htaccess. (Change the name of this file.)
and enter the following code anywhere in htaccess:

# Use PHP 5.3
AddType application/x-httpd-php53 .php

8. "JUser: :_load: Unable to load user with ID: 42" error

This is a generic issue with Joomla and quick start packages. You will need to edit your database with phpmyadmin.

In order to fix the issue, you need to perform the following actions:

Solution 1:

Please, Change the author of an all content item.


Solution 2:

Please backup your database before making changes. Change "Jos" with your prefix as it might be different.

1) Open your Joomla database using PHPMyadmin tool.

2) Find and open (click "Browse" icon) "jos_users" table:

3) Find and open (click "Edit" icon) the record with "Super User" name:

4) Change Super User id value to 42 and click "Go" button:

5) Find and open (click "Browse" icon) "jos_user_usergroup_map" table.

6) Find and open (click "Edit" icon) the record with "group_id" value 8, change "user_id" value to 42, then click "Go" button:

7) Logout from Joomla admin section and login back

That's all, the issue should be fixed.

Feel free to check the detailed video tutorial below:

Source & Credits

Thanks so much to



Help File