Help39

Extensions Module Manager Custom HTML

From Joomla! Documentation

Other languages:
English

Description

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  Modules

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 Modules Title or click the Custom module's check box and then click the Edit button in the Toolbar.

Screenshot

Help-3x-modules-site-module-manager-module-custom-html-en.png

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

Module

Common Details

Help30-module-manager-details-screenshot-en.png
  • Show Title. (Show/Hide) Show or hide module title on display. Effect will depend on the chrome style in the template.
  • Position. You may select a module position from the list of pre-defined positions or enter your own module position by typing the name in the field and pressing enter.
  • Status. (Published/Unpublished/Trashed) The published status of the item.
  • 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).
  • 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.
  • 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.

Menu Assignment

Help-3x-modules-site-module-manager-module-custom-html-menu-assignment-en.png

On this tab there is a list of menu items. You can choose between:

  • On all pages
  • No pages
  • Only on the pages selected
  • 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.

Options

Help-3x-modules-site-module-manager-module-custom-html-options-en.png
  • Prepare Content. (Yes/No). Optionally prepare the content with the Joomla Content Plugins.
  • Select a Background Image. Select or upload an image that will automatically be inserted as an inline style for the wrapping div element.

Advanced

Help-3x-modules-site-module-manager-module-custom-html-advanced-en.png
  • 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.
  • 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" (or "custom.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 minutes 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.
  • 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.

Permissions

Help-3x-modules-site-module-manager-module-custom-html-permissions-en.png
  • 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.
  • Frontend Editing. (Inherited/Allowed/Denied). Allow or deny Edit from the frontend of the site for users in the group.

Toolbar

At the top left you will see the toolbar:

Help30-Save-SaveClose-SaveNew-SaveCopy-Close-Help-toolbar-en.png

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.
  • Close. Closes the current screen and returns to the previous screen without saving any modifications you may have made.
  • Help. Opens this help screen.

Quick Tips

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.

Related Information

  • More about Modules: what is a module position, Description of the default Site and Administrator Modules.