Row as link to page
-
I tryed to wrap my head around this… «tables!» was the first thought that came to mind. Unfortunately tables always tend to be unsexy to maintain. Here’s some food for thought how to possibly tackle this:
- Structure your projects in table rows with the insert table function inside the text editor. Something like this:
- Then you could add the desired link to the first table cell of each row – Luckily you can do that in the text editor; the code side of things looks a bit messy:
<table> <tbody> <tr> <td style="vertical-align: top;"><a href="https://somewhere-el.se">FORNASETTI</a></td> <td style="vertical-align: top; text-align: right;">TYPEFACE, 2020</td> </tr> <tr> <td style="vertical-align: top;"><a href="https://somewhere-el.se">MAR</a></td> <td style="vertical-align: top; text-align: right;">IDENTITY, 2020</td> </tr> <tr> <td style="vertical-align: top;"><a href="https://somewhere-el.se">EVERYTHING IS SOMEONE</a></td> <td style="vertical-align: top; text-align: right;">BOOK, 2020</td> </tr> </tbody> </table>
- Unfortunately it’s not possible to link entire table-rows so you now need to add some jquery to
Custom CSS & HTML → Custom HTML at top
to enable the link to always trigger the whole table row, This code might work.
It’s absolutely possible that I totally overthought this!
If there is a simpler solution I’m also happy to learn 🙂Cheers!
-
Hi @edgrbnz ! Thanks a lot for your time.
Well at the end I managed to do it, not having enough knowledge about code, opting for svgs of the entire row and link on images. Not sure if it is a good idea, but hey, it works http://www.bourgeoiscesar.com/nh-2
I'll dig a bit more using tables, thanks for the advice.
Cheers!
C -
@edgrbnz yeah, thanks for pointing out. It worked only on safari.
So I made the page using a table, added the link to each text but I'm struggling to have the row linked as described on Stack.
http://www.bourgeoiscesar.com/nh-3
What I'm not understanding is where to add this snippet$('tr').click( function() { window.location = $(this).find('a').attr('href'); }).hover( function() { $(this).toggleClass('hover'); });
Thanks for your help,
CheersC
-
Dear @cesarbourgeois
Following up :)
Did you come to a solution along with @edgrbnz ?Thank you for using Lay Theme and making a healthy Forum
Best wishes
Richard -
Dear @Richard-Keith thanks for asking!
So, yes @edgrbnz's worked out and now the link trigger and works for the entire row, good news.
The fact is that I can't make the entire row go blur, it applies only to the linked text, any idea how I can force this?
Working on the same page as the last post: http://www.bourgeoiscesar.com/nh-3Cheers,
César -
Dear @cesarbourgeois
Using "Custom CSS"
You will need to apply the "blur" on hover to the "tr"
tr:hover { color: #ff0000; -webkit-filter: blur(10px); filter: blur(10px); transition: ease-in-out 0.2s; }
Best
Richard -
-
Dear @cesarbourgeois
Thats so great to hear! :)
Good luck on the rest of your Lay Theme journey
Sincerely
Richard -
@edgrbnz @cesarbourgeois @Richard-K
Hi all!
This is exactly what I am after myself. Reading the above, I am not exactly sure how to achieve this. How did you manage to get it to work in the end?
Thanks in advance!
E -
Dear @ewantsleslie
Targeting the desired element e.g
.desired-element{ }
and then applying Custom CSS within 'Lay Options - Custom CSS & HTML' - So that on 'hover' the blur effect occurs.
.desired-element:hover { color: #ff0000; -webkit-filter: blur(10px); filter: blur(10px); transition: ease-in-out 0.2s; }
Best wishes! :)
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it