The Protostar Template for Joomla 3+ comes included with the base Joomla installation.  In fact, when you install Joomla 3+, Protostar is already set as the default template. You can tell the default template by going to:

Extensions -> Template Manager

and looking for the "Site" Template with the star symboltemplate-star.

The "Site" template is the template that displays for the user on the Front End of the site.

The isis template is the default template for the Administrative side of the site. It will also have a star.

If you don't want to use the Protostar Template, you can select Beez3, which is also included with the base Joomla 3+ installation. Beez3 is a more traditional Joomla Template with multiple stylesheets.  The Beez3 template is also responsive.

You can also choose to install one of thousands of other Joomla templates from 3rd party sources. Be sure that they are written to work with the version of Joomla 3 that you have installed. Using a 3rd Party template can save you many hours of styling your site to fit your needs.

Below is a list of the topics that explain the features of Protostar in depth.

static option

The settings for the Protostar Template allow for two options regarding the layout for the page, Static or Fluid.

These settings mainly affect the appearance on wide screens such as computer monitors and many laptops. These are the default settings, and can be manipulated by creating overriding styles in a custom stylesheet. On narrow screens, there essentially is no difference between the two settings.

The settings are found under Extensions -> Templates. Open the protostar template in the Style column.

Static Setting for Protostar

The Static setting for Protostar will place the main content of your webpages into <div class="container">. The stylesheet of template.css will target styles for that class, .container. With the Static setting, you can have set widths for the content and side columns for larger screens.

static widescreen

Screens wider than 980px

With the Static setting, the container will not be as wide as the monitor screen with widths over 980px. The container will have a fixed with of 980px (includes padding). The right, center and left columns will have a fixed width that is a percentage of the width of the container.

Screens between 979px and 768px in width

For narrower screens, such as on tablets, the container will reduce in width as a percentage of the screen size, but will maintain the three columns. In some cases the space around the container will still be visible, though some tablets will eliminate it. The right column, the center column and the left column will also have a width that is a percentage of the size of the container.

As the screen narrows, the three columns will reduce in width.

Screens less that 768px

For very narrow screens, the container will fill the screen. There is no space around the container. The columns will all have a width of 100% of the screen and will stack on top of each other.

Fluid Setting for Protostar

The Fluid setting for Protostar will place the main content for you webpages into <div class="container-fluid">. The stylesheet of template.css will target the class of .container-fluid with the appropriate styles. With the Fluid setting, you need to design your content and modules to appear well at any width.

fluid screen

Screens wider than 980px

With the Fluid setting, the content will fill the screen. There is no space around the container. Each column is a percentage of the width of the screen. As the screen narrows, the columns will also narrow.

Screens between 979px and 768px in width

With the Fluid setting, the content will still fill the screen. Each column is a percentage of the width of the screen. As the screen narrows, the columns will also narrow.

Screens less that 768px

For very narrow screens, the container will still fill the screen. The columns will all have a width of 100% of the screen and will stack on top of each other.

The Protostar template is one of the two front end templates that come included with a Joomla 3+ installation. Protostar is a fairly simple template, but it is responsive for proper display on a variety of devices.

You have the choice of using one of the two included templates for the front end or installing a 3rd party template. This is a choice that you should make early on when developing your site. Different templates will display your content in very different way and may affect how you organize that content.

The Protostar template is a good starting point if you just want to make a few changes to the appearance and functionality of the site. It is like a blank canvas. The Protostar template can also be a good starting point for skilled developers that want to make major layout changes to their site and do not wish to use a 3rd party template.

Protostar as a base for a customized template

The Protostar template can be modified to look pretty much however you wish. It pulls together the basic components of Joomla and the PHP and Joomla UI are already present. Modifications to the files within the Protostar template can be made to create a website that meets your specific needs.

Appearance

You can modify the basic appearance of Protostar fairly easily if you understand CSS style sheets. You can change colors, fonts, backgrounds and column widths simply by adding or editing lines in a style sheet named user.css. Do not modify the template.css file that comes with Protostar as your changes will be overwritten when you upgrade Joomla.

Layout

