Common CSS Changes

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)
}

cookie-popup-customization


/* hide a button */        

.osano-cm-button--type_deny {           

display: none;         

}          

cookie-popup-customization


/*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;         

}       

cookie-popup-customization


    

/* add the shadow to the top */

.osano-cm-window__dialog {           

box-shadow: 1px 1px 20px rgb(50 50 50 / 30%);           

min-height: 14rem;         

}    

cookie-popup-customization


     

/* 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;         

}          

cookie-popup-customization


/* 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;      
}

cookie-popup-customization


/* 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;    
}  

cookie-popup-customization


/* 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; 
}

cookie-popup-customization


/* 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;

}

cookie-popup-customization


/* 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;         

}

cookie-popup-customization


/* 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;}

cookie-popup-customization


/* 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-popup-customization


/* 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;

}

cookie-popup-customization


/* 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;}

cookie-popup-customization