This article describes the HTML layout and default CSS of the Cookie Banner.
Also see the Styling guide options for information about styling the popup.
When the popup is opened, the wps-cb-open class is added to the <body> element.
It is recommended to add any additional CSS in the Additional CSS field in the plugin settings instead of in your theme.
This way, when the plugin is deactivated or removed, there will be no unused CSS left on your website.
HTML
Depending on how many checkbox categories there are, more or less might be in the HTML output.
<div class="wps-cb" id="wps-cb">
<div class="wps-cb__overlay"></div>
<div class="wps-cb__container">
<strong class="wps-cb__title ">
Cookies
</strong>
<div class="wps-cb__content">
Content
</div>
<div class="wps-cb__checkboxes">
<label>
<input type="checkbox" name="functional" disabled checked />
<span>Required checkbox</span>
</label>
<label>
<input type="checkbox" name="tracking" />
<span>Optional checkbox</span>
</label>
</div>
<div class="wps-cb__buttons">
<button type="button" class="wps-cb__save">
Save
</button>
<button type="button" class="wps-cb__accept-all">
Accept all
</button>
</div>
</div>
</div>
Default CSS
The following style is included by default.
Any variable shown (between { and } characters) is a value that is a setting in the style options.
Any additional CSS is added after this code.
body.wps-cb-open
{
overflow: hidden;
}
.wps-cb
{
display: none;
position: fixed;
z-index: 99999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wps-cb__overlay
{
content: "";
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: {opacity};
overflow: hidden;
}
.wps-cb__container
{
position: fixed;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 600px;
padding: 20px;
background-color: {background_color};
border: 1px solid {border_color};
overflow-y: auto;
max-height: calc(100dvh - 40px);
}
@media(max-width: 640px)
{
.wps-cb__container
{
max-width: 300px;
}
}
.wps-cb__title
{
font-size: 1.5em;
line-height: 1;
display: block;
margin-bottom: 0.5em;
color: {title_color};
}
.wps-cb__checkboxes
{
margin-top: 1em;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5em 2em;
}
.wps-cb__checkboxes label
{
display: flex;
align-items: center;
gap: 0.5em;
}
.wps-cb__buttons
{
margin-top: 2em;
display: flex;
gap: 1em;
justify-content: center;
}