The Protostar template come included with the free Joomla installation. It is a very basic template, with a minimum of styling, a simple layout, and not very many options for alterations. 

The Protostar template was created by Open Source Matters. Open Source Matters is a non-profit organization that supports the Joomla! project.

You are free to modify the Protostar template how ever you wish for your own Joomla website. There are a few things that you should know before you dig in and start making alterations to the template's files.

Have a good understanding of HTML, CSS, JavaScript, PHP and MySQL

Joomla, along with the Protostar template, uses a combination of HTML, CSS, JavaScriptPHP and MySQL to compile each web page on your Joomla website. In order to change the look of the site, as far as colors, fonts, and the layout, you need to have a command of HTML and CSS. To dig into the Protostar template, to change the framework, you need to understand PHP. You don't need to write PHP code necessarily, but you should understand how if else statements work. Protostar also uses the Joomla API for pulling components into the page.

Modifying the Protostar template is not for the novice. You really should have a good command of the basics of web development before embarking on the path of customizing this template. If you don't really know CSS and HTML, then consider hiring a professional web developer or find a 3rd Party template that meet your needs. It can be a very frustrating experience to get a web site looking and functioning the way you want if you don't have the basics down first.

If you do want to learn Joomla, you should consider using the free Joomla Demo site. Here you have a 90-day trial period to create a basic Joomla site to alter as your wish. It is hosted on their servers, so you have the correct hosting environment. The web site you create here is not tied to your domain name, but you do have the opportunity to copy the files and database to import to your own hosting environment that you wish. This is a good place to see if you really want to use Joomla for your web site.

The files for the Protostar template

The files for the Protostar template are all located within the protostar folder within the templates folder. When customizing the Protostar template, you will likely only need to access a few files for editing. These files are:

index.php - this is the heart of the template, it is used to create every page on your website. It is located in the root of the Protostar folder

template.css - this is the single style sheet for the Protostar template. It is located in the css sub-folder

custom.css - this is a separate file that you will create to hold your custom styles. This will be placed into the css sub-folder.

templateDetails.xml - this is the xml file that you may need to access if you want to create new positions. It is located in the root of the Protostar folder

Another area of the Protostar folder you may need to work with is the html folder if you are going to create overrides for the core Joomla files.

How to access the files for editing

If your Joomla website is hosted on a remote server, there are several ways to access these file for editing.

Using FTP:  you can choose to download these files to your local computer for editing using an FTP program such as FileZilla.

If you are editing the file locally, you need to use a text editor of some sort for editing the files. Do not use a word processor like Microsoft Word. Word processors add additional characters for formating the text. You can choose from a variety of text editors that have special features for editing web documents. Some of these are free, other require purchase. NotePad++ is free and includes formatting for basic web design files and scripts, it also has PlugIns that will save the file back to your remote server each time you save the file.

Your hosting company's interface: you should also be able to download these files using your hosting company's File Manager. Many hosting companies also allow you to edit files from their control panel's file manager. This is OK for simple edits, but the Control Panel text editor does not offer the same powerful features as a text editor designed for web development files.

From Joomla's Template Manager: Joomla 3+ allows you to access these files through Template Manager as well. Go to Extensions -> Template Manager and select Protostar from the 'Template' column. Click on the name of the file and the file will open up for editing in the text area. This is OK for simple edits, but the Joomla text editor does not offer the same powerful features as a text editor designed for web development files.

Backup your files before editing

It is very important to keep a recent backup of the Protostar files you are editing. As you add new lines, you run the risk of breaking the layout or bringing the website down completely. Even if you are just working in a development environment, you still need to be able to revert to the site before the changes were made. You may also need these backup files to refer to as you are editing the original files.

Download the files to your local computer and place them in a local folder. You may want to keep a series of sub-folders, labeled by date, so that you have several versions to choose from.

If you are just editing the Protostar folders, it isn't required to backup the entire Joomla website and database, but you should do regular backups of your entire Joomla website as a matter of practice. This protects you if your site is hacked or the database is corrupted somehow.

Keep a running log of changes and add comments

As you make changes, you should consider keeping a running log of the changes as you make them. Keep this log in a separate .txt file on your own computer or in a secure place with the files on the hosting server. Six months down the line, you need to be able to see what was changed and why, as you likely won't remember. Also if you for some reason lose the changes, you have something to refer to to replace them.

If other developers take over the web site, they can refer to this log to see what changes were made.

You should definitely put comment lines above and below any changes that you make to the index.php file. This way, if this file gets overwritten with your Joomla upgrade, you can easily refer to the backup and see what changes were made and put them back into the new index.php.

For changes to the PHP areas, add comments like this:

/******CUSTOM EDITS*****/

Changes go in here

/*****END CUSTOM EDITS*****/

Single line comments in the PHP can have two forward slashes.

changed code // brief explanation

For changes to the HTML portion of the page, comments should be enclosed properly

<!-- CUSTOM EDITS -->

Changes go in here

<!-- END CUSTOM EDITS -->

The same format is used for single line comments in HTML

For comments in the CSS, you must use the following format with the forward slash and star at the start and a star followed by a forward slash at the end.

/* header section styles */

Modify your site in a development environment

If you are making major styling, layout and content changes to your website, you should really be working in a development environment. This could be on a local computer that is equipped with XAMPP, WAMP or LAMP or it could be in a sub-directory on your host server. 

If you develop your site on a local computer, you don't have to worry about the client seeing it, the general public stumbling across it or the web crawlers indexing it. There is a drawback with developing locally if you want to show your site to someone else, like your client for review and approval. Also, if you have questions for the Joomla forum, they can't look at the front end of your site to give you advice.

If you develop in a sub-directory on the host server, you have the advantage of using your hosting company's PHP and MYSQL environment. You do need to be concerned that your site can be seen by the general public and the client and the search engine crawlers. When you are developing, this can be very bad indeed. What you can do is take the site "off-line" in the Global Configuration for the site. This way, to view the site, you must have a login and password. The general public and web crawlers can't get past the login screen. You can give your client a temporary username and password to view the front end of the site for review and approval. I say temporary, so you can disable that user profile while you make the edits they want. They likely will need their own permanent login and password to access the site once the development process is finished.

Once you have the site looking and functioning as you like, you then move the installation up to the root of the hosting files. You will need to make some minor changes to the configuration.php so it locates the the new file locations properly.


Has BJ.Zemplate.com 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 bj.zemplate.com.