If you want to do major changes to the layout or add module positions, you can do that as well. You will need to edit the index.php and possibly templateDetails.xml files. To make changes at this level you should have a good understanding of HTML markup. There is PHP scripting in index.php that is essential for the site to load properly. You should at least know enough to understand basic concepts of PHP.

Functionality

If you have a good understanding of the Joomla API, you can change these settings in the Protostar template. You can make changes to the index.php and add Template Overrides. The Joomla API are the bits and pieces of the Joomla interface that pull in other information from the core files to create the web page.

Joomla Updates

If you do any modifications to the Protostar template, you run the risk of losing these changes when you upgrade the core Joomla files. You need to take proper precautions to not lose your customization. Add a custom style sheet and keep a log and comment any changes that you make to the template files. You may also choose to copy and rename the modified Protostar template so that Joomla upgrades won't overwrite the files.

Using 3rd Party Templates for your Joomla site

3rd Party Templates are templates that are ready to go. You don't have to do any styling. You can just start adding your own content. There are free templates and those that come at a cost.

3rd Party Templates may be simple or quite complicated. They may have many settings to make your site look unique. These settings may include font choices, colors, layout and backgrounds. These templates may have a large range of positions for your modules or other special ways to present the content.

There are pros and cons to using 3rd Party Templates.

Pros

  • the template is ready to go, you don't spend time with major styling
  • they may have some very nice features or options that add to the appeal of your web site
  • they may be specifically designed to work with other extensions, such as eCommerce, social, forums, etc.

Cons

  • there may be a cost for the template, or you may find you need to add other paid for extensions to get the functionality that you want.
  • the template may not be available for the next major upgrade for Joomla
  • they can be rather complicated if you wish to customize them
  • the core files may have extensive overrides that cause problems with some Joomla features
  • you are relying on the expertise and abilities of other developers
  • they can add security risks or other vulnerabilities

Things to watch out for when using 3rd Party Templates

Do your homework before installing 3rd party templates.

  • Choose templates from reliable sources. 
  • Be sure the template you choose works with the latest release of Joomla
  • Look at reviews for the template you choose.
  • Do a search in the Joomla forum to see if there are many posts with problems associated with the template.
  • Is there support for the template if you run into problems?
  • Is there a forum to research or post questions?
  • Will the template provider keep up with new releases of Joomla?

The Protostar template has a choice of static or fluid for the layout under the Options tab in the Template Manager.

Option for Static Layout in Joomla 3.2's Protostar Template

The static layout reduces the containing div and columns in a series of steps designed for use on monitors, tablets and phones.

The styling for these layouts is a stylesheet called template.css in the css folder under the protostar folder in templates.

The static layout option will have an outside containing div called container of max-width: 940px. This will keep the content of the site at 940px wide for large monitors and wide laptops.

The #sidebar#content and #aside divs are a percentage of the containing div of .row-fluid which has a width of 100% and will fill the containing div of the container.

As the screen size reduces (by reducing the browser width or on portrait view on tablets), the container width steps down in size to 767px. The #sidebar, #content and #aside columns are narrowed down accordingly as their widths are a percentage of the outside container.

As the screen size reduces even more (by reducing the browser width or on phones), the container width is set to auto - which essentially makes the container reduce in width as the screen reduces in width. If you have a horizontal menu in position-1, which is placed in the #navigation div, the menu will stack vertically and each menu item will be the width of the entire screen.  The interior columns are all set to auto as well and take up the entire width of the container and stack vertically.  The default layout for Protostar will place #sidebar on top, #content in the middle and #aside below.

Monitors & Tablets Landscape: .container {width: 940px;} and .row-fluid {width: 100%}

This is the layout for the Static setting for Protostar on computer monitors that have a screen width of 980px or more. Many laptops will also have a screen with this many pixels or more, but tablets and phones will not.

This is the styling that comes with template.css. The .container element has a set width of 940px and padding of 20px, which adds up to 980px. The @media styles are not being used at this point. The .container element will stay this width no matter how wide the monitor as long as it is greater than 980px.

.row-fluid .span3 {width: 23.4043%} This will govern the width of your #sidebar and #aside columns

.row-fluid .span6 {width: 48.9362%} This will govern the width of your #content if you have modules on the right and left.

