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; the custom module styles included in the template; the nav-pills, nav-list and nav-tabs menu styles; the error page; and the component (usually used in popup windows) page.

1. A Guide for Joomla
3’s Protostar
Template
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.
© 2005-2013 New Life in IT Pty Ltd - Visit learn.theartofjoomla.com to learn more about Joomla!

2. Protostar Module Positions and Styles
(Chrome)

3. Protostar module positions.

4. Module Style “well”
<!-- 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>
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.

5. Module Style - “no”
<!-- If the module content is set. -->
{{Module Content}}
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.

6. Protostar Menu Styles

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

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

9. 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.

10. 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.

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

12. Other Protostar Pages

13. A module named
A module named
“Search”.
“Search”.
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.

14. 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.

15. Further Reading
• kyleledbetter.com/jui/

16. it’s not the end
it’s just the beginning ...
learn.theartofjoomla.com