Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Row as link to page

    General Discussion
    4
    14
    155
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cesarbourgeois last edited by

      Hi,

      I'm working on this page http://www.bourgeoiscesar.com/nh/.
      Is there a way to have all a row as a link to an other page? I have also a blur mouseover effect for in text links added through CSS, and would like the entire row to go blur on mouseover. Now when I put a link it logically just activate in proximity of texts, what I'm looking for is to have an area that activate the blur on al the the row. Each line of text is a separate row for now.!

      Many thanks!

      Screen Shot 2020-07-30 at 10.47.00 AM.png

      1 Reply Last reply Reply Quote 0
      • Richard
        Richard Global Moderator last edited by

        Dear @cesarbourgeois

        Cool idea :)

        I noticed that "Contact" had full blur and was clickable but i was unable to see any other areas with blur to have a better look?

        Maybe i missed something?
        Where would you like to implement this effect on the "Fornasetti"?

        Thanks for working with Lay Theme

        Best wishes
        Richard

        1 Reply Last reply Reply Quote 0
        • C
          cesarbourgeois last edited by

          Dear @Richard-Keith, Thanks a lot for your answer.

          First of all I'll move to a new page as reference: http://www.bourgeoiscesar.com/nhcaps
          Here the first two names ("Fornasetti" and "MAR") are in text links exactly as CONTACT at the end of the pages is. This mean that the clickable and mouseover sensible area is only around Fornasetti or MAR. As a schema:

          Screen Shot 2020-08-08 at 6.14.06 PM.png
          What I would like is the entire row to be clickable and mouseover effective, having the entire row as a kind of button as shown here:

          Screen Shot 2020-08-08 at 6.23.19 PM.png

          I've used just the first two projects as example but what I'm looking for is to have all the following projects like that. Is there a simple way to achieve that?

          PS When I use the word "row" I refer to the gridder's row which for this page it looks like:

          Screen Shot 2020-08-08 at 6.36.46 PM.png

          Cheers
          César

          1 Reply Last reply Reply Quote 0
          • edgrbnz
            edgrbnz last edited by edgrbnz

            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:

            Pasted_Image_10_08_20__09_20.jpg

            • 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!

            ✦ ✦ ✦

            1 Reply Last reply Reply Quote 0
            • C
              cesarbourgeois last edited by

              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

              1 Reply Last reply Reply Quote 0
              • edgrbnz
                edgrbnz last edited by

                Seems to work but does weird flickery stuff over here… 🤔

                ✦ ✦ ✦

                1 Reply Last reply Reply Quote 0
                • C
                  cesarbourgeois last edited by

                  @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,
                  Cheers

                  C

                  1 Reply Last reply Reply Quote 0
                  • Richard
                    Richard Global Moderator last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • C
                      cesarbourgeois last edited by

                      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-3

                      Cheers,
                      César

                      1 Reply Last reply Reply Quote 0
                      • Richard
                        Richard Global Moderator last edited by

                        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;
                        }
                        
                        

                        Screen Shot 2020-08-23 at 1.33.28 PM.png

                        Best
                        Richard

                        1 Reply Last reply Reply Quote 0
                        • C
                          cesarbourgeois last edited by

                          Works perfectly,

                          Thanks a lot @edgrbnz & @Richard-Keith !

                          Bests
                          C

                          1 Reply Last reply Reply Quote 0
                          • Richard
                            Richard Global Moderator last edited by

                            Dear @cesarbourgeois

                            Thats so great to hear! :)

                            Good luck on the rest of your Lay Theme journey

                            Sincerely
                            Richard

                            1 Reply Last reply Reply Quote 0
                            • E
                              ewantsleslie last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • Richard
                                Richard Global Moderator last edited by

                                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

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post

                                Try this to fix issues before you post:

                                Use the Search Feature. Maybe there is already a solution to your issue.

                                1. Update Lay Theme and all Lay Theme Addons
                                2. Disable all Plugins
                                3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                4. Now see if your problem solved itself
                                5. Go here, see if your problem is listed here:
                                Troubleshooting

                                When you post:
                                1. Post a link to where the problem is
                                2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                Thanks!

                                Online Users

                                L
                                S
                                K
                                T
                                G
                                I

                                Recent Topics

                                • S

                                  Image hover -> Image on image

                                • C

                                  centred Carousel fixed width and proportions

                                • text underline

                                • open all links in a thumbnail grid in a new tab

                                laytheme.com