This allows you to create a Module that contains any valid HTML code. There are many cases where you might want to put free-form HTML inside a web page. For example, you might want to create an HTML Image Map or you might want to copy HTML code from PayPal, Amazon, or some other site.
The Custom Module allows you to create a self-contained HTML unit and then put it in any valid location on a page.
How to Access
To 'add' a new Custom module or 'edit' an existing Custom module, navigate to the Module Manager:
Select Extensions→Module Manager
Click the 'New' button and click on Custom in the modal popup window.
To 'Edit' an existing Custom module, in the Module Manager click on the Custom Module's Title or click the Custom module's check box and then click the Edit button in the Toolbar.
Screenshot
Details
Title: Module must have a title
Module
This Module allows you to create your own HTML Module using a WYSIWYG editor.
Options
Prepare Content: (Yes/No). Optionally prepare the content with the Joomla Content Plug-ins.
Select a Background-Image: If you select an image here it will automatically be inserted as an inline style for the wrapping div element
Common Details
Title. The title of the module. This is also the title displayed in the front end for the module depending on the Show Title Form Field
Show Title. (Show/Hide) Choose whether to show or hide the modules title in the front end. The title will be the one in the Form Field above.
Module Position. Choose the module position you wish this module to be displayed in. A custom module position can be entered for use with the load position plugin or the position button can be pressed to select a module position from the template.
Status. (Published/Unpublished/Trashed) The published status of the item.
Module Ordering. This shows a drop down of every module in the position that the current module is in. This is the order that the modules will display in when displayed on in the front end as well as in the Module Manager.
Start Publishing. Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.
Finish Publishing. Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).
Language. Item language.
Note. Item note. This is normally for the site administrator's use (for example, to document information about this item) and does not show in the front end of the site.
Common Tabs
Menu Assignment
On this tab there is a list of menu items. You can choose between On All Pages, No Pages, Only on the pages selected and On all pages except those selected from the List.
If the latter two options are selected a list will show with all the menu items on as shown in the screenshot above. This allows you to assign modules to some but not all pages, and by selecting the menu links that you want the module associated with you can customize on what pages modules appear/don't appear. See How do you assign a module to specific pages? for more information.
Module Permissions
Delete: (Inherited/Allowed/Denied). Allow or deny Delete for users in the Public group. Delete Allows users in the group to delete any content in this extension.
Edit: (Inherited/Allowed/Denied). Allow or deny Edit for users in the Public group. Edit Allows users in the group to edit any content in this extension.
Edit State: (Inherited/Allowed/Denied). Allow or deny Edit State for users in the Public group. Edit State Allows users in the group to change the state of any content in this extension.
Advanced
Alternative Layout. If you have defined one or more alternative layouts for a module either in the template or Joomla! Core, you can select the layout to use for this module. See Layout Overrides in Joomla 2.5 for more information about alternative layouts.
Module Class Suffix. A suffix applied to the CSS class of the Module. This allows you to create customized CSS styles that will apply just to this module. You would then modify the "template.css" file of your template to apply styling to this new class.
Enter this parameter with a leading space to create a new CSS class for this module. Enter the parameter without a leading space to change the CSS class name for this module.
Caching. Use Global/No Caching. Whether or not to cache the content of this Module. A setting of "Use Global" will use the Cache Settings from the Global Configuration screen.
Cache Time. The number of seconds for which to cache the item locally. It can safely be left at the default.
Module Tag. The HTML tag for the module to be placed in. By default this is a div tag but other HTML5 elements can also be used.
Bootstrap Size. (Values 0 to 12) This allows you to choose the width of the module via the span element built into bootstrap. For more information see the bootstrap documentation.
Header Tag. The HTML tag to use for the modules header or title. This can be an h1, h2, h3, h4, h5, h6 or a p tag. Note that you must use a module style (chrome) of html5 or add your custom module styles in <mytemplate>/html/modules.php.
Header Class. Here you can add optional CSS classes to add to the modules header or title element.
Module Style. You can use this option to override the templates style for its position.
Toolbar
At the top left you will see the toolbar:
The functions are:
Save: Saves the module and stays in the current screen.
Save & Close: Saves the module and closes the current screen.
Save & New: Saves the module and keeps the editing screen open and ready to create another module.
Save as Copy: Saves your changes to a copy of the current module. Does not affect the current module. This toolbar icon is not shown if you are creating a new module.
Cancel/Close: Closes the current screen and returns to the previous screen without saving any modifications you may have made.
Help: Opens this help screen.
Warning!
The editor does not allow you to enter certain HTML tags. To work around this, you can temporarily change your User's editor to "No Editor", create the Custom HTML Module, and then change the editor back to TinyMCE. Another option is to use an editor from an Extension that allows HTML code to be entered. Another possibility is (if the editor has this option) to switch to the HTML mode, enter the code, save and switch back to normal view.
Front End View
An example of a Custom HTML editor session is shown below. Note that the "No Editor" option is being used.
