Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Responsive templates for creating a website with Joomla

Written by joomfreak // Thursday, 09 January 2014 15:30
Responsive templates for creating a website with Joomla

There are various ways to build a website; one of the cheapest and most effective is to use an open-source system like Joomla and work from a template, i.e. a model for the various pages.

When choosing a template, ensure that it makes the site as readable and accessible as possible to ever-growing numbers of users. To that end, as there are now myriad ways for browsing the web, including on the move and via devices of different sizes and resolutions, it is vital that the pages are genuinely usable even on smartphones and tablets.

To see why, a brief glance at the latest figures on Italy’s mobile-internet market should suffice. Even though there is still a long way to go, in the 2 years 2012–2013, web use on mobile devices grew exponentially, stimulating new business and cementing the success of traditional e-commerce sites, too.
The range of formats and resolutions to grapple with is swelling day by day, forcing website builders to adapt continually.

The need for templates that display properly on mobile devices, too, is clear: remember the last time you tried to access a site on your smartphone and it was so hard to see that you had to pinch to zoom – you probably gave up and headed for a competing website that was easier to use. A great many potential leads are lost like this.

In practical terms, then, we have an opportunity to abandon the traditional web architecture, whose methods and dimensions tend to be predefined for viewing on a desktop PC.

Efforts to address these problems have led to responsive designs: web designs that can adapt to the browser dimensions, automatically resizing to keep the content optimally readable and usable.
It is a real revolution in the web arena, because it has also brought a radical change in the underlying approaches to website architectures.

The innovative germ at the heart of these templates is the fluid grids, which we can think of as a progression from the liquid layouts, which had already become the latest big thing.
In this case, rather than designing a layout based on a fixed number of pixels or on adjustable percentage values, we work in terms of proportions: when a layout is displayed in a small space (as on a mobile device) or is enlarged on a smart TV, all its component elements are resized and repositioned.

A good free responsive template doing the rounds is Oxygen, which is compatible with Joomla versions 2.5 and above and is fully tailorable.
Joomla supports customisation of multiple parameters; with responsive templates, many of them can be set up to suit your specific needs.


This template is supremely versatile, making it ideal for developing a wide variety of sites: the modules can assume as many as 48 different positions, and there are 100 fonts and 3 colour variants, so the combinations are practically endless.

After downloading the template from the developer (, go to the template’s control panel; from the top menu bar, select Extensions --> Template Manager --> Your Template Style.

Note that, when you install a template for Joomla, the system attributes the defined style as the default for that template.

You can get around this limitation simply by using the "Save as" function. That way, you can define several styles to assign to different pages of the site via the Assignment tab in the menu.

All the main parameters are editable directly from the Template Manager page, starting with the style, which you can set up by choosing from the options in the drop-down menu.
These include the fonts – 14 WebSafe fonts and over 100 Google fonts – allowing you to fully personalise every element of the page, from the body to the title of the article or module. Of course, you can also choose their colours.


In the Template Manager’s Logo section, you can set the parameters for the website logo and title, to exercise total control over arguably the most vital element of any webpage. To load your image, just click on the Select Image field and then position the logo within the page.

If you prefer a text-based logo, the template also lets you deactivate the image option: in this case, the logo will be replaced by the text that you enter (along with the brand slogan, if any), which you can then amend by choosing the font and colour via the dedicated selectors.


As for the Layout Options, there is no need to set the sizes of the elements manually: the default values will be adjusted automatically according to how many modules have been defined and positioned on the same line. The default regime can be disabled, if you wish to define the width of each individual page element yourself.


Finally, you can position the side columns in the layout on both sides or just one, to the right and/or left of the area dedicated to the content, choosing their respective widths.
Naturally, multimedia content and social pages can also be added (simply enter the relevant URL).


For specific purposes – e.g. for Google Analytics – it can be handy to add text bands both at Head level and in the template body, using the dedicated fields provided.


Since this is a responsive template, as we have mentioned, it is also mobile friendly and adjusts automatically to different devices.
Img courtesy of Oxygen.

Additional Info

  • blink ma
    blink ma - Monday, 06 December 2021 10:50

    Interesting Facts Of 온라인카지노 카지노사이트 우리카지노

  • John Bing
    John Bing - Sunday, 06 September 2020 07:23

    This is really informative.

  • Livebid Official
    Livebid Official - Tuesday, 01 September 2020 08:12

    Always we find amazing post on your website. Here, with their effort and backing, users can not only resolve toner problems but also get assistance to have a hassle free experience.

    Livebid is the best-trusted sports website in India. With almost 20 years of online gaming scores provider.

  • james thomas
    james thomas - Tuesday, 24 December 2019 13:00

    How To Take Access To HP Support Assistant For Fixing Unknown Errors?
    Do you want to access to official HP Support Assistant? Are you not capable of resolving unknown technical errors cropping up while on HP printer? In such a case, you should approach the above mentioned source in order to get the right solution, at the right time from the right troubleshooting professionals.

  • james thomas
    james thomas - Tuesday, 24 December 2019 12:59

    Get Brother Pinter Support For Fixing Toner Issues On Time
    Don’t feel blue just because of toner problems! Just obtain real time assistance directly from certified and adroit customer care experts with the aid of Brother Pinter Support. Here, with their effort and backing, users can not only resolve toner problems but also get assistance to have a hassle free experience.

  • sam jonas
    sam jonas - Thursday, 05 December 2019 08:19

    Amazing!! Are they mobile friendly?

  • John Peter
    John Peter - Thursday, 03 October 2019 19:16

    these are the awesome templates also are mobile-friendly

    SLOTONLINEPULSA - Wednesday, 05 June 2019 08:55

    slot online pulsa adalah sistem baru untuk bermain judi disitus taruhan online terpercaya

    SLOTONLINEPULSA - Wednesday, 05 June 2019 08:54

    slot online pulsa

Login to post comments Blog Responsive templates for creating a website with Joomla
Wednesday 22 May 2024

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.