Protostar Template with Static setting

Tablets Portrait: .container {width: 724px;} and .row-fluid {width:100%} 

This setting is for narrower screens but not phones. This will be applied for many tablets in landscape mode. You will still maintain your columns, but they are a percentage of the .row-fluid containing div., so because the .container is narrower, so are the columns. The columns may be narrower than they were when viewed on a monitor.

@media (min-width: 768px) and (max-width: 979px) { }

.row-fluid .span3 {width: 23.4043%} This will govern the width of your #sidebar and #aside columns

.row-fluid .span6 {width: 48.9362%} This will govern the width of your #content

If you have something in those columns that require a fixed width, such as advertisements, you need to override this settings with your custom stylesheet. This can present a challenge. 

You can override these percentages with your custom stylesheet if you want wider side columns. Keep in mind that to override the settings for these narrower settings you need to place the overrides in an @media group for this stepped width.

static-step2-screenshot

Phones Landscape: .container {width: auto;}, .row-fluid {width:100%} and .row-fluid [class*="span"] {width:100%}

@media (max-width: 767px) {}

At this width, the #sidebar, #aside, and #content divs align vertically.

static-step3-screenshot

Phones Portrait: .container {width: auto;}, .row-fluid {width:100%} and .row-fluid [class*="span"] {width:100%}

static-phone-screenshot

In the index.php and the template.css stylesheet that comes with the Protostar Template for Joomla 3, there are multiple designations for the .span classes. These Bootstrap 2 classes are what allows for the responsive web design for the Protostar Template.

The 12 span designations for Bootstrap 2

The Bootstrap 2 style page is set up in 12 columns, .span1 uses one column, .span2 uses two columns, .span 3 uses three columns and so forth. There are 12 .span classes with .span12 using the full width. The template.css file also designates a certain percentage for gutter space as well.

The styling with Protostar for these span classes determines what percentage the element will take up of the containing element. 

If an element is assigned class="span1", it will take up 1/12 of the containing element (allowing for gutter space), class="span2" will take up 2/12, class="span3" will take up 3/12 and so forth. Instead of fractions, the template.css assigns percentages to each span class.

Protostar's index.php file

In Protostar's index.php file, the .span framework is set up for the entire site. If you look through the HTML, you will see set span classes assigned to different sections of the page.

The span class for the content area

The span class assigned to the content area, <main id="content">, will change depending on if any modules are assigned to position-7 and/or position-8. A variable of $span is declared in the PHP area. This value of this variable is determined with a series of if elseif statements that test if there is anything in position-7 or position-8. 

If there are no modules in position-7 or position-8, the content area is defined as <main id="content" class="span12">.

If there are one or more modules in position-7 but not in position-8, the content area is defined as <main id="content" class="span9">.

If there are one or more modules in position-8 but not in position-7, the content area is defined as <main id="content" class="span9">.

If there are one or more modules in position-7 and in position-8, the content area is defined as <main id="content" class="span6">.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
    elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span9";
}
    elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span9";
}
    else
{
    $span = "span12";
}

If you look at the <body> portion of index.php, you will see only three places where elements are assigned a .span class.

<div class="row-fluid">

<div id="sidebar" class="span3">

<main id="content" role="main" class="<?php echo $span;?>">

<div id="aside" class="span3">

This is where you see that id="content" is assigned the $span that was determined in the <?php /> section.

Protostar's template.css file

For static layouts, on large screens, the containing <div> that encompases all the content is assigned class="container" which is set to a width of 940px with another call setting it to max-width: 960px. The <header> element is set to be as wide as the container. The <div class="row-fluid"> contains the right and left columns and the content area. The row-fluid div is set to be as wide as the container. So each of the columns and the content area, #aside, #content and #sidebar, are controlled by their .span class which is set to be a percentage of the row-fluid. The <footer> is again as wide as the container.

For fluid layouts, the container is assigned the class="container-fluid" and does not get a specific width. It takes up the entire screen, save for a 20px padding. The <header>, <div class="row-fluid"> and <footer> are as wide as the containing div. The #aside, #content and #sidebar elements are a percentage of the row-fluid, so they get wider or narrower as the browser window gets wider or narrower.

