CSS personnalisé

Avec un thème, les personnes n'ayant pas de connaissances en programmation peuvent créer des votes, des sondages et des concours photo dans leur propre design grâce à une configuration simple. Il est en outre possible de créer un CSS (Cascading Style Sheets) personnalisé via le menu contextuel. Cela permet de sélectionner des éléments de ton PollUnit et de contrôler leur présentation - de manière tout à fait individuelle, selon tes besoins.

Cette fonctionnalité s'adresse aux personnes ayant de l'expérience en HTML et CSS. Si cela ne te dit rien, tu devrais demander conseil à un expert.

Personnaliser les boutons

L'exemple suivant montre comment, à l'aide de quelques lignes de code seulement, tu peux adapter l'affichage des boutons. de tous les boutons. Les éléments des boutons sont sélectionnés, arrondis en forme de pilule et reçoivent un contour ombré.

.btn {
  border-radius: 9999px;
  border-bottom: 4px solid black;
}

Un CSS personnalisé par langue

Mais les possibilités de CSS vont encore plus loin. L'exemple suivant montre comment les contenus peuvent être modifiés de manière localisée, c'est-à-dire par langue. Ici, le bouton pour ajouter de nouvelles options ou images est sélectionné, adapté et ensuite rempli avec un nouveau contenu.

#ccss-userActionBox .btn {
  text-indent: -9999px;
  line-height: 0;
}

#ccss-userActionBox .btn::after {
  text-indent: 0;
  display: block;
  line-height: initial;
}

html[lang=en] #ccss-userActionBox .btn::after {
  content: 'Localized button text';
}

html[lang=de] #ccss-userActionBox .btn::after {
  content: 'Lokalisierter Buttontext';
}

Tes propres polices de caractères

Tu peux également utiliser tes propres polices de caractères via CSS. Pour cela, tu dois t'assurer que ton serveur autorise »pollunit.com« dans les en-têtes CORS.

@font-face {
  font-family: 'Amatic';
  font-style: normal;
  font-weight: 200;
  src: url(https:/myhost.com/amatic.woff);
}

h1 {
  font-family: 'Amatic' !important;
  font-weight: 200;
}