Design avancé

Ce guide vous expliquera comment modifier l'apparence du widget à l'aide de règles CSS simples

Intégration CSS

De manière à obtenir de bonnes performances d'affichage, le rendu du widget de Dastra se fait directement dans la page du site, dans le container avec l'id #dastra-widget

Il est possible de surcharger l'apparence du widget à l'aide de règles CSS simple.

Exemple basique :

/**Trigger button**/
.dastra-cw-trigger-button{
  background-image:url('data:image/png;base64,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')
}
.dastra-cw-trigger-button svg{
  display:none;
}

/**Modal container**/
.dastra-cw-container{
  border-radius:0;
  box-shadow: 0 0 50px rgba(0,0,0,.3);
}

/**Button in the footer**/
.dastra-cw-button {
  font-weight:bold;
}

/**Button view more**/
.dastra-cw-viewmore-button {
  border:none;
  color:red;
}

/**Title of consent category**/
.dastra-cw-collection-title {
  letter-spacing:1px;
  font-size:19px;
  font-weight:200;
}

Attention, certaines modifications sur le container du widget peut engendrer des effets indésirables.

Dernière mise à jour il y a 4 ans

Cet article vous a-t-il été utile ?

Intégration CSS

De manière à obtenir de bonnes performances d'affichage, le rendu du widget de Dastra se fait directement dans la page du site, dans le container avec l'id #dastra-widget

Il est possible de surcharger l'apparence du widget à l'aide de règles CSS simple.

Exemple basique :

/**Trigger button**/
.dastra-cw-trigger-button{
  background-image:url('data:image/png;base64,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')
}
.dastra-cw-trigger-button svg{
  display:none;
}

/**Modal container**/
.dastra-cw-container{
  border-radius:0;
  box-shadow: 0 0 50px rgba(0,0,0,.3);
}

/**Button in the footer**/
.dastra-cw-button {
  font-weight:bold;
}

/**Button view more**/
.dastra-cw-viewmore-button {
  border:none;
  color:red;
}

/**Title of consent category**/
.dastra-cw-collection-title {
  letter-spacing:1px;
  font-size:19px;
  font-weight:200;
}

Attention, certaines modifications sur le container du widget peut engendrer des effets indésirables.