Making responsive tile clickable

[oceanclub]

I downloaded the Flare skin Torrey to implement a top nav using homes pages with tiles that you drill down into.

https://madcappeteam.mcoutput.com/torre ... t/Home.htm

Now by default the whole tile changes when you hover over it. However, you can't click on the tile, you must click directly on the tile title in it:



The code for this by default is:

Code: Select all

        <div class="home-tiles">
          <div>
            <p class="tile-title"><a href="Sample Landing Topic.htm">Documentation</a>
            </p>

So I moved the <a> hyperlink from around the tile title to around the entire tile; for example:

Code: Select all

        <div class="home-tiles">
          <a href="Sample Landing Topic.htm"><div>
            <p class="tile-title">Documentation</a>
            </p>
...
          </div></a>

Since the <div> representing the tile is no longer a direct child of div.home-tiles, I then updated the style sheet accordingly; from:

Code: Select all

div.home-tiles > div

to:

Code: Select all

div.home-tiles div

However, the issue is with the following styles for responsive tiles, where generally each child has different styling:

Code: Select all

div.home-tiles div:nth-child(1)
{
	width: 25%;
	margin-left: 24%;
}

div.home-tiles div:nth-child(2)
{
	width: 25%;
	margin-left: 1%;
}

Since it's now div > a > div rather than div > div, as far as I can see every tile is now treated as a first child (since each has its own <a> tag as a parent).

If there's a way of implementing clickable responsive tiles from this skin please let me know.

Regards,

P.

[Chicago_HPT]

I ran into the same problem. I don't recall if the original template I used was the same but I had the same problem where only the tile titles were clickable.

To solve it, I added an onclick event to the div as follows:

Code: Select all

<div class="tile" onclick="location.href='foo.htm';" style="cursor: pointer;">
     <div class="tile-head-1">
          <img class="tile-icon" src="Resources/Images/Assets/Icons/icon-image.png" alt="" />
     </div>
     <p class="tile-title">Foobar</p>
     <hr class="tile-title-line" />
</div>

The important part is the onclick attribute in the main tile div. Note that foo.htm is just a placeholder for any usual link path.

I hope that helps,
-jeff

[oceanclub]

Appreciate the swift response! Will give that a go.

Regards,

P.