HL-Box joomla! plugin documentation
HL-box Joomla! ® 1.5 plugin
Installation
1. Install the plugin trough the joomla! backend installer:
-->Extensions --> install/uninstall --> browse for the zip
2. Once uploaded you need to activate the plugin:
--> extensions -->plugin manager -->hl-box
3. Activate it and set the parameters such as overlay color, choose the icon, icon position. Read tooltip text for correct syntax and for a better comprehension of what are you doing.
4. Place the icon button in your content article. Just put the tag {hlbox} where you want to show it. Control throught plugin paramters the position, alignement, img v&hspace, etc..
5. You can also put the activate icon in a module, but since J!1.5 doens't permit anymore to put any {tag} (j! 1.0 does, instead), follow these steps:
a. create a custom html module
b. put this code inside and publish it:
<a href="plugins/content/hlbox/icons-turn-on/turn-on-lights.png" rel="hlbox"> <img src="plugins/content/hlbox/icons-turn-off/switch-off-legacy.jpg" align="left" vspace="5" hspace="5"> </a>
Highlight your content
Once finished installing when you hit the icon a dark overlay will cover the entire page. The next step is to assign a z-index>10 to those divs in your content you want to be highlighted, on top of the overlay.
To do so look into plugin parameters. The overlay has a z-index=10, then to highlight parts of your content you have to wrap those parts of content into divs (if not already done) and assign to their classes or ids a z-index >10 throught the parameters on the left. You can style until 4 classes or ids groups. Each group will be equally styled and in each group you can put as many divs classes or ids you want. If you need to style more groups you can still do it throught your template css.
Once finished installing when you hit the icon a dark overlay will cover the entire page. The next step is to assign a z-index>10 to those divs in your content you want to be highlighted, on top of the overlay.
To do so look into plugin parameters. The overlay has a z-index=10, then to highlight parts of your content you have to wrap those parts of content into divs (if not already done) and assign to their classes or ids a z-index >10 throught the parameters on the left. You can style until 4 classes or ids groups. Each group will be equally styled and in each group you can put as many divs classes or ids you want. If you need to style more groups you can still do it throught your template css.
notes:
1. You must always declare a position relative or absolute to assign a z-index value.
2. If don't specify a background color or image only foreground will be put on top of overlay.
1. You must always declare a position relative or absolute to assign a z-index value.
2. If don't specify a background color or image only foreground will be put on top of overlay.
I.E. 6 legacy note
IE6 does not handle png transparency, then you have 2 solutions for that problem:
1. If you haven't already done it, install a IE6 png fixer, you can find some on extensions.joomla.org.
2. choose in the dropdown list an icon labeled legacy, they simply have no transparency.
Be aware also, that IE6 handles z-index in a quite different way than other browsers. In really complex layouts already using heavily z-index layering you could waste some time to dive into that different logic.
IE6 does not handle png transparency, then you have 2 solutions for that problem:
1. If you haven't already done it, install a IE6 png fixer, you can find some on extensions.joomla.org.
2. choose in the dropdown list an icon labeled legacy, they simply have no transparency.
Be aware also, that IE6 handles z-index in a quite different way than other browsers. In really complex layouts already using heavily z-index layering you could waste some time to dive into that different logic.
Activate Slimbox
First, ensure to select "hlbox.js" in -HL-Box type- parameter, though it should be set by default.
(Note that if you instead select "hlbox_st.js" you are about to deactivate at all Slimbox. You might prefer deactivation in case you already use Slimbox or another Js to show your images. Further, this way you'll save some KBs of script).
To activate Slimbox plugin you need to put some code. You can find more exhaustive instructions in Slimbox documentation page
Below an example of use:
Also, you can put this code directly in article content instead of {hlbox} if you need to directly modify it and have a bit more flexibilty.
First, ensure to select "hlbox.js" in -HL-Box type- parameter, though it should be set by default.
(Note that if you instead select "hlbox_st.js" you are about to deactivate at all Slimbox. You might prefer deactivation in case you already use Slimbox or another Js to show your images. Further, this way you'll save some KBs of script).
To activate Slimbox plugin you need to put some code. You can find more exhaustive instructions in Slimbox documentation page
Below an example of use:
linked trough some text: <a href="images/01.jpg" rel="lightbox[mygroup]" title="01" alt="01">some text here</a> linked trough a thumbnail: <a href="images/01.jpg" rel="lightbox[mygroup]" title="01" alt="01"> <img alt="01" src="images/01_thumb.jpg" title="01" /></a>
Also, you can put this code directly in article content instead of {hlbox} if you need to directly modify it and have a bit more flexibilty.
Important note
The standard editor TinyMCE 2.0 strips out many kind of tags included some of these listed above. To solve the problem:
go to --> plugin manager --> Editor - TinyMCE 2.0
"Code cleanup on startup" should be off
"Do not clean HTML entities" should be set to yes
The standard editor TinyMCE 2.0 strips out many kind of tags included some of these listed above. To solve the problem:
go to --> plugin manager --> Editor - TinyMCE 2.0
"Code cleanup on startup" should be off
"Do not clean HTML entities" should be set to yes
If you have any question ask in the support forum.
back to the download page
