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