How can I make Age Gate Windowed?

Hi @richteamedia360,

Looking that the link you sent I don’t see a background, so let’s tackle the form part first.

There is an element called .age-gate-form that sits centrally on the page, adding the following CSS to your theme or the CSS editor in the Age Gate Advanced settings will highlight that (copied these from the leafly style just so I had a reference!):

.age-gate-form {
  box-shadow: 0 0 20px -3px rgba(0,0,0,.5);
  border-radius: 4px;
}

Next, to have a blurred background, first you’re going to have to use the JavaScript version found in the Advanced settings if you’re not already.

The rest of it is a little hacky as there’s no good way to blur content.

You can achieve it by adding this CSS to either your theme or the custom CSS editor:

.age-gate-wrapper {
    background: transparent;
}

.age-gate-wrapper:before {
    content: '';
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.age-restriction > *:not(.age-gate-wrapper):not(#wpadminbar){
    filter:blur(8px);
}

This could probably be improved in terms of performance but it depends a bit on your markup and this should work as a catch all.

Thanks
Phil

• This reply was modified 5 years, 2 months ago by Phil.