Lay Theme Forum

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

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,

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

Thanks for the info Marius!

I'll just go for the standard masonry grid as the effort would be to high for the desired effect. I just wanted to have the grid looking equal when i mix portrait with landscape oriented images. But the default will work too!

Best,
Sven

hey,

can someone point me in the right direction for making every element inside the element grid a square shape? is it possible?

thank you!

hey Aurélien,

it worked for me by replaying the lines 499 to about 516 of frontend.style.css with:

".no-touchdevice .thumb.has-mouseover-img .ph img:first-child {
opacity: 1 !important;}

.no-touchdevice .thumb.has-mouseover-img:hover .ph img:first-child {
opacity: 1 !important;}

.no-touchdevice .thumb.has-mouseover-img:hover .ph img.mo_thumb {
opacity: 1 !important;}

.touchdevice .thumb.has-mouseover-img.hover .ph img:first-child {
opacity: 0 !important; }

.touchdevice .thumb.has-mouseover-img.hover .ph img.mo_thumb {
opacity: 1 !important;}

.mo_thumb {
z-index: 1;
-o-object-fit: cover;
object-fit: cover;
opacity: 0 !important; }

.mo_thumb:hover img {
transition: opacity 300ms ease;
-webkit-transition: opacity 300ms ease;
-o-transition: opacity 300ms ease;
}"

never mind, i got it to work!

Hey,

is there a way to fade in the project thumbnail mouseover image?
I couldn't find any option for that and my CSS manipulating skills are mediocre at best...

Thanks for the nice theme, love it!

Best