[NSFW] Submit button wrong colour

I have this in my custom CSS for the site

/**gift card end css **/
.age-gate input[type="text"] {
    border-color: #b87333 !important;
    width: auto;
    max-width: 100 px;
}
.age-gate input[type="submit"] {
    background-color: #b87333 !important;
    color: #fff;
    border:0px;
}
.age-gate-form{
    color: #b87333;
    display: block !important;
    margin-bottom: 10px !important;
    font-family: lato !important;
    font-size: 14px !important;
    text-align: center !important;
   
}
.age-gate-form label{
    color: #b87333;
    display: block;
    margin-bottom: 10px;
}

Hi @copperfrogdistilling,

I think the only thing you need to change there is:

.age-gate input[type="submit"]

to

.age-gate button or .age-gate button[type="submit"] if the first one doesn’t do it

Everything else should work as it is, though you do have a space between 100 and px on line 5.

Cheers
Phil

• This reply was modified 2 years, 2 months ago by Phil. Reason: typo

Hi Phil

.age-gate button worked a treat,

Will this be eventually part of the age gate appearance menu ?

also how do I change the 3 black dots to #B87333 on submit ?

thanks again

Sy

Last question Phil

when I click on the day, month or year input area it shows a black outline how do i change that to #663202 ?

Thanks
Simon

Hi Simon,

The plan long term is to get everything editable, padding, margin, hover the works – just need a bit of a brain storm to make it happen.

For the styles:

To do the loader, there’s a couple of options:

in 3.0.2+

:root {
    --ag-loader-color: #B87333;
}

or this will work in any 3.x:

.age-gate-loader {
    color: #B87333;
}

For the outline, I think it’s getting default browser outline, so:

.age-gate input[type=text]:focus {
    outline: none;
    box-shadow: 0 0 4px #b87333; /* Up to you this line, just adds a bit of shadow so there's still some focus state. */
}

Hope that all works, shout if not

Thanks
Phil