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.

The developers at Joomla are working on a new release for Joomla. No specific date has been announced for the release of Joomla 4, but web developers and designers should keep in mind that it is coming.

This release will have a whole new look for the Administrative side of your Joomla site and will have a different default template called "Cassiopeia".

It is important that you keep up with the upgrades for your current Joomla site as it will make the migration to Joomla 4 go more smoothly.

Will my Protostar template work with Joomla 4?

Joomla 4 has a different framework and will use Bootstrap 4 instead of Bootstrap 2.

There could be issues with your old template working properly with the new version of Joomla.

We will be told more about how the migration process works when the migration upgrade is released.

Developers should keep this in mind before spending too much time on styling their current Joomla sites.

Other things to keep in mind is which Extensions your site relies on. The developers for your Extensions may not release a version that works with Joomla 4, it depends on whether the Extension works with the new Joomla 4 framework and how many people use the Extension. It may not be worth their time and energy to upgrade it.

Can I keep my site in Joomla 3?

Certainly, you can keep your site running in Joomla 3. Keep in mind that the developers of Joomla will no longer support it or upgrade it. There will be no future bug fixes or security updates. This may also hold true for your Extensions or Templates.

What will Joomla 4 look like?

You can download the Alpha version of Joomla 4 to install on a test site if you want to see some of the changes to Joomla.

Keep in mind that this version is not ready for live sites and that no Extensions or Templates are available for Joomla 4 at this time.

You will see a very different looking Administrative menu. Many of the familiar Joomla features are still there and the basic concepts of Categories, Articles and Menus still exist.  The Media Manager will be improved for Joomla 4 as well as SEO features.

The Cassiopeia template is quite different from the Protostar template. The Cassiopeia template uses Bootstrap 4 and SASS. SASS is a way to simplify stylesheets to use variables.

What should I do to get prepared for the migration from Joomla 3 to Joomla 4?

Keep up with Joomla 3 upgrades. The last Joomla 3.9+ upgrade will be necessary to use the migration version to Joomla 4.

Make note of what Extensions you have installed. The fewer Extensions, the fewer migration issues. Some more obscure or older Extensions may never be upgraded to work with Joomla 4, so be prepared to delete them from your site.

Consider using this migration / upgrade to revamp your website. You may want to give your web site a whole new look and or functionality. This will be the perfect time to rework your site.

What will migration to Joomla 4 entail?

It is highly suggested that you keep your live site as a Joomla 3 site and run the upgrade on a copy of your web site that is not available to the public. It can take some time to iron out any issues with templates and framework and styling issues. There may be glitches with extensions, PHP versions and other things. You don't want your live site to look bad or function incorrectly.

The first thing you will need to do is to list out all of the Extensions that your current site is using. Check to see that a Joomla 4 version of these Extensions is available. If there is not a Joomla 4 version available, you need to either remove that Extension or wait for a new version of the Extension to upgrade. Chances are that your Joomla 3 Extension will not function properly with Joomla 4.

You will need to duplicate the files and the database in order to do create a duplicate site for your upgrade. You will either need to move your site to a subdirectory on the host server or copy your site to a local compute with XAMPP or WAMP software installed. When you do this, the configuration.php file needs to be edited to point to the duplicated database with its new name.

You will need to upgrade your duplicate site to the latest version of Joomla 3 in order to run the migration version of the upgrade.

The Joomla 3 to Joomla 4 upgrade will be a migration. This means that it will need to change the core files to work with the new framework and software.

Will bj.zemplate.com have a guide for JOOM4?

No. Zemplate will not be creating a similar site for using the Cassiopeia template for JOOM4.

Resources

Joomla Project Roadmap

GetHub Joomla 4 Alpha 2

SASS website

Bootstrap website

 

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.

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.

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


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.