A Guide for Joomla 3's Protostar Template

© 2005-2013 New Life in IT Pty Ltd - Visit learn.theartofjoomla.com to learn more about Joomla!

This set of slides documents many of the features included in the Protostar template that is distributed with Joomla 3. It includes the module layout and positions for Protostar and its custom module chrome.

A Guide for Joomla 3’s Protostar Template

Protostar Module Positions and Styles (Chrome)

Protostar module positions.

<!-- Display code if module content is not empty. --> <div class="well {{Module Class Suffix}}"> <!-- Display title if set. --> <h3 class="page-header">{{Module Title}}</h3> {{Module Content}}</div>

Module Style “well”

Protostar’s “well” style is almost identical to the built-in “xhtml” style, except that it uses the “well” class instead of “moduletable”. Note the space between “well” and the module class suffix.The “well” class is controlled in less/template.less and the less/variables.less.

<!-- If the module content is set. -->{{Module Content}}

Module Style - “no”

Protostar’s “no” style is identical to the built-in “none” style. It will simply echo the module content if there is any without displaying the module title.

Protostar Menu Styles

This gives you a feel of the sample data used to produce the menus.

Standard menu module display in the “position-8” (left) or “position-7” (right) positions. No menu class suffix is applied.

The “nav-pills” menu style. Works best in “position-1”. It supports a drop-down for the second level items only. Remember to include a space before the class suffix.

The “nav-pills” menu style. It supports a drop-down for the second level items only.Remember to include a space before the class suffix.

The “nav-list” menu style. It only highlights the top level menu item.Remember to include a space before the class suffix.

Other Protostar Pages

Protostar’s error page (/templates/protostar/error.php). Note that the page expects that a module with a title of “Search” exists. An error will result if it does not exist.

A module named “Search”.

A module named “Search”.

Protostar’s component or modal page (/templates/protostar/component.php). This can be seen by adding “?tmpl=component” to the URL. Note that there is no padding on the left of right of the layout.

• kyleledbetter.com/jui/

Further Reading

it’s not the endit’s just the beginning ...learn.theartofjoomla.com