Zobacz jak wygląda przykładowy kod do stylowania Cookie banner HubSpota
Wordpress -> Wygląd -> Dostosuj -> Dodatkowy CSS
/* kontener okna */
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom{
background-color:#ffffff00;
border:0 ;
box-shadow: 0 0px 0px #fff !important;
/* odstępy od krawędzi ekranu */
padding:16px 16px 24px 16px;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner{
/* cień okna */
-webkit-box-shadow: 0px 7px 24px 0px rgba(0,0,0,0.15);
box-shadow: 0px 7px 24px 0px rgba(0,0,0,0.15);
/* zaokrąglenie rogów */
border-radius:16px;
/* główny margines wewnętrzny */
padding:32px;
/* główna typografia */
font-family:"Montserrat", arial, sans-serif;
padding-left:150px;
/* link do obrazka po lewej */
background-image:url("https://www.businessweb.pl/wp-content/uploads/2021/08/cookies.svg");
background-size:72px;
background-repeat:no-repeat;
background-position:32px 32px;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner p{
/* kolor i typografia klauzuli */
color:#000;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner a{
/* zaokrąglenie przycisku "akceptuj" */
border-radius:50px !important;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button{
/* typografia przycisku "akceptuj" */
font-weight:600 !important;
padding:14px 20px !important;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover{
/* własciwości przycisku "akceptuj" po najechaniu myszką */
background-color:#000 !important;
border:1px solid #000 !important;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner a#hs-eu-decline-button{
/* własciwości przycisku "anuluj" */
border:0 !important;
text-decoration:underline !important;
color:#9f9f9f ;
}
/* responsywność */
@media screen and (max-width:600px){
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner{
padding:16px !important;
padding-top:80px !important;
background-size:48px;
background-repeat:no-repeat;
background-position:16px 16px;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom{
padding-bottom:70px;
}
#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom #hs-eu-cookie-confirmation-inner p{
font-size:11px !important;
}
}