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. Fixing a text element in the foreground

Fixing a text element in the foreground

Scheduled Pinned Locked Moved General Discussion
7 Posts 2 Posters 548 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.
  • P Offline
    P Offline
    paulapetersen
    wrote on last edited by
    #1

    Hi Armin,

    how can I fix a text block/element in front of a moving (parallax) image grid in the background as seen on https://leberg.com/about?

    Best, Paula

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

      Dear Paula

      I hope i can help :)
      This website has a text box placed in the Gridder with a Custom Class that then has some Custom CSS Added to it making it sit fixed in the middle of the page.

      So within the Gridder a text box is added, then we right click and - Set HTML Class & ID:
      Screen Shot 2020-11-13 at 9.07.33 AM.png

      To follow your example i have given the element a class of '.fixedabout' :

      Screen Shot 2020-11-13 at 9.07.43 AM.png

      Then Within 'Lay - Options - Custom CSS & HTML':

      Screen Shot 2020-09-14 at 2.51.54 PM.png

      This Code has been used in the Example you provided:

      .fixedabout {
          position: fixed;
          top: 35%;
          left: 14.8%;
          transform: translate(-25%, -25%);
      }
      

      You can add this in the Custom CSS area at the top of the page, remember to save at the bottom :)

      Let me know how you go, this is the basics behind what your example has done to achieve the fixed text element in the foreground.

      Thank you for using Lay Theme and have a wonderful day!
      Best
      Richard

      P 1 Reply Last reply
      0
      • P Offline
        P Offline
        paulapetersen
        wrote on last edited by
        #3

        Dear Richard,

        many thanks for your detailed help! I'm new to all this CSS stuff but it's never too late to learn ;) I'll try by following your instructions and let you know how it's going.

        All the best and have a wonderful Friday!
        Best, Paula

        1 Reply Last reply
        0
        • RichardR Richard

          Dear Paula

          I hope i can help :)
          This website has a text box placed in the Gridder with a Custom Class that then has some Custom CSS Added to it making it sit fixed in the middle of the page.

          So within the Gridder a text box is added, then we right click and - Set HTML Class & ID:
          Screen Shot 2020-11-13 at 9.07.33 AM.png

          To follow your example i have given the element a class of '.fixedabout' :

          Screen Shot 2020-11-13 at 9.07.43 AM.png

          Then Within 'Lay - Options - Custom CSS & HTML':

          Screen Shot 2020-09-14 at 2.51.54 PM.png

          This Code has been used in the Example you provided:

          .fixedabout {
              position: fixed;
              top: 35%;
              left: 14.8%;
              transform: translate(-25%, -25%);
          }
          

          You can add this in the Custom CSS area at the top of the page, remember to save at the bottom :)

          Let me know how you go, this is the basics behind what your example has done to achieve the fixed text element in the foreground.

          Thank you for using Lay Theme and have a wonderful day!
          Best
          Richard

          P Offline
          P Offline
          paulapetersen
          wrote on last edited by
          #4

          @Richard-Keith

          Hi Richard, I followed your instructions but it's not working .. not sure what I'm doing wrong.

          http://paulapetersen.com/about

          Bildschirmfoto 2020-11-13 um 09.45.43.png Bildschirmfoto 2020-11-13 um 09.45.00.png

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

            Dear Paula

            Great to see your getting into the code :)

            You did everything right, It was actually my fault!
            I copy and pasted quickly the class name for this example, apologies.

            When naming the class in the Gridder leave out the ' . ' at the start of the name:

            .fixedabout should just be 'fixedabout'

            We use this ' . ' with CSS to target a class e.g a class called 'special' would in CSS be targeted with:

            .special{
            }
            

            With this ' . ' fullstop at the front - And for example if you had that ID that you called 'myid'

            You would target it in CSS with:

            #myid{
            }
            

            The ' # ' being a way to target 'ID's'

            Once again sorry for my error and goodluck!

            Best
            Richard

            1 Reply Last reply
            0
            • P Offline
              P Offline
              paulapetersen
              wrote on last edited by
              #6

              Dear Richard,

              many thanks, it is working now!! Yeah!! :-))

              Best, Paula

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

                Dear Paula

                Awesome! :)

                Best wishes
                Rich

                1 Reply Last reply
                0
                • P person5 referenced this topic on
                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
                R
                rospax
                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