0
Cart Empty
0.00 (0 votes)

If you need to add a new module with your own text or image, you need to create Custom HTML Joomla module using WYSIWYG editor.
We provide many examples of custom code with our templates, just follow Typography article to check how you can diversify the way of placing the content on your site.

Let's create the custom module. Navigate Extensions -> Module manager then click New button.  Then select Custom HTML from the list of module types.


Custom HTML Joomla module


Then you have to enter the module title and select the correct module position from the list but what we need now is opening the Custom output tab.


how to create custom HTML Joomla module


Depending on the functionality selected for the default Joomla 3.0 Editor - TinyMCE you will get simple, advanced or extended editor. Of course the extended one includes most of tools that you can use to create the module content. Check them all and choose the one that most suit your needs in Extensions -> Plug-in Manager -> Editor - TinyMCE -> Basic Options tab.

Now you can create the custom module using tools from the Toolbar or use the ready code from the typography of the particular template.
Let's take for example JM-Hotel for Joomla 3.0 - all custom modules that you can see on the demo site you will find in the typography of the template. 

Let's do the example 1 (animated hover css3 effects for images) from the typography.


animated-hover-1

What should you do to achive the same effect for your image?

1. Upload the image to root/images/modules or upload the image via Media Manager (Content -> Media Manager). This step referes to the following part of custom code.


upload-image-customcode

2. Then copy and paste the whole custom code from the article to the editor.  


copycustomcode

 

  • 1: at first open HTML Source editor window.
  • 2: change the path and image name - previously uploaded on the server
  • 3: change the default text with yours
  • click Update button 
  • save the module


The final result look as follows:


thisismycustomcode

NOTE: In the similar way you can create any example of the custom code from typography of the template.  Just copy the code and change the text. Be careful to not to delete any tag or class of the custom code since you may not to achieve the expected result. The custom code from the typography of the tempalte strictly relates to the template styles and it will not work with other template.

 

 

 

 

 

Users' reviews

Total rating: (0 votes) Add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2017 Joomla-Monster.com All rights reserved. Joomla! is Free Software released under the GNU/GPL License.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Joomla-Monster.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

You will Get best support ever!

Do you know that besides high-quality templates
& pro extensions given for FREE 
our customers appreciate the excellent support

Check here why :)