0.00 (0 votes)

This is the helpful tutorial about modifying custom HTML modules in JM Beauty Center template.
Web developers and users familiar with CSS may find it helpful.

 

3 boxes under the header image

This is the custom module published on position 'top' on demo site of this template.

TIP: How to locate module position?

3-boxes

 

Predefined custom html code for each custom module always can be found in Typography of each separate template - look for this article under Template Features menu item on each demo site.

Replace with your content

The best way to adjust text is to open Source Code Editor in the module.

source code editor

 

Next, you need to paste HTML code from typography article.
If you would like to edit the existing module I also recommend to copy code from the typography and adjust in Source Code Editor once again. Because after adding a custom HTML code in module, you may find out that the HTML code is different once you save the module.
It is because Joomla Editor changes ' ' to white space and could remove some HTML tags.

Finally, you may modify the module content.
However, remember to adjust the text and URLs only. Do not remove HTML tags or classes. It may spoil the view of the module.

 

3boxes-code

 

In this module you can adjust :

  1. Box link URL (yellow)
  2. Image URL (pink)
  3. Text (blue)

TIP: How to add new custom HTML module?

In some custom modules, you can also find a class to change the appearance of the module.

Amount of displayed items in a single row.

 

3boxes-columns

Example:

  1. col1 for 1 box in a row
  2. col2 for 2 boxes in a row
  3. col3 for 3 boxes in a row
  4. col4 for 4 boxes in a row

Icons.

3boxes-icons

 

For technical purpose in some custom HTML modules icons are added with CSS, not as HTML IMG tag.
In JM Beauty Center there are 3 icons in this module: 'icon1', 'icon2' and 'icon3'.

Want to add additional box with new icon?

If you want have more icons. You need to add css code and image.

In most of our Joomla 3 templates this part of css styles you will find in:

'joomla/templates/template-name/less/editor.less'
'joomla/templates/template-name/less/modules.less'

if icons images are changing in color versions also in:

'joomla/templates/template-name/less/style1.less'
'joomla/templates/template-name/less/style2.less'
'joomla/templates/template-name/less/style3.less'

Use your favourite HTML Editor to edit necessary files.

But how to locate css styles related with this module?

There are two ways.

You can check class name in typography.

box3-typoghraphy

You can use code inspector (example Firebug for Firefox).

In this custom HTML module, there is main class named 'jm-white-box'. 
Remember enable Developer Mode (Joomla 3.x) before changes in files.

TIP: How to modify LESS and CSS files in Joomla 3.x template?

 

screen8

 

Example of adding 'icon4' in JM Beauty Center top module:

 

screen9a

screen9

 

Of course you need also upload icon image to selected location.
In this case it will be :

'joomla/templates/template-name/images/style1/box4.png'

Below you will find example of use 4 boxes in JM Beauty Center.

 

4boxes

 

Worth to mention:

Some of custom codes you can use also in DJ-Mediatools album module.
Example is module 'Meet our team' in JM Beauty Center.

Editing or adding code from typography is exactly the same as in normal custom HTML module, but in this case you need to add code in DJ-Mediatools Custom Slide instead module.

meetourteam-code

You will find slides in Backend -> Components -> DJ-Mediatools -> Custom Slides.

About the author

Artur Kaczmarek
WordPress and Joomla lover. Artur Kaczmarek works as a programmer and coder at Joomla-Monster.com and PixelEmu.com. Senior products quality reviewer. Recent passed level - specialist at accessible templates (WCAG/Section508). Artur graduated IT and econometrics. He is a passionate about new technologies and in particular everything related to programming and coding for content management systems.

Users' reviews

Total rating: (0 votes) Log-in to add review

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-2018 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Buy with discount today!

-7% on ALL with the code: UTJFD 

copy the code and use today!