Cookie message

Unfortunately there is currently no way to customize the font in the cookie message. Thus the design of the cookie message always deviates strongly from the own CI. It would be great if Hubspot would offer this feature to its users in the future. 

1 Reply
marclosper
Occasional Contributor

Hi @CarolineFortma ,

 

you can redefine the styles according to your choice by targeting the css. Here's the styles I used to make the banner float bottom center.  If you place in your header then remember to wrap within <style> tags, otherwise just copy & paste as is into your styles.css document.

 

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background: transparent !important;
}
@media only screen and (min-width: 960px) {
div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
box-shadow: 0 5px 40px rgba(0,0,0,.35) !important;
bottom: 20px !important;
}
div#hs-eu-cookie-confirmation {
width: 90% !important;
max-width: 1000px;
right: 0;
margin-right: auto;
margin-left: auto;
border-radius: 4px;
border-bottom: none !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
margin: 0 0 6px !important;
max-width: calc(100% - 180px);
}
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
padding: 8px 20px !important;
}
@media screen and (min-width: 930px) {
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
width: 100%;
max-width: 100%;
margin: 0 !important; } div#hs-en-cookie-confirmation-buttons-area { position: absolute; right: 18px; bottom: 20%; } } @media only screen and (min-width: 1640px) { div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom { bottom: 40px !important; } }

 shout if you need any assistance implementing.

 

Screenshot 2019-03-06 at 18.20.31.png