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. Text in a cover layout to behave like the page title (fixed and above all elements)

Text in a cover layout to behave like the page title (fixed and above all elements)

Scheduled Pinned Locked Moved General Discussion
6 Posts 2 Posters 660 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.
  • S Offline
    S Offline
    svenro
    wrote on last edited by
    #1

    Hey,

    this question is maybe a bit related with this thread: http://laythemeforum.com:4567/topic/3857/fixed-textbox-in-gridder

    This is my website (project): http://sven-rose.com/qatalog

    I have got 2 Issues with my layout:

    1st:
    I want the text box in the top left corner of the cover layout ("Qatalog") to have the same z-index as the page title, so that it is above the rest of the project layout when I scroll down. Currently it hides away with the cover image once the cover is out of the viewport. I have tried to use the same css as you provided for @leandrodisler but I could not archive what I want...

    This is the css I tried out:
    .fixedtitle {z-index:10000; position:fixed;}

    After that I had the idea to fiddle around with frontend.php to make it so, that the page title would render the project title for project pages. But I could not archive that.

    Could you give me a hint where to look at, when it's not possible with only css?

    2nd: (only tested on a mac/safari so far)
    When I scroll down the page fast, the background slides up and reveals the cover page underneath it for a few pixels (like 50-100 or so). Is there a way to prevent that?

    I would be really happy to get some directions on these two issues!
    Thank you very much,
    Sven

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

      Dear @svenro
      which box do you mean exactly?

      Also we do not recommend to customize PHP code. It will be overwritten after the update.

      The you can see the cover below in Safari is a safari issue.
      We will look into that though.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • S Offline
        S Offline
        svenro
        wrote on last edited by
        #3

        Hey Marius,

        I'm talking about the text on the top left corner that says "Qatalog".

        It is part of the cover layout and i would really need it to not hide away once the cover is out of the view-port.

        Thank you for the thoughts about the .php issue with theme updates, but I'd rather rework my changes after I update then having this text box to hide underneath the project content once the user scrolls the cover out of the view-port.

        Any thoughts how to achieve that?

        Best,

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

          Dear @svenro
          with jQuery you can hide it when the grey box scrolls to the top of the page:
          https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • S Offline
            S Offline
            svenro
            wrote on last edited by
            #5

            Dear Marius,

            (Question is at the bottom... sorry for the long sorry...)

            thanks for the information, I had a look at the article but think that we misunderstood:

            I don't want to hide the text-element but make it a fixed element that is on top of every other element, just like the page title and navigation.

            I made a workaround using CUSTOM HTML at top of the page and CUSTOM CSS like this:

            For every project I made a text:

            <a class="pt qat" href="http://sven-rose.com/" data-type="category" data-id="1" data-catid="" data-title="Sven Rose">
            	<div class="__Default_head">
            	    <span>Qatalog</span>
            	</div>
            </a>
            

            So i've got like 12 of these rendering on op of each other. For every project page I then hide the unwanted classes with CSS like this:

            body.type-project.id-467 .pt.ba,
            body.type-project.id-467 .pt.ma,
            body.type-project.id-467 .pt.frei,
            body.type-project.id-467 .pt.spy,
            body.type-project.id-467 .pt.bau,
            body.type-project.id-467 .pt.ana,
            body.type-project.id-467 .pt.menu,
            body.type-project.id-467 .pt.ost,
            body.type-project.id-467 .pt.blc,
            body.type-project.id-467 .pt.bon,
            body.type-project.id-467 .pt.sfk,
            body.type-project.id-467 .pt.waba {
                display:none;
            }
            

            This works ok for now, BUT: every once in a while, when a user navigates through the page, the texts that should hide blink for a fraction of a second when the page is about to be rendered.

            This is why I had another look at frontend.php and I had the following idea:

            I would like to change it, that after the part, where laytheme makes the page title, another text is made, that returns the title of the current page, so that this workaround is executed kind of in an automated fashion.

            I know about get_the_title() and managed to do what I want, but the problem with this method is: the page title is only rendered after i REFRESH the page once it's loaded.

            My question is: How can I get this info from .php using the laytheme? (See attached image)

            Thank you!
            Best,
            Sven

            0_1544255243860_Bildschirmfoto-2018-12-08-um-08.45.34.jpg

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Dear @svenro
              why don't you just place a text-element with a link to the next page in the Gridder and give this element a class fixed?

              Not sure if the CUSTOM HTML is the most comfortable way to go.
              You can also try to place it in the CUSTOM FOOTER.

              Best!

              Marius

              www.mariusjopen.world

              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
              T
              tingle3003
              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