Actions

Help25

Difference between revisions of "Extensions Module Manager Custom HTML"

From Joomla! Documentation

(Added toolbar section.)
(Basic Options)
(4 intermediate revisions by 4 users not shown)
Line 1: Line 1:
===Custom HTML===
+
{{RightTOC}}{{page|needs images}}
 +
==How to Access==
 +
To ''''add'''' a new Custom HTML module or ''''edit'''' an existing Custom HTML module, navigate to the [[Help25:Extensions_Module_Manager|Module Manager]]:
 +
* Select {{rarr|Extensions,Module Manager}}
 +
 
 +
Click the ''''New'''' button and click on Custom HTML in the modal popup window.
 +
 
 +
To ''''Edit'''' an existing Custom HTML module, in the Module Manager click on an '''Custom HTML Modules Title''' or click the '''Custom HTML modules check box''' and then click the '''Edit''' button in the Toolbar.
 +
 
 +
==Description==
 
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.
 
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 HTML Module allows you to create a self-contained HTML unit and then put it in any valid location on a page.
 
The Custom HTML Module allows you to create a self-contained HTML unit and then put it in any valid location on a page.
  
'''Custom Output'''
+
==Screenshot==
 +
[[File:Help25-module-manager-custom-html-screenshot.png]]
  
 +
==Details and Options==
 +
===Details===
 +
{{Chunk25:Module Details}}
 +
 +
===Basic Options===
 +
[[Image:25custom htmlmod-basicparams.png]]
 +
*'''Prepare Content.''' (Yes/No) Prepare the content with the Joomla content plugins.
 +
*'''Select a Background-Image.''' Select an image to be applied as a background to the inner-div.
 +
 +
===Advanced Options===
 +
{{Chunk25:Module Advanced Options}}
 +
 +
===Menu Assignment===
 +
{{Chunk25:Menu Assignment}}
 +
 +
===Custom Output===
 
When you create or edit a Custom HTML Module, an editor session is opened using your default editor.
 
When you create or edit a Custom HTML Module, an editor session is opened using your default editor.
  
 
:''Important Note:'' 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.
 
:''Important Note:'' 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.
  
An example of a Custom HTML editor session is shown below. Note that the "No Editor" option is being used.[[Image:help25_mod_customhtml_output.JPG|frame|center]]
+
An example of a Custom HTML editor session is shown below. Note that the "No Editor" option is being used.
  
'''Basic Options'''
+
[[Image:Help25-module-manager-custom-html-custom-output-no-editor.png]]
[[Image:25custom htmlmod-basicparams.png|frame|center]]
+
 
+
'''Advanced Parameters'''
+
[[Image:25breadcrumbs-advancedoptions.png|frame|center]]
+
*'''Alternative Layout''' Can specify an alternative breadcrumb layout if alternatives are configured.
+
*'''Module Class Suffix''' Can specify an alternative style if additional styles are configured in your template.
+
*'''Caching.''' Options available to pull this parameter from the global configuration settings, or to disable Caching.
+
  
 
==Toolbar==
 
==Toolbar==
 
{{Chunk25:Help_screen_module_manager_edit_toolbar}}
 
{{Chunk25:Help_screen_module_manager_edit_toolbar}}
  
<noinclude>{{cathelp|2.5|Module Manager|Extensions}}</noinclude>
+
==Front End Screenshot==
 +
{{Chunk25:Help screen screenshot disclaimer}}
 +
Custom HTML module shown:
 +
 
 +
[[Image:Help25-module-manager-custom-html-frontend-screenshot.png]]
 +
 
 +
The Module Type name for this Module is "mod_custom". It is not related to any other component.
 +
 
 +
<noinclude>{{cathelp|2.5|Module Manager Help Screens|Extensions Help Screens}}</noinclude>

Revision as of 05:12, 1 March 2013

Contents

Copyedit.png
This Page Needs Your Help

This page is tagged because it NEEDS IMAGES. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.


How to Access

To 'add' a new Custom HTML module or 'edit' an existing Custom HTML module, navigate to the Module Manager:

  • Select Extensions  Module Manager

Click the 'New' button and click on Custom HTML in the modal popup window.

To 'Edit' an existing Custom HTML module, in the Module Manager click on an Custom HTML Modules Title or click the Custom HTML modules check box and then click the Edit button in the Toolbar.

Description

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 HTML Module allows you to create a self-contained HTML unit and then put it in any valid location on a page.

Screenshot

Help25-module-manager-custom-html-screenshot.png

Details and Options

Details

Help25-module-manager-details-screenshot.png

  • 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/Archived/Trashed) The published status of the item.
  • Access. The viewing level access for this 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.

Basic Options

25custom htmlmod-basicparams.png

  • Prepare Content. (Yes/No) Prepare the content with the Joomla content plugins.
  • Select a Background-Image. Select an image to be applied as a background to the inner-div.

Advanced Options

Help25-module-manager-advanced-options-screenshot.png

  • 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. Setting this parameter causes Joomla! to either add a new CSS class or modify the existing CSS class for the div element for this specific module. See here for more information
  • Caching. (Use Global/No Caching) Choose whether you wish to cache the contents of the module.
  • Cache Time. The time before a module is recached.

Menu Assignment

Help25-module-manager-menu-assignment-screenshot.png

On the left there is a list of menu items. You can chose between None, All and Select Menu Item(s) from the List. To assign to some but not all pages choose the third option and select the menu links that you want the module associated with. See How do you assign a module to specific pages? for more information

Custom Output

When you create or edit a Custom HTML Module, an editor session is opened using your default editor.

Important Note: 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.

An example of a Custom HTML editor session is shown below. Note that the "No Editor" option is being used.

Help25-module-manager-custom-html-custom-output-no-editor.png

Toolbar

At the top right you will see the toolbar:

Help25-Toolbar-Save-SaveClose-SaveNew-SaveCopy-Close-Help.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.
  • 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.

Front End Screenshot

Example Front End Site images are generic images using Joomla! core installation supplied free Front End Templates. The actual view can depend on the installed custom template used and the template's style for those views on a Joomla! website. Custom HTML module shown:

Help25-module-manager-custom-html-frontend-screenshot.png

The Module Type name for this Module is "mod_custom". It is not related to any other component.