Lay Theme Forum

From time to time we need to force some scaling rules on images or logos. This is because the page grid sometimes forces logos or images to become tiny when the browser is seized to narrow widths.

I can add custom css to force a minimum size to these images, but I am finding that they become misaligned as they scale. For example a centre aligned logo, will slowly drift off centre as the browser is resized. The drift happens because the image width is being overridden, but its positioning is still controlled by Lay’s grid. Is there a way to overcome this?

I've just spent a long time manually going through and custom changing every instance of a project index that we have across about 15 pages. It would be really useful if there was a global setting in Lay Options for this feature, so I could set all the criteria for the formatting (ie rounded corners, row and gutters, columns etc) in one location, and it updated all instances of it.

Anyone found a way to do animated burger icons? So when you open/close the menu it has a subtle animation effect?

Folks does anyone know a way to make an overlay page close by sliding off the opposite screen edge? For example I can set an overlay page to slide in from the left, but when you close it, it also slides away back to the left. What I want is an overlay that slides in from the left, but then closes by sliding away to the right.

I worked out I can fudge it by setting a height for lines and centering them:

.type-vl {
display: flex;
align-items: center;
height: 100%;
}

.type-vl .lay-vl {
height: 80%;
}

Thanks @arminunruh that sort of works. The issue looks to be that the vertical lines now touch the very top/bottom edge of the row once padding is added. What I am trying to achieve is for rows to have padding, and vertical lines to inherit this same padding when placed in a row, rather than ignoring this padding. if that makes sense?

No that does the same thing. If you test that on a row, and add vertical lines inside the row, you will see the vertical lines then overlap outside the bottom of the row for some reason? it looks like a bug.

I am experiencing a really annoying issue, where if I add top/bottom row padding, then the content inside the row overflows the bottom. In particular if I use the vertical lines. The code I am using is as follows. What I am doing wrong here?:

.row_padded {
  background-color: #f79b89;
  padding-top:100px;
  padding-bottom:100px;
}

Alternatively is there a better way to add row padding? I keep finding that content is running to close to the top/bottom of rows when I have specified a row background colour.

So I have found a little hack work around. if I add some offset to the stack, like 20px above and below, it becomes easier to drop elements into it and stack them. Then I just turn the padding off when done. It's a hack, but sort of makes it easier.

The Stack/Group feature is useful, but I find it so problematic and buggy. I just spent the last 20mins trying to move a horizontal line above a text block, and it was an endless fight of shuffling it up and down, waiting for the purple highlight line to appear, only for it to get rejected, and bounce back to where it was.

It would awesome if this feature could be debugged so elements like lines can be moved above/below other objects more easily, without all the wrestling to make them stick. It currently has like Microsoft Word formatting vibes, death by a thousand cuts.

@arminunruh Just a little bug/annoyance with this. Once an element is locked, and you go back to the menu, the label should change to 'Unlock'. Right now it just shows a subtle tinted background to suggest it's locked, but remains labeled as 'Lock', as if it's not locked. It would make much more sense if the menu option changed to 'Unlock'.

Thanks @arminunruh I worked this out, but the row gutters are what I am trying to ad a background colour to globally. That's the one I can't work out.

This is a nice little addition, but I would need to do it manually for every row. What I was trying to solve is a global way to set it.

We are building a site with sticky elements and content panels that scroll over one another. One issue is that even though row background colours are specified, the row gutters remain transparent. I'm having trouble targeting these to set a global background colour for them. The only fix I have found is to set grinder gutters to 0 (which then makes page editing look really crammed), and then add top/padding padding to rows, which inherits their row background colour.

Is there an easier way to just globally target the row gutter background colour, so it doesn't show through the content underneath it on scroll?

Ok thanks for this. It might be a way to do it, feels like it could get slightly messy. I will have to test out how it scales and also the mobile implications.

Hi folks. has anyone worked out a way to make specific grid lines visible on a live page? For example I have a 5 column grid, and I want to show black 1 pixel grid lines for each column, as a part of the design of the page.

Thanks @arminunruh I got to the bottom of it. User error. The site was using page overlays for all content pages, and we were positive that we had a footer page setup, but it was in fact built into the single home page layout and not as a seperate footer page. So it's all good, there is no bug relating to this.

Hi all. I am seeing the strangest bug in the Wordpress backend. We have a site that is setup with pages that have footers. The footer is a single page that is specified as the footer page and automatically populates on each page. On the front end they work fine, but in the backend CMS, the footer page/template has literally disappeared. it no longer appears in the list of pages.

I have checked everything, to make sure it's not on some second page, not hidden at the bottom, not renamed to something else. It's just no longer there and I can't make sense of it. Has anyone else experienced this?

Does anyone know a way to make page overlays push the underlaying page content across, rather than overlay it? If you see the menu on this site you will see what I mean.

https://www.generalstudios.com

The right hand panel could easily be created as an overlay in Lay, however I'm trying to work out a way for it to slide the main page content across at the same time>

It would be great if there was a way to drag rows (rather than using the up/down arrows) to change their order and move them up or down the page more easily.

Currently if you want to move a pair of 2 rows up above lets say 5 rows above them, then you have to click the up arrow 10 times times in total which can be hard to follow and tedious. It would be helpful if rows have some sort of draggable handle, where you can pick it up and move it up/down the page easily in the same way you can move a page element, rather having to click the arrows.