Перекрасить с помощью CSS

По умолчанию виджет использует набор CSS файлов, которые подгружаются из TimePad. Подгружаются две группы файлов — библиотека Bootstrap 3 и файлы стилей самого виджета. Эти стили можно как дополнить, так и полностью переписать на свои.

Параметр loadCSS в коде вставки принимает массив путей до CSS файлов, которые будут добавлены после загруженных по умолчанию стилей. Вы можете указать несколько файлов — все они будут загружены. Однако, имейте в виду, что загрузка большого количества дополнительных файлов может привести к замедлению работы виджета, так как они будут загружены «как есть» без дополнительной компиляции и оптимизаций.

Если вы хотите полностью заменить все стили, вы можете использовать следующие два параметра:

  • skipBaseCSS: true, чтобы не загружать базовый CSS виджета
  • disableBootstrap: true, чтобы не загружать стили библиотеки Bootstrap

Внимание! Помните, что виджет состоит не только из формы, которая показывается пользователю при загрузке виджета. В процессе регистрации используется большое количество экранов и элементов, каждый из которых тоже должен получить свои стили (подтверждение регистрации, блоки с ошибками, экраны с оплатой и так далее). Список этих экранов и элементов постоянно обновляется и дополняется. Пожалуйста, используйте эти параметры аккуратно и обязательно тестируйте весь процесс покупки билетов до конца, прежде чем включать регистрацию для ваших участников.

В данном примере в виджет подгружается дополнительный CSS файл по указанному адресу. 

<a href="http://org13.timepad.ru/event/АЙДИ_СОБЫТИЯ/" data-twf-placeholder="yes">Перейти к заказу билетов</a>
<script type="text/javascript"
        defer="defer"
        data-data-timepad-customized="АЙДИ_ИЗ_ВАШЕГО_КОДА"
        data-twf2s-event--id="АЙДИ_СОБЫТИЯ"
        data-timepad-widget-v2="event_register"
        src="//timepad.ru/js/tpwf/loader/min/loader.js">
  (function() {
    return {
      "loadCSS": [
        "https://ваш.сайт/путь/до/вашего.css/"
      ],
      "skipBaseCSS": false,
      "disableBootstrap": false
    };
  })();
</script>

Не забудьте заменить АЙДИ_ИЗ_ВАШЕГО_КОДА, АЙДИ_СОБЫТИЯ на свои.

Актуальные исходные стили для виджетов в несжатом виде можно найти здесь:

Внимание! Крайне желательно, чтобы CSS файлы и все прочие ресурсы (картинки, шрифты и т.д.) были доступны по протоколу HTTPS. Виджет загружается и работает только по защищенному соединению и загрузка дополнительных ресурсов по протоколу HTTP может вызвать предупреждения безопасности от браузеров. Это может отпугнуть ваших участников.