Make entire box clickable

[jonathanm]

How can I make the entire box clickable? Currently, only the words are clickable.

image.png (123.33 KiB) Viewed 2117 times

[cosmin_andrei]

Hi jonathanm,
The default implementation is based on the following action - when you click on the text/word to open the respective chapter. In order to make the entire box clickable, you can find more details here:
https://github.com/oxygenxml/oxygen-pub ... k-on-tiles

[jonathanm]

hi - I added .css information and it worked as far as making it clickable.

Where do I add the href or filename, so it knows to go to the correct topic?

[Costin]

Hi Jonathan,

Please note that the "Click on Tiles" customization includes also an HTML fragment which should be added in your publishing template.
Please make sure that you follow the instructions from the WebHelp User-Guide to add the fragment into the template.
After you've added both the HTML fragment and the CSS customization, then you should publish the output using the custom publishing template you created.

Regards,
Costin

[jonathanm]

I'm getting a red error line using the HTML fragment you provided:
<script type="text/javascript">
<!--
const list = document.querySelectorAll('.wh_tile');
Array.prototype.forEach.call(list, function (tile) {
tile.addEventListener('click', event => {
tile.querySelector('a').click();
});
});
-->
</script>

image.png (22.95 KiB) Viewed 2051 times

image.png (85.39 KiB) Viewed 2051 times

[Costin]

Hi,

Please note that is not necessary for the fragment to be a valid HTML.
All that matters is that the fragment should be a well-formed XML, as also mentioned in the How to Insert HTML Content topic from our User-Guide.

Also, at line 15, in the template's description you did not specify any placeholder.
You should look into the HTML Fragment Extension Points user-guide topic to identify the correct placeholder you could use.

Regards,
Costin

[jonathanm]

Hi Costin,

I added the placeholder and it worked. Thanks!