1.
A Guide for Joomla3’s ProtostarTemplateThis set of slides documents many of the features included in the Protostartemplate that is distributed with Joomla 3. It includes the module layout andpositions 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” classinstead 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 ifthere 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 classsuffix is applied.

9.
The “nav-pills” menu style. Works best in “position-1”. It supports a drop-down for the second levelitems 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 atitle 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 byadding “?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