Joomla 3 with the Protostar Template for Responsive Web Design

Illustration showing multiple devices

Joomla 3+ is a free Content Management System, or CMS, for creating websites. The term Joomla 3+ refers to any version of the Joomla software, version 3.x.x.

The installation files and additional information for Joomla 3+ can be found at:

A Joomla website requires that you have a hosting server for installation that meets the minimum requirements for Joomla. If you do not have a hosting account set up, you can choose to test drive a Joomla site by going to or

The hosting server must meet the minimum requirements for a Joomla installation as far as supported MySQL databases, PHP version and supported web servers. The hosting account must have access to a database for storing the information about the site as well as access to the file system for uploading and unzipping the Joomla installation files.

Joomla can also be installed on a local computer as long as it has WAMP, LAMP or XXAMP installed for accessing the database using Apache, PHP and MySQL. A local installation is often used for learning the Joomla system and for developing new sites before they go live on the web.

The Protostar Template

Joomla 3+ comes with two front end templates and 2 administrative templates. The front end templates determine what the visitor sees. The administrative template, or back end, is where the administrators create content, change settings, manage users, upload extensions for additional functionality, etc.

The Protostar template is one of the two front end templates.The Protostar folder and files can be found under the template directory in the Joomla installation files. The Protostar files contain the necessary coding and styles for a very basic website.

This web site is a guide for understanding the Protostar Template and making changes to it to fit your needs.

To find out more about installing and using Joomla CMS, we invite you to visit our associated site:

What is a Content Management System?

cms graphic

A CMS is an user interface for creating websites. A CMS compiles the web page from content contained in a database or other files according to the instructions dictated by the template and the CMS installation on the server.

The CMS makes it much easier to access the database with a user-friendly interface. You can create content and manipulate the appearance of the site without having to know how to use PHP or MySQL. If you want to change the way the website looks on the front end as far as the layout, colors and fonts, you should know about how to use HTML, XML and CSS. It is also very handy to be familiar with diagnostic tools such as Firebug to see the structure of the web page as it is displayed on the screen.

Joomla is the second most popular CMS on the internet worldwide. WordPress being the most widely used CMS per

Joomla 3+ is a CMS that uses HTML, XMLPHP and MySQL to create web pages. Per, Joomla is used by almost 3% of the websites worldwide and Joomla is used by almost 7% of all the websites using a CMS.

What is a template?

A template manages the appearance of the website. This includes the fonts, the colors, the layout and width of the columns and special effects such as borders, padding and other features of the site. With Joomla, the template combines styling and content from the database. The template uses HTML, CSS, JavaScript / jQuery and PHP to compile the content and modify its appearance.

The front-end template is the framework that compiles and displays the written content, the images, the navigation, the columns, the banner areas, the advertisements, etc. The administrative template provides the user interface for the website administrators to create and edit the content, manipulate the navigational menus, upload images, install extensions, etc.

With Joomla, the front-end template contains the initial file, index.php, that uses PHP to upload the content from the database to create every page on the website. Each page is compiled using this one main file. This file in turn uses many other files in the Joomla installation for formatting each section of the page. There are other PHP files that manage the display of content, menus, contact pages, links, etc. The template's index.php file also creates the HTML framework for the layout of the web pages.

The styling of the template is done by using CSS stylesheets. Depending on the template, there may on or more stylesheets associated with the template. The stylesheet determines the colors, fonts and layout of the web page.

A Joomla 3+ installation comes with the two front-end templates, Protostar and Beez3, and two administrative templates, isis and Hathor.

There are many other 3rd party templates available for Joomla. Some 3rd party templates are free, others are available for a cost. The use of a  3rd party template can save you many hours of styling and file manipulation to get the look and layout that you want from your site. It does make you dependent on the provider of the template when you need support or need to upgrade your site.

What is the Protostar Template?


The Protostar template is the default template that you will see when you first install Joomla 3+. Protostar template is developed by Open Source Matters, part of the Joomla! community.

