{"id":4536,"title":"\u0410\u043d\u0442\u0438\u0430\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440: \u0433\u0440\u0430\u043d\u0442\u043e\u0432 \u043d\u0435\u0442, \u043d\u043e \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e","url":"\/redirect?component=advertising&id=4536&url=https:\/\/vc.ru\/promo\/266261-starthub-moscow&hash=d1d5b6ef1ee3cc36b0c67152c74e57ccabb2fddc028b491a5ce00213a11bf2b4","isPaidAndBannersEnabled":false}

Как сделать темную тему на Tilda

Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.

Шаг 1 из 6

Делаем фон основных блоков бесцветным (выставляем значение background - 0).

Шаг 2 из 6

Добавим сам переключатель. Открываем Zero Block (в блоке, где будет переключатель) и добавляем в него HTML-код из левой панели. Вставляем туда код:

<div class="container"> <div class="toggle-container"> <input type="checkbox" id="themeSwitch" name="theme" /><label for="themeSwitch"></label> </div> </div>

Шаг 3 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое». Вставляем этот код:

<style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); :root, [data-theme="default"] { --bg: #FCFCFC; --bg-panel: #f5f5f5; --color-headings: #ff035b; --color-text: #333333; } @supports (--css: variables) { [data-theme="dark"] { --bg: #000000; --bg-panel: #1b1b1b; --color-headings: #ff035b; --color-text: #FFFFFF; } } html { height: 100%; font-family: 'Montserrat'; align-items: center; justify-items: center; } label { cursor: pointer; text-indent: -9999px; width: 52px; height: 27px; background: #b1b1b1; float: left; top: 8px; border-radius: 100px; position: relative; } label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked + label { background: var(--color-headings); } input:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 45px; } html.transition, html.transition *, html.transition *:before, html.transition *:after { transition: all 750ms !important; transition-delay: 0 !important; } </style>

Расшифровка:

  • root — светлая тема;

  • support — темная;

  • --bg-panel — цвет хедера;
  • --color — цвета заголовков и основного текста.

Шаг 4 из 6

Узнаем класс элемента, у которого хотим поменять стиль на темную тему. Как узнать класс элемента, смотрите здесь.

Покажу на примере. Мы хотим, чтобы блок с основным контентом переключался на темную тему. Нам нужно узнать класс элемента.

На видео я скопировал класс элемента фона карточки — она будет черной. Вам нужно также скопировать класс текста (отдельно заголовка, отдельно основного). Запишите классы куда-нибудь и подпишите, что это.

Шаг 5 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<style> body { background-color: var(--bg); } #rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom { background-color: var(--bg-panel); } .t-feed__col-grid__content.t-feed__col-grid__content_paddingtop { background-color: var(--bg-panel); } grid-template-areas: { "title switch" "content content"; } input[type=checkbox]{ height: 0; width: 0; visibility: hidden; } </style>

Расшифровка:

  • rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom - это класс элемента. Замените на свой.

  • var(--bg-panel); — это цвет, на который будем менять. Возьмите из шага 3.

Шаг 6 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<script> (function() { // Theme switch var themeSwitch = document.getElementById('themeSwitch'); if(themeSwitch) { initTheme(); // if user has already selected a specific theme -> apply it themeSwitch.addEventListener('change', function(event){ resetTheme(); // update color theme }); function initTheme() { var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark'); // update checkbox themeSwitch.checked = darkThemeSelected; // update body data-theme attribute darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme'); }; function resetTheme() { if(themeSwitch.checked) { // dark theme has been selected document.body.setAttribute('data-theme', 'dark'); localStorage.setItem('themeSwitch', 'dark'); } else { document.body.removeAttribute('data-theme'); localStorage.removeItem('themeSwitch'); } }; } }()); </script>

Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в Telegram @al_bogdan.

{ "author_name": "Богдан Алексеев", "author_type": "self", "tags": ["\u0442\u0435\u043c\u043d\u0430\u044f\u0442\u0435\u043c\u0430","tilda","rec168746003","ffffff","fff","ff035b","fcfcfc","f5f5f5","b1b1b1","333333","1b1b1b","000000"], "comments": 32, "likes": 22, "favorites": 136, "is_advertisement": false, "subsite_label": "design", "id": 112476, "is_wide": true, "is_ugc": true, "date": "Sun, 15 Mar 2020 14:10:27 +0300", "is_special": false }
0
32 комментария
Популярные
По порядку
Написать комментарий...
–3

Насколько актуально в 2020 году верстать серьёзные проекты на Tilda? 

Ответить
16

Я вот дизайнер, который на тильде сделал сайт, зарабатывающий реальные деньги (бизнес не связан с дизайном). Мне не приходится по каждому чиху бежать к верстальщикам и прогерам что-то подправить и платить за это временем и деньгами. Это можно серьезным проектом назвать?

Ответить
0

Серьезные в значении большие, масштабируемые

Ответить
11

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

Ответить
4

а на чем верстают серьезные проекты в 2020 и как определить серьезность? вордпресс подойдет?

Ответить
2

Серьезные проекты верстают руками и сразу думают об оптимизации всех процессов на странице. А тильда удобная штука, но из-за огромного количества стилей и анимаций, подтормаживается.

Ответить
2

У сайта моей студии почти 80 страниц на Тильда. Супербыстрые правки. Супербыстрая верстка. Суперудобно. Оборот студии - много Лямов в год. Серьёзный проект?

Ответить
0

Расскажите пожалуйста, какие проекты на Ваш взгляд считаются серьёзными и почему  Тильда не подходит для их реализации?

Ответить
0

Форум? Чат? Соц сеть? Биржа? Каталог товаров? ИМХО тильда для лендингов

Ответить
0

Я спрашивал не Вас, но благодарю за ответ. Согласен, что для создания социальной сети и биржи Тильда вряд ли подходит. А вот для каталога товаров и, например, интернет-магазина вполне годится. Равно как и для создания многостраничного сайта компании.

Ответить
0

Вопрос даже не в серьезности, а в функционале под ряд задачи Тильда очень ограничена в плане изменений настроек внутри себя и работы с данными. Примеры:
1. Если есть потребность переодически менять определенные платежные настройки - для этого нет API(как и для других настроек).
2. Нет возможности отдельно получить список "Заявок из формы" по API. Только если "копить" у себя на WebHook.
3. Это скорее баг: невозможно качественно отслеживать незавершенные заявки программно. Можно поставить галочку в настройках аля "Получать информацию об любых платежах", после заявка об начале платежа пользователем поступит на WebHook и всё(!). Если он даже оплатит - отдельное оповещение не придёт. И нет метода типа "getLead" чтобы проверить была ли оплата.

Ответить
2

Круто, пусть Тильда введёт это сама)

Ответить
0

Тильда вообще нормальный конструктор или есть лучше ? Пытаюсь сейчас сайт на нем делать. Но уже проблемка, хедер не перекрашивается, что только не делал.

Ответить
3

Хороший конструктор, особенно для лендосов одностраничных

Ответить
0

Инструмент огонь! Вы пытаетесь темную тему сделать и хедер не перекрашивается при переключении? 

Ответить
0

попробуйте посмотреть на редактор Nicepage.  Быстрый, делает чистую верстуку, поддерживает создание совеменных дизайнов.  

Ответить
1

На все 100% актуально. А почему-бы и нет? Я могу понять, что high-load проекты не делаются на тильде, когда нужна субд и тд, и тп.

Ответить
1

Хоспади! Да ты программист!!!

Ответить
0

А есть ссылка на реализованный пример?

Ответить
0

круто сделано, но ведь там чёртово ограничение на 500 страниц. Как обходить будете по количеству контента?

Ответить
0

Там ограничение только на страницы. Ограничений по контенту нет. Только техническое на 5000 постов

Ответить
0

Поехал немного сайт

Ответить
0

Спасибо! Какой девайс и браузер?

Ответить
1

И лично от себя добавлю, что возможность скролить левое меню немного раздражает, хочется убрать этот ползунок вообще, он как-то не в тему, а в остальном очень круто, вы молодец!

Ответить
0

у меня тоже
Chrome Версия 80.0.3987.132
дисплей FullHD

у блоков #rec168582198 .t396__artboard появилось свойство overflow-y: scroll? если его убрать, то норм становится

Ответить
0

Спасибо за фидбек! Да, там в боковом меню будут еще разделы, поэтому там нужен скролл. Надо поработать над адаптивностью, так как там позиционирование в пикселях стоит, а по-хорошему надо в процентах.

Ответить
0

Хром, версия 80.0.3987.132  

Ответить
0

Хром, версия 80.0.3987.132

Ответить
0

Крутяк, спасибо за статью!

Ответить
0

Спасибо за статью! Присматриваюсь к тильде.

Заметил одну вещь, в FireFox на Win 10 едет переключатель. Фиксится скрытием инпута через display: none.

Ответить
0

Спасибо! Поправлю)

Ответить
Читать все 32 комментария
Как моё сообщество заработало 1,7 млн рублей на VK Donut

Больше шести лет назад Феликс Зинатуллин основал сервис таргетированной рекламы Церебро Таргет и запустил его сообщество ВКонтакте. Теперь там больше 200 тысяч маркетологов и предпринимателей. За год на донатах через VK Donut паблик заработал 1,7 млн рублей. Вот как это вышло.

Феликс Зинатуллин
Исследование рынка PR 2021: больше новых инструментов, усиление и расширение влияния и значимости функции

Агентство Buman Media совместно с hh.ru провели исследование российского рынка коммуникаций. В нем приняли участие более 100 директоров и руководителей направлений по корпоративным коммуникациям, работающих в различных отраслях. Сегодня, в День PR-специалиста, мы подводим итоги года в коммуникационной отрасли.

Очередной баг Тинькова

В пятницу 23.07 начали падать китайские акции, а у меня на тот момент были МОМО и утро началось с -340$. Я решил избавиться от них, дабы не увеличивался минус. Пятница только началась и надо бы исправить это недоразумение. И я полез в TAL Education Group. Сначала заработал 200$, потом 120$, потом ещё 130$. Итого отбил минус, да ещё и заработал…

Вебинар по внедрению цифровых интеллектуальных технологий в рамках Kazan Digital Week – 2021
Клиенты «Открытие Брокер» могут получить статус квалифицированного инвестора в личном кабинете и мобильном приложении

«Открытие Брокер» значительно упростил процедуру присвоения статуса квалифицированного инвестора для своих клиентов. Теперь его можно получить в личном кабинете на сайте и мобильном приложении «Открытие Брокер» в несколько кликов. Новый функционал позволит инвесторам не тратить время на поездку в офис для подачи документов и пользоваться всеми…

«Бросил вызов Nike Air Jordan за мировое господство в кроссовках»: как Канье Уэст шёл к своему миллиарду Статьи редакции

Канье Уэст много лет настаивал на том, что он миллиардер, но Forbes признал за ним этот статус только в апреле 2020 года. В 2021-м журнал оценил состояние 44-летнего рэпера в $1,8 млрд

Канье Уэст Architecturaldigest
Нет смысла тягаться с крупным конкурентом, «вдохновившимся» вашим стартапом? Это не так — рассказываю на личном опыте

Привет, меня зовут Роман Рабочий. Три месяца назад я опубликовал здесь статью про свой стартап — секретаря Машу. А спустя два месяца после запуска Маши вышла копия от одного крупного банка. И вчера эстафету перенял известный сотовый оператор. Рассказываю обо всем по порядку.

Тинькоф не дает вывести деньги с Инвесткопилки уже 2 недели

С 14го числа приложение не даёт вывести деньги с Инвесткопилки. Техническая поддержка игнорирует детали проблемы и пишет отписки уже 2 недели, даже не пытаясь вникнуть в суть, запрашивая один и тот же скриншот несколько раз, путаясь между обращениями и собственными компенсациями за прошлые косяки. Просто посмотрите скриншоты.

Google перестанет пускать в офисы по всему миру сотрудников без прививок от Covid-19 Статьи редакции

Компания перенесла дату выхода сотрудников с удалёнки с 1 сентября на 18 октября из-за вспышки коронавируса.

Как (и зачем) мы полностью переделали интернет-банк. Опыт Альфа-Банка
Duolingo привлекла $521 млн после выхода на биржу с капитализацией $3,7 млрд Статьи редакции

В 2020 году компанию оценили в $2,4 млрд.

null