A Guide for Joomla 3's Protostar Template

132,509 views

Published on

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.

Published in: Technology
6 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
132,509
On SlideShare
0
From Embeds
0
Number of Embeds
55,740
Actions
Shares
0
Downloads
417
Comments
6
Likes
16
Embeds 0
No embeds

No notes for slide

A Guide for Joomla 3's Protostar Template

  1. 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. 2. Protostar Module Positions and Styles(Chrome)
  3. 3. Protostar module positions.
  4. 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. 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. 6. Protostar Menu Styles
  7. 7. This gives you a feel of the sample data used to produce the menus.
  8. 8. Standard menu module display in the “position-8” (left) or “position-7” (right) positions. No menu classsuffix is applied.
  9. 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. 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. 11. The “nav-list” menu style. It only highlights the top level menu item.Remember to include a space before the class suffix.
  12. 12. Other Protostar Pages
  13. 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. 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. 15. Further Reading• kyleledbetter.com/jui/
  16. 16. it’s not the end it’s just the beginning ...learn.theartofjoomla.com

×