Configuring The Protostar Template

joomlaTemplatesJoomla includes the free Protostar template.  This template is highly configurable, and is responsive.  This article covers some of the configurations that I've made using this template.

Pill button menu

When using the top position, you can create a pill button menu.

  1. Go to Extensions > Modules.
  2. Click the New button to create a new Menu Module.
  3. For the Position select Navigation [position-1].
  4. Select the Advanced tab.
  5. For the Menu Class Suffix enter ' nav-pills'. Note the space before and do not include the quotation marks.



To make changes to the default footer for this template, edit the lines near the bottom of the following file.



Custom CSS

If you make changes to the existing CSS files, they will get overwritten every time you upgrade Joomla.  By creating your own user.css file, you'll be able to keep your custom changes.

  1. Start by logging on as a Super User.
  2. Go to Extensions > Templates > Templates.
  3. Click the Protostar Details and Files link.
  4. In the Templates: Customise screen, select the Editor tab (selected by default).
  5. Click the New File button.
  6. Select CSS.
  7. Enter a Name:  user.
  8. Select File type:  CSS.
  9. Click Create.

Your file is now open and ready for editing.

Joomla 3.5+ has added php code to index.php so that this file will be found without having to edit the index.php file. The user.css will be loaded after the template.css, so the styles in user.css will overwrite styles in template.css if they are set up properly.

The user.css that you just created will not be overwritten if you upgrade Joomla in the future. This is because the new Protostar template that comes with the upgrade does not have that file inside its css folder. Any styles that you added to user.css will remain as is.


Example CSS

Using Firebug you can browse through your website's elements to determine where they get their CSS from, and subsequently write new CSS code to change the appearance of these elements.  Here is some example code for elements that I have changed.

Important Note: When changing CSS, you will often not see any change until you clear the cache on your web host.


To change the colour of all h3 and h4 elements:

h3, h4 {color: #2d2dff;}


To change the colour of the Page heading and Article title respectively, there is a class of page-header, and the elements are h1 and h2:

.page-header h1 {color: #555;}
.page-header h2 {color: #ad38b1;}


To change the colour of the main header:

.brand {color: #bd6acc;}
.brand:hover {color: #9657a1;}


To change the colour of the description text that appears below the main header:

.site-description {color: #66336f;}


To change the colour of the login button:

.btn-primary[disabled] {
  background-color: #9657a1;


To hide a module when using a mobile phone:

@media (max-width: 767px){

Now you can add " hidden-phone" as a Module Class Suffix, to the module that you'd like to disappear for mobile phones.


Module Background Colour

If you want to change the default grey color background of a module, you can add the following code to the user.css file: {
background-color: #c9e2ef;

Note that you can make it transparent with the following:

div.transparent {
background-color: transparent;
border-style: none;
box-shadow: 0px 0px;


Then open the module for editing.

  1. Go to Extensions > Modules.
  2. Open the Module for editing.
  3. Select the Advanced tab.
  4. Edit the Module Class Suffix.

Background image

If you'd like to add a tiling image to the background, start by uploading a tileable image to your images folder (e.g. /images/template/bricks.jpg) and then you can add the following code to the user.css file: {
background-image: url('/images/template/bricks.jpg');

Hyperlink colour

To change the colour of all hyperlinked text, add the following code:

body a {
color: #53779b;


Thanks for visiting.