Help screens styleguide

From Joomla! Documentation

Revision as of 14:21, 16 May 2010 by Jcutrone (Talk | contribs)

Return to Joomla! 1.6 Help Screen Wiki Page

This is a work in progress and should be used as a guideline for creating help screens for Joomla 1.6. This offers consistency throughout the help screens to allow for easier navigation. Feel free to add to this.

  • Image Size : (Please add)
  • Wiki Image Tag : [[Image:imagename.png,jpeg]]
  • Chunck Tag : (Please add)


How is this related to Joomla! Is it a component can be accessed from the front-end and/or back of Joomla!?

How to Access

The path taken to get to the screen.

  • Select (menu item) → (submenu item) → (ect.) from the drop-down menu of the Joomla! Administrator Panel.


This goes into more detail about what the component does. There should be no specific format to this section because the description should be in direct correlation with the purpose and functionalitly of the component. There may be many subsections to the description that describe more specific details, best to be outlined through the use of bullet points.


Screenshot overall look of the page.


Describes the available icons and their associated functions in the toolbar for this screen in the. Use chuncks here because many will be the same for different screens. Best to provide a picture of the toolbar.


Describes the available options for this screen. There may be many links within this screen that group together certain options. Break down these linked screens into separte sub-heads and outline their individual functions. It is also a good idea to include screenshots of these linked screens because their options will be most likely differenet.

Quick Tips

Gives some advice to a person, recommends the best options based on a wide audience of developers.

Related Information

Should connect other pages of the Help Wiki.

Notes for help screen editors

  • Layout of a typical Help Screen
  • Overview of Help screen chunks
    For usage information and examples see the following templates:
  • Content editors
  • Did you notice a mistake or do think it's useful to add some extra information? You're welcome to modify the Help Screen. Please change the status of the modified Help Screen after you modified it:
    • Is the status at the moment 'Ready' or 'To be moved'? Change it to 'Modified by [name]' (replace [name] for your username at the Joomla! Docs Wiki)
    • Is the status at the moment 'To be reviewed'? You don't have to change the status in that case.
  • Image file naming convention:
    • help16-[menu system path separated by dashes]-[screenElementType].png,jpg
      • Replace [menu system path separated by dashes] with the names of the menu items that you would need to select to get to the item you are taking a screenshot of. Separate menu items with a dash ( - ) and if the menu item name has more than one word in it, then seperate the words with an underscore ( _ ). Do not use spaces in your file name. Replace spaces with the underscore ( _ ) character.
      • Replace [screenElementType] with the type of the screen element that your picture contains. Screen element types are:
        • screen - This is a screenshot of the entire menu item
        • toolbar - This is a picture of the menu item's tool bar.
        • menu - This is a picture of the menu item's menu bar.
        • NOTE: As more screen element types are needed, add them to this style guide so that help documentation developers can refer to this guide and stay consistent.
      • Examples using the image naming convention:
        • A screenshot of the Extension Manager's "Discover" screen would be named: help16-extension_manager-discover-screen.png
        • A screenshot of the Extension Manager's "Discover" screen tool bar would be named: help16-extension_manager-discover-toolbar.png