Use CSS to customize the look and feel of your cookie popup.
NOTE: This CSS MAY be subject to change based on which classes are being utilized. All public classes are listed HERE.
Note: Any changes to verbiage or additions made to the wording of the pop-up will negate Osano's auto-translation services. Users will only see the text you have input in the language you have written it.
/* grays out the background until choice is made*/
.osano-cm-dialog--type_box {
color: #000;
background: #fff;
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;}
