Je cookie banner aanpassen in Squarespace

Wil jij je cookie banner in Squarespace ook in je huisstijl zoals de rest van je website? In plaats van dat lelijke grijze blok dat Squarespace je geeft. Dat kan!

Voer onderstaande code in, in de custom CSS sectie van het DESIGN tab (in Squarespace), en pas aan naar je eigen kleurcode en font. Veel succes! 

// Cookie Notice
.cookie-notice {
  background: hsla(43, 9%, 94%, 0.98) !important;
  border: 1px solid #ddd !important;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  color: hsl(0, 1%, 45%) !important;
  width: 250px;
  font-family: Proxima-Nova !important;
  font-size: 85% !important;
  letter-spacing: 0.03em;
  line-height: 1.6em;
  position: fixed !important;
  top: auto !important;
  bottom: 30px !important;
  left: 30px !important;
  right: auto !important;
  padding: 30px !important;
}
.cookie-notice a {
  color: hsl(0, 1%, 45%);
}
.cookie-notice .accept {
  width: 100%;
  padding: 10px !important;
  background: #002ea7;
  color: #fff;
  font-family: proxima-nova;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 0.1em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-top: 0 !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border: 1px solid #fff !important;
}
@media only screen and (max-width: 640px) {
  .cookie-notice {
  width: 150px;
  font-size: 70% !important;
  top: 10px !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  padding: 10px !important;
}
}
Line De VosComment