Automatic​ cookie notices for pixolino websites

In the administration panel of a website, administrators can configure pixolino, to show a cookie notice on the website. This cookie notice will disappear after the website user accepts it by clicking on a button.

Administrators may also configure the content of the cookie notice (text and button label), though a default wording its provided. In addition they can configure, where the cookie notice shall appear: at the top or at the bottom of the browser window (with bottom being the default).

HTML markup

The following markup will be included for a top aligned cookie notice:

<div id="fx_cookienotice">
    <p>CUSTOM_TEXT</p>
    <button>CUSTOM_LABEL</button>
</div>
<noscript>
    <div id="fx_cookienotice">
        <p> CUSTOM_TEXT </p>
    </div>
</noscript>
​If the notice should be placed at the bottom of the browser window an additional class is added: 
<div id="fx_cookienotice" class="fx_cookienotice_bottom">
    …
</div>
<noscript>
    <div id="fx_cookienotice" class="fx_cookienotice_bottom">
        …
    </div>
</noscript>

​To display the cookie notice you have to add appropriate CSS definitions to your template's CSS.

CSS example (boilerplate)

#fx_cookienotice{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300;
    background: black;
    color: #fff;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.8rem;
}
#fx_cookienotice > p {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 960px;
}
#fx_cookienotice a {
    color: #fff;
}
#fx_cookienotice button {
    box-sizing: border-box;
    padding: 8px 25px;
    border-radius: 2px;
    background: black;
    color: #fff;
    border: 1px solid #fff;
    font-size: 0.8rem;
}
@media only screen and (max-width: 375px) {
    #fx_cookienotice button{
        width: 100%;
    }
}
#fx_cookienotice.fx_cookienotice_bottom {
    top: auto;
    bottom: 0;
    position: sticky;
}