The template.css has multiple styles for the .span classes. Right off the bat, you have this call:

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

This makes anything that has the .span designation, .span1, .span 2, etc. float to the left.

The template.css file is extremely long, so we won't go into every width for each .span class.

In summary, the template.css breaks down each .span classes to a percentage.

.row-fluid .span3 {
    width: 23.404255317%;
}

.row-fluid .span6 {
    width: 48.936170208%;
}

.row-fluid .span9 {
    width: 74.468085099%;
}

.row-fluid .span12 {
width: 99.99999999%;
}

Custom Styling with Protostar

If you want to add the .span classes to elements such as modules, you can add that class in the Module Class Suffix text box in Module Manager. It is very important that you place a space before the word span. You would enter something like " span2" (don't put in the quotation marks).

Remember, the span classes define the width of the element as compared to the containing element. If you were to assign a class of span4 to a module that is put into position-3, it will take up roughly 3/12th or 25% of the width of the <main id="content"> area. If the content area has expanded to the width if the entire page, your module will be 25% of the entire page. If the content area is narrowed down to make room for the two side columns, your new module will also be narrowed down proportionately.

You could use this styling if say you wanted 4 columns in the <footer>, each module could be given a class of .span3. They would automatically float left and have a width of approximately 1/4 of the containing <footer> element.

If you wanted two side by side modules in the #aside column, you would be better assigning your own class name, then styling that class for something like 48%, as .span3 can not be easily divisible by 2.

In the one and only stylesheet for Protostar, layout.css, the @media calls for Protostar are the following: 

@media (min-width: 768px) and (max-width: 979px) 
@media (max-width: 767px) 
@media (max-width: 480px) 
@media (min-width: 768px) and (max-width: 979px) 
@media (min-width: 1200px) 
@media (max-width: 979px) 
@media (min-width: 980px) 
@media (max-width: 767px) 
@media (max-width: 980px) 

I am showing these mostly to itterate where the breakpoints are for the @media calls, 1200px, 980px, 768px, 480px

If you study the template.css stylesheet for Protostar, you will see some of the @media calls repeated.  I think this is to group certain functionality. You will also see later @media calls override settings in earlier ones.  This puzzles me at this point, but I am sure there must be some reason.

If you want to override these settings, I might suggest that you insert a custom stylesheet in the index.php <head> section rather than editing the template.css.  I suggest this for two reasons.  One, you will know exactly which styles you have altered if they are in a separate stylesheet. Two, if you upgrade your Joomla site, your custom styling can be easily replicated and won't be removed when the template.css is replaced.

Certain classes have their display settings changed at these breakpoints.  Things are turned on or off.

Wide screens

Above 767px, for static layouts, the .container width is set to a width of 940px. The setting for .row-fluid is width: 100%; and all of the .row-fluid [class*=".span"] (every class starting with .span) settings are at a percentage.

The <ul class="nav-pills"><li> tags have float: left assigned to them and they layout horizontaly in the .navigation div.

max-width: 767px;

For the static layout, the .container width is set to 724px.

If you view a Protostar site on a tablet or phone or even a narrowed down broser window, with the static layout selected, you will see that there is a little cushion on either side of the container.  At 767px and below, the body has a padding-left and padding-right of 20px

What you might note at widths between 767px and 480px are the horizontal menu <ul class="nav-pills"><li> tags. These stay at the same width as on a wide screen display, but they might wrap around and form two lines if there are a number of them. The height of the .navigation div expands to accomodate the two lines.

max-width: 480px;

At very narrow screen widths, the .container width is set to auto, which means that it will now reduce in size proportionately to the screen size.

The .row-fluid is set to 100% (which really doesn't change from before) but more importantly, all of the .row-fluid [class*=".span"] settings are width: auto.  This is what controls the stacking at the more narrow screen widths.  At widths greater that 480px, the widths of these classes within .row-fluid are set to percentages.  This holds true for both the static layout and the fluid layout.

The horizontal menu <ul class="nav-pills"><li> tags are now stacking vertically as float:none; is assigned for them and they expand to the width of the .navigation div.

 


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.