1

I am creating a website in joomla, and I am using the Custom HTML Module most of the time. I have been styling in each module every time I create a new one but I only need the same style. Sample of a custom html module:

Samples.

<style>
#amateurIcon{margin-top: 100px;}
</style>
<p id = "amateurIcon"><img src="images/Industries_icon/industry_chef.png"alt="" /></p>

Then

<style>
#otherIcon{margin-top: 100px;}
</style>
<p id = "otherIcon"><img src="images/Industries_icon/industry_other.png" alt="" /></p>

It's a waste of time for me doing this over and over again. I just want to create a class where I can call anytime in any of my Custom HTML Module. How can I do it?

Thanks.

Aaron
  • 2,591
  • 4
  • 27
  • 45
  • Have you considered adding a class to your p elements and then add the desired style in the main template css file? e.g.: `

     – ilias Feb 17 '15 at 16:41
  • I used class, but can I use it in other HTML modules as well? – Aaron Feb 19 '15 at 00:16
  • Yes you can, the styles will apply to all the instances of the module where this stylesheet is loaded. – ilias Feb 19 '15 at 14:38

1 Answers1

0

This is just one of the reasons you should always use classes for styles, not IDs.

If you are only styling the image then you can target the image directly, not the parent p element, e.g.

In your template.css;

.img-icon {margin-top: 100px;}

In your modules: 

<img class="img-icon" src="images/Industries_icon/industry_chef.png"alt="" />
…
<img class="img-icon" src="images/Industries_icon/industry_other.png" alt="" />
Seth Warburton
  • 2,234
  • 1
  • 16
  • 17