Protostar is a very simple template, with a minimum of styling, that can act as a blank canvas for your site. Some changes to the layout and appearance are very simple, where other changes require a good knowledge of HTML and CSS.

You can find 3rd party Joomla templates at multiple locations throughout the Internet. There are free Joomla templates and ones you must pay for. If you have specific ideas about how you want your website to look, we suggest your look through these available templates. These templates will provide you with an interface that is ready to go with relatively little styling or modification. These templates may also have additional features that you can control through the Template Manager interface.

If you want to completely do your own thing with your Joomla website, you can modify the Protostar template. You should have a thorough knowledge of HTML and CSS to modify the Protostar template. An understanding of PHP and JavaScript is a great help, too.

The Protostar template has a only a few settings and options that can be accessed through the Template Manager in the administrative menu for Joomla. These settings allow you to upload a logo, change the site title and description, set the font for the site title and headings and change the color for the links. You can also choose if you want a Static or Fluid layout for the site. Other than these few settings, any changes to the Protostar template must be done through accessing and editing the template files.

Protostar uses Bootstrap 2 for the framework of the site. These settings determine the width of the columns and allow for a responsive web site as far as the multitude of screen sizes available.

Protostar has a single CSS stylesheet, template.css. All of the default styling is contained in this one very lengthy file, including the @media styling for smaller screen sizes such as phones and tablets. To change these styles, we suggest creating a custom CSS stylesheet that will contain the overriding styles that you want for your site. Protostar is written to recognize a stylesheet named user.css that is located in the css directory of the Protostar files. Using a separate stylesheet allows you to easily and access the new styles. It will also not be overwritten when upgrading the Joomla installation.

What is Bootstrap 2?

Bootstrap 2 is front-end web development tools made of CSS mixed with some JavaScript to help make websites more responsive in terms of various screen sizes. Also put to use are @media queries and utility classes. It was created by two web developers at Twitter to facilitate web design so that there is less styling required for responsive web design.

Bootstrap 2 uses a 12 across grid system that can be static or fluid. This means that the site will either snap to certain container widths or reduce in size with a fluid motion where all of the divs are a percentage of the container width and reduce in width accordingly.

Protostar is designed to use Bootstrap 2, not Bootstrap 3, which is the latest version.

It takes a bit to get your head around, but if used properly, can ease the need for extensive styling fixes for smaller devices.

Note: The styling for the pages can certainly be modified, but the web developer must work within the basic parameters of the template, media queries and utility classes in order for the site to function properly.

Click here for a more complete explanation of Bootstrap.

How does Protostar utilize Bootstrap 2?

Protostar uses the Bootstrap 2 grid system and allows you to select if you want a static or fluid layout. Both are responsive in that they change the size and location of the grid system depending on the screen size of the device.  

Responsive: Static Layout

The static layout uses 12 columns and styles the container to have a max-width of 960px. As you narrow the screen, the next static width for the container is 724px. Below that width, the container reduces width as the screen reduces width. The divs will stack vertically. A horizontal menu will become vertically stacked as well.

Read more about Protostar's Static Layout...

Responsive: Fluid Layout

The fluid system uses percentages instead of pixels for column widths. The .container-fluid class reduces proportionately in width as the screed reduces in width. The inner divisions within the container also reduce in width. For narrow devices the division stack on top of each other. This is all done in a fluid manner, constantly changing. This may be suitable for some sites, but the developer needs to keep in mind how images are going to work in this environment, as well as text wrapping.

Read more about Protostar's Fluid Layout...

Other Things to Note

With the default Bootstrap media queries, the responsiveness of a Bootstrap site can be seen by reducing the width of your browser window as well as on tablets and phones. This is because the media queries use min-width and max-width instead of min-device-width, etc.

The Bootstrap styling is intended to reduce the amount of CSS required to have a properly responsive website.  All of the styling for Protostar default template is contained in one file called template.css. You can create your own overriding styles for any of the default styles for Protostar, but you should be careful that you do not alter the responsive layout.


Has helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts

Still not finding a special topic?

Use Google's Search function below for search the content of