사용자 지정 CSS

테마를 사용하면 프로그래밍 지식이 없는 사람도 간단한 설정만으로 자신만의 디자인이 적용된 투표, 설문조사, 사진 콘테스트를 만들 수 있습니다. 또한 각 테마의 컨텍스트 메뉴를 통해 직접 CSS(Cascading Style Sheets)를 만들 수도 있습니다. 이를 통해 PollUnit의 요소를 선택하고 표시 방식을 원하는 대로 완전히 개별적으로 제어할 수 있습니다.

이 기능은 HTML과 CSS 경험이 있는 사람을 대상으로 합니다. 이 내용이 익숙하지 않다면 전문가에게 문의하는 것이 좋습니다.

버튼 사용자 지정

다음 예시는 몇 줄의 코드만으로 모든 버튼의 모양을 조정하는 방법을 보여 줍니다. 버튼 요소를 선택하고 알약 모양으로 둥글게 만들며 그림자 같은 윤곽선을 추가합니다.

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

언어별 사용자 지정 콘텐츠와 CSS

CSS의 가능성은 여기서 훨씬 더 확장됩니다. 다음 예시는 콘텐츠를 언어별로 현지화해 변경하는 방법을 보여 줍니다. 여기에서는 새 옵션이나 이미지를 추가하는 버튼을 선택하고 조정한 뒤 새 콘텐츠로 채웁니다.

#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';
}

사용자 지정 글꼴

CSS를 통해 직접 준비한 글꼴도 사용할 수 있습니다. 이때 서버의 CORS Headers에서 »pollunit.com«을 허용해야 합니다.

@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;
}