Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Link entire text box

Link entire text box

Scheduled Pinned Locked Moved General Discussion
11 Posts 2 Posters 302 Views
  • 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.
  • D Offline
    D Offline
    danny
    wrote on last edited by
    #1

    Hi @Richard

    is it possible to link an entire text books instead of single lines? The same topic has been posted here. So I wonder if there is any update on this?

    It's about the news list here: https://www.marthekrueger.com/

    http://laythemeforum.com:4567/topic/5756/feature-request-link-entire-text-box

    Thanks and kind regards,

    Daniel

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear Daniel

      @danny

      Not built-in yet sorry, however i can help you create the Link you need šŸŒ

      In the thread linked above, user zochovsky would like the Link for the purposes of changing colour on Hover, is this also what you wish to achieve?

      When hovering over entire Text are, the Text within changes Colour?

      If it related to say making Imagehover work - this is a bit more difficult.

      Happy to see how i can help you achieve your design.


      Talk soon & have a wonderful day Danny šŸ–
      Richard
      1 Reply Last reply
      0
      • D Offline
        D Offline
        danny
        wrote on last edited by
        #3

        Dear @Richard

        thanks so much for helping out. So yes, I would like that the entire Text, when hovering, changes the colour (instead of only one line).

        Looking foreword !

        Talk soon and all best wishes
        Daniel

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Dear Daniel

          @danny

          Where is the "news List" within your site?
          https://www.marthekrueger.com/

          Is it the information page?

          Screen Shot 2022-02-17 at 6.14.43 PM.png

          The whole text block should go blue? šŸ‘


          Best
          Richard
          1 Reply Last reply
          0
          • D Offline
            D Offline
            danny
            wrote on last edited by
            #5

            Dear @Richard,

            it's here: https://www.marthekrueger.com/information/

            So I would like that the entire Text, when hovering, changes the colour (instead of only one line).

            Thanks again!

            Talk soon and best wishes
            Daniel

            1 Reply Last reply
            1
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Dear Daniel

              @danny

              Normally i would just use CSS for hover but you have a few different elements going on ( link,span,paragraph ) so maybe we use some JQuery.

              jQuery added to > Lay Options Custom CSS & HTML > Custom <head> Content >

              <script>
                  window.laytheme.on("newpageshown", function(layoutObj, type, obj){
                      
                       jQuery(".col").hover(function () {
                  jQuery(this).toggleClass("color");
               });
              
                  });
              </script>
              

              Reference: https://stackoverflow.com/questions/16821564/how-to-add-remove-class-on-mouseover-mouseout-jquery-hover


              Custom CSS Added to > Lay Options > Custom CSS & HTML > Custom CSS

              .color a{
                  color: #0000ff;
              }
              
              .color span{
                  color: #0000ff;
              }
              
              .color p{
                  color: #0000ff;
              }
              

              Result:
              Screen Shot 2022-02-23 at 8.23.40 PM.png

              This Code will apply to ALL similar columns across your website. If you need to specify for just this page then the jQuery would change:

              jQuery(".slug-information .col").hover(function () {
                  jQuery(this).toggleClass("color");
               });
              

              https://stackoverflow.com/questions/9753930/nested-jquery-selectors


              https://laytheme.com/documentation/custom-javascript.html


              Best
              Richard
              1 Reply Last reply
              0
              • D Offline
                D Offline
                danny
                wrote on last edited by
                #7

                Amazing @Richard, thanks so much! Have a nice day! All best wishes, Daniel

                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  danny
                  wrote on last edited by
                  #8

                  Dear @Richard,

                  this works really well. Only one question: is it possible to exclude text blocks on this page https://www.marthekrueger.com/information/ from the link function ?

                  A few text blocks are only bare text but not links.

                  Thanks!

                  Best wishes

                  Daniel

                  1 Reply Last reply
                  0
                  • RichardR Offline
                    RichardR Offline
                    Richard
                    Global Moderator
                    wrote on last edited by
                    #9

                    Dear Daniel

                    @danny

                    If there are a select few elements that you don't wish your new CSS to apply to, assign them a class.

                    Then using that class you can assign CSS to them, maybe with the use of !important.

                    .my-class-name-here.color{ 
                              color: blue !important;
                    }
                    

                    https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

                    Or you could use the not selector:

                    https://stackoverflow.com/questions/19464660/apply-css-style-on-all-elements-except-with-a-specific-id

                    Or you may wish to be more specific with your original code, improve the targeting, but the elements you dont want need to have something like an ID or Class to set them apart from targeting.

                    https://www.w3schools.com/cssref/css_selectors.asp


                    Best wishes
                    Richard
                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      danny
                      wrote on last edited by
                      #10

                      Dear @Richard, thanks so much! Have a nice day. Best wishes, Daniel

                      1 Reply Last reply
                      0
                      • RichardR Offline
                        RichardR Offline
                        Richard
                        Global Moderator
                        wrote on last edited by
                        #11

                        Thanks @danny have an amazing day! ā­ļø

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        I also code custom websites or custom Lay features.
                        šŸ’æ Email me here: šŸ’æ
                        info@laytheme.com

                        Before you post:
                        1. When using a WordPress Cache plugin, disable it or clear your cache.
                        2. Update Lay Theme and all Lay Theme Addons
                        3. Disable all Plugins
                        4. 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:
                        1. Post a link to where the problem is
                        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                        Online Users
                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                        laytheme.com
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Search