Below is a list of CSS examples that can be used to customize the look and feel of your Cookie Consent dialog. This CSS MAY be subject to change based on which classes are being utilized. All public classes are listed HERE.
Note: Customizations and changes to the Cookie Consent dialog may void the Osano pledge.
/* grays out the background until choice is made - BANNER Style*/
.osano-cm-dialog--type_bar {
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66)
}
/* grays out the background until choice is made - BOX Style*/
.osano-cm-dialog--type_box {
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66)
}
/* hide a button */
.osano-cm-button--type_deny {
display: none;
}
/*ensures left alignment of link*/
.osano-cm-content__message.osano-cm-message {
display: block
}
/*adjusts color and border of the accept button - can be used on any button by adjusting button--type*/
.osano-cm-button--type_accept {
padding: 8px 12px;
color: #ffffff;
background-color: #156bc1;
border-radius: 4px;
border: 1px solid #156bc1;
box-shadow: 0 -2px 0 #063665 inset;
font-size: 16px;
line-height: 20px;
font-weight: bold;
cursor: pointer;
overflow: hidden;
outline: none;
}
/* add the shadow to the top */
.osano-cm-window__dialog {
box-shadow: 1px 1px 20px rgb(50 50 50 / 30%);
min-height: 14rem;
}
/* adds custom text to the main message */
.osano-cm-content__message{
max-height: 110px;
}
.osano-cm-content__message::before {
content: "Your Text HERE";
visibility: visible;
}
/* hides the existing message text */
.osano-cm-content__message {
visibility: hidden;
}
/* adds text to the beginning of the link - this will negate the auto-translate feature*/
a.osano-cm-storage-policy.osano-cm-content__link.osano-cm-link::before {
visibility: visible;
position: inline;
content: "Learn more and adjust settings";
}
/* hides the existing link text */
.osano-cm-storage-policy.osano-cm-content__link.osano-cm-link{
visibility: hidden;
}
/* add icon #1*/
.osano-cm-window__dialog.osano-cm-dialog::before {
background-image: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20O%20on%20Transparent-1000px.png");
background-size: 100px 100px;
display: inline-block;
width: 100px;
height: 100px;
content:"";
margin-right: 1rem;
}
/* adds icon #2 * - BOX ONLY/
.osano-cm-dialog:after {
position: absolute;
top: 30px;
left: 28px;
right: 28px;
height: 40px;
content: '';
background: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20Osano%20on%20Transparent-1000px.png");
background-position: center;
background-size: 200px;
background-repeat: no-repeat
}
.osano-cm-dialog .osano-cm-content__message { padding: 60px 0px 0 0px;
}
/* adds icon #3 - BANNER ONLY - on TOP of banner*/
.osano-cm-dialog:after {
position: absolute;
top: 20px;
left: 28px;
right: 28px;
height:30px;
content: '';
background: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20Osano%20on%20Transparent-1000px.png");
background-position: center;
background-size: 150px;
background-repeat: no-repeat
}
.osano-cm-content {
padding-top: 40px;
}
/* adds text to the beginning (title)*/
.osano-cm-dialog__content.osano-cm-content::before {
content: "We value your privacy!\A";
color: #000;
font-weight: bold;
font-size: 1.5rem;
display: block;
padding-bottom: 1em;
}
/* changes the order of the accept all and the manage preferences button*/
div.osano-cm-dialog__buttons.osano-cm-buttons{
display:flex;
flex-flow: column;
}
.osano-cm-button--type_accept{order:1;}
.osano-cm-button--type_manage{order:2;}
/* changes the font*/
.osano-cm-info {
font-family: Papyrus;
}
.osano-cm-dialog {
font-family: Papyrus;
}
.osano-cm-view__button {
font-family: Papyrus;
}
.osano-cm-button {
font-family: Papyrus;
}
Font Family Examples: https://www.w3.org/Style/Examples/007/fonts.en.html
/* cookie widget color change */
/* cookie outline */
button.osano-cm-window__widget > svg > path:nth-child(1) {
stroke: black !important;
}
/* cookie background */
button.osano-cm-window__widget > svg > path:nth-child(2) {
stroke: black !important; /* needs to match stroke color from outline */
fill: white !important;
}
/* cookie dots */
button.osano-cm-window__widget > svg > g {
fill: black !important;
}
/* changes the order of the "cookie notices" link and the popup message*/
div.osano-cm-dialog__content{
display:flex;
flex-flow: column;
}
.osano-cm-link{order:1;}
.osano-cm-content__message {order:2;}
