Lay Theme Forum

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

    Whole text section to change colour instead of only one line

    General Discussion
    3
    9
    274
    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.
    • Z
      zochovsky last edited by

      Hello everyone,

      Hope you are all well.

      I have a problem and was wondering if anyone could help.

      I don't seem to be able to make the whole text section change colour on hover at once. In the text editor I select both lines of text ('Life Below Zero' and ' BBC Earth') to link to the same place but when I hover over it, they don't change the colour together – only the line where the cursor happens to be (in this case either 'Life Below Zero' or ' BBC Earth'). In the example below, both lines should become grey simultaneously when I hover over the text, but only one of them does.

      0_1564932883321_Screen Shot 2019-08-04 at 17.34.18.png

      Here's the code from the text editor:

      <p style="text-align: center; line-height: 0.6;"><a href="http://google.com"><span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span></a></p><p style="text-align: center; line-height: 0.6;"><a href="http://google.com"><span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span></a></p>

      For some reason Laytheme generates two separate <a> tags. Is there any way around this?

      Many thanks in advance

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

        Hey there!

        That’s pretty simple: Now both lines are tagged seperately and you only need one <a> tag to do what you described – Try the following code:

        <a href="http://google.com">
            <p style="text-align: center; line-height: 0.6;">
            <span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span>
            </p>
            <p style="text-align: center; line-height: 0.6;">
            <span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span>
            </p>
        </a>
        

        It’s still a bit messy, though…

        I’d suggest you get rid of the <span> and <p style="…"> tags and define all your text formats in the respective section of lay. This way you only have to trigger classes to make text look like you desire which makes it a lot cleaner, consistent and easier zu handle.

        For example:

        /*replace 'mycool…class' with the text format you want to trigger*/
        
        <a href="http://google.com">
            <p class="_mycoolbigclass">Life Below Zero</p>
            <p class="_mycooldefaultclass">BBC Earth</p>
        </a>
        

        Hope that helps!

        ✦ ✦ ✦

        1 Reply Last reply Reply Quote 0
        • Z
          zochovsky last edited by

          @edgrbnz said in Whole text section to change colour instead of only one line:

          <a href="http://google.com">
          <p style="text-align: center; line-height: 0.6;">
          <span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span>
          </p>
          <p style="text-align: center; line-height: 0.6;">
          <span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span>
          </p>
          </a>

          Hey @edgrbnz.

          Thank you so much for your reply, it's much appreciated!

          I tried both solutions but somehow I didn't manage to make it work. I.e. When I tried the first solution by pasting the code above, after saving, the Laytheme automatically amended the code to the following:

          <p style="text-align: center; line-height: 0.6;"><span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span></p><p style="text-align: center; line-height: 0.6;"><span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span></p>

          ....which is something I've noticed it doing before. I was wondering if you can replicate the same problem at your end?

          Many thanks again!

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

            Dedar @zochovsky
            you can try to create an HTML element. OR to use a text element and open the HTML view in there.

            One of those two does not alter the code on saving.

            Best!

            Marius

            www.mariusjopen.world

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

              @zochovsky said in Whole text section to change colour instead of only one line:

              Hey @edgrbnz.
              Thank you so much for your reply, it's much appreciated!
              I tried both solutions but somehow I didn't manage to make it work. I.e. When I tried the first solution by pasting the code above, after saving, the Laytheme automatically amended the code to the following:
              <p style="text-align: center; line-height: 0.6;"><span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span></p><p style="text-align: center; line-height: 0.6;"><span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span></p>
              ....which is something I've noticed it doing before. I was wondering if you can replicate the same problem at your end?
              Many thanks again!

              🤔

              • So the <a> tags get lost completely? Or do you mean the overall formatting of the code?
                If it’s the latter: That’s normal and no problemo, Wordpress doesn’t show structured code in its editor.
              • Did you paste it in the html view of the text editor?
              • Did you try Marius’ proposal to work around it with a bespoke html element?
              • Is there a way we could have a glimpse at the front end of the website in question?

              ✦ ✦ ✦

              1 Reply Last reply Reply Quote 0
              • Z
                zochovsky last edited by

                @edgrbnz said in Whole text section to change colour instead of only one line:

                <a href="http://google.com">
                <p style="text-align: center; line-height: 0.6;">
                <span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span>
                </p>
                <p style="text-align: center; line-height: 0.6;">
                <span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span>
                </p>
                </a>

                Hey @mariusjopen and @edgrbnz ,

                Many thanks for all your input so far.

                Yes, the <a> tags get lost completely after saving it in the HTML view of the text element editor. I.e. the following code:

                <a href="http://google.com">
                <p style="text-align: center; line-height: 0.6;">
                <span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span>
                </p>
                <p style="text-align: center; line-height: 0.6;">
                <span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span>
                </p>
                </a>

                0_1565166314530_Screen Shot 2019-08-07 at 10.24.34.png

                turns into this one after saving:

                <p style="text-align: center; line-height: 0.6;"><a href="http://google.com"><span style="font-family: NeueHaasGroteskText75Bold; font-size: 40px;">Life Below Zero</span></a></p><p style="text-align: center; line-height: 0.6;"><a href="http://google.com"><span style="font-family: NeueHaasGroteskText75Bold;">BBC Earth</span></a></p>

                0_1565166330201_Screen Shot 2019-08-07 at 10.24.48.png

                I've tried Marius' solution too, but in this one the second verse (BBC Earth) does not show up at all (it actually gets removed from the code after saving); and moreover, if you set a video background on the page, it will overlap the link so you can't see the the text at all, but strangely you can still open the link if you hover in the right place.

                Pasted code:

                0_1565166033079_Screen Shot 2019-08-07 at 10.18.04.png

                The actual code after saving it in the editor:

                0_1565166051671_Screen Shot 2019-08-07 at 10.18.22.png

                The result:

                0_1565166083905_Screen Shot 2019-08-07 at 10.18.31.png

                Text invisible when set against video background (when created via HTML element):

                0_1565166734879_Screen Shot 2019-08-07 at 10.26.01.png

                Thanks again for helping!

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

                  Dear @zochovsky
                  you could try to apply a very high z-index to bring your text to the foreground.

                  Yes. I agree. it is annoying that the editor cuts away code.

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • Z
                    zochovsky last edited by

                    Hey @mariusjopen

                    Many thanks for taking the time to reply. It's a pity and I presume there is no other good fix to make it work the way I suggested in my first post?

                    On this note I was wondering if it would be possible to have a workaround by creating an alternative image on hover with a fading transition. I.e. add an image (i.e. via text editor) and this image would be changing on mouseover to an alternative one? Is this something do-able in Laytheme?

                    Cheers!

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

                      Dear @zochovsky
                      this seems possible. Yes. LayTheme has its limits.
                      Part of it is to come up with creative workarounds. We are all in that :-)

                      Best!

                      Marius

                      www.mariusjopen.world

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

                      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

                      S

                      Recent Topics

                      • T

                        OpenType Feature

                      • T

                        Split Screen just on front page / subpages without the split?

                      • T

                        problem when I click on the category filter buttons on mobile

                      • G

                        z index has different behaviors on different pages

                      laytheme.com