Как сделать свое оформление в телеграмме
Цвета в приложениях-важный фактор, определяющий будет ли человек пользоваться программой или нет. Рассмотрим, как поменять фон в телеграмме и настроить цвета на свое усмотрение, чтобы общение в мессенджере было комфортным.
Как поменять фоновое изображение
Фоновое изображение, это картинка, которую видит пользователь, когда открывает какой-либо диалог в приложении. В разных версиях программы оно различается, например, в телеграме для мобильных устройств в качестве фона по умолчанию установлена серая картинка с еле видимыми изображениями, а в мессенджере для ПК — картинка цветка. Представляем подробные инструкции, как изменить фон в телеграмме на разных устройствах.
Android
Если открыть любой диалог в Телеграме на Андроид, в качестве фона виден серый цвет с еле заметными силуэтами животных и различных предметов.
Некоторым это не нравится, они хотят установить фото или более приятную картинку, для этого:
iPhone
Здесь все также, как и на Android, так как приложения одинаковые, у них идентичные настройки:
На компьютере
У многих пользователей мессенджер установлен на ПК, соответственно, они интересуются, как поменять фон в телеграмме на компьютере. Инструкция:
Видео
Как поменять цвет в Телеграмм
В последних обновлениях разработчики добавили возможность полностью менять цвета оформления телеграма с помощью редактора, который позволяет корректировать цвета любых элементов приложения. Однако понадобятся знания английского языка или переводчик, так как названия элементов указаны на английском.
Android
В Андроид-версии настройка происходит следующим образом:
iPhone
Алгоритм действий для изменения темы на айфонах ничем не отличается от Андроид:
На компьютере
Чтобы создать свою тему для Телеграма в десктопной версии мессенджера:
Как вернуться к настройкам по умолчанию
Не факт, что с первого раза удастся подобрать идеальные для себя цвета оформления программы, тогда можно вернуть все как было до изменений.
В мобильных версиях
Для восстановления первоначальной темы в мобильной версии приложения:
В ПК версии
Чтобы вернуть начальную цветовую схему приложения на компьютере:
В Telegram появилась новая опция, которая позволит устанавливать отдельные цветовые темы для конкретных личных чатов.
- Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
- Подключиться можно самому за 1 день.
- Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
- Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
- У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.
Выбранная тема устанавливается сразу для обоих участников чата, она будет отображаться на всех устройствах. Ваш собеседник увидит тему, если у него установлена актуальная версия Telegram.
У каждой темы есть дневная и ночная версии. Они будут переключаться в соответствии с настройками ночного режима для всего приложения – как при ручном переходе на ночную версию, так и при автоматической смене темы в зависимости от времени дня.
Запись трансляций и видеочатов: можно записать как видео со звуком, так и просто звук. Для видео поддерживается запись в вертикальном и горизонтальном форматах. Готовая запись сохраняется в чате Избранное.
Администраторы могут включить запись в меню настроек трансляции или видеочата (значок ⋮ на Android, ⋯ на iOS). Если чат записывается, это будет отмечено красной точкой рядом с его названием.
Если вам надоел стандартный фон чата в мессенджере Телеграм, то вы можете в любой момент изменить его в настройках. Мы расскажем, как выбрать оформление в приложении на телефоне и с ПК.
Как сменить фон: инструкция
- Войдите в Настройки (иконка с вертикальным троеточием в углу экрана).
- Выберите пункт Settings. Далее – кликните на Chat backgrounds (обои для диалога). Из представленных картинок выберите ту, которую хотели бы установить на фон. Вы можете также загрузить собственное изображение.
- Нажмите ОК.
Изменение цветовой темы в Телеграм
В мессенджере есть еще более широкие возможности для оформления интерфейса. Например, вы можете изменить цвет.
- В параметрах приложения (значок с тремя точками в углу дисплея) выберите Chat backgrounds либо пункт Theme на смартфоне. Переходите в раздел редактирования темы с компьютера (Edit theme) или Create new theme – для смартфона.
- В специализированном редакторе вы можете подобрать комфортные вашим глазам оттенки. Есть еще один вариант: скачать готовые темы и обои для Telegram. Найти сторонние сервисы вы сможете с помощью Интернета. Кроме того, в самом мессенджере можно подписаться на каналы, где регулярно публикуют картинки для установки на фон переписки.
Как вернуть стандартное оформление?
Если вы недовольны внесенными изменениями, то можете возвратиться к классической теме.
- В разделе настроек выберите пункт Chat Background (с версии на компьютере) или Theme (с мобильного телефона).
- Вам понадобится пункт настроек Use default color theme. Кликните ОК – готово!
Возможности изменения интерфейса в Telegram нельзя назвать широкими, но для повседневного пользования сервисом базовых настроек цвета и темы вполне достаточно.
Данный ресур является неофициальным сайтом фан-клуба приложения Telegram. Все текстовые, графические и видео материалы взяты из открытых источников и носят ознакомительный характер. В случае возникновения споров, претензий, нарушений авторских или имущественных прав, просьба связаться с администрацией сайта.
Телеграм на Андроид позволяет создавать и использовать темы оформления. Это — полный гайд по ним: как устанавливать, создавать их, и т. д.
Установка тем
За почти год в Телеграме появилось много каналов и групп с темами, например, @androidthemes, @themesandroid, @androidthemesgroup, @themesrussia. В любом канале или группе вы найдёте много тем для Андроида.
Когда вы нашли какую-нибудь тему для себя, просто нажмите на файл темы (у всех тем для анроида расширение файла — .attheme).
Нажать туда, где красный кружок
Когда файл скачается, нажмите на него опять.
Вот сюда
Когда нажмёте, вы увидите предпросмотр темы — здесь можно увидеть, как будет выглядеть Телеграм, когда вы примените её. Для предпросмотра доступно два экрана — список чатов и экран чата. Свайпом вправо/влево можно посмотреть другой экран.
Когда примените тему, Телеграм сразу же перекрасится в цвета из темы:
Можно применять сколько угодно тем, пока у вас не закончится память.
Я скачал тему с какого-то сайта и она не применяется
Да, если пытаться применить тему не в Телеграме, то будет примерно такое:
чооо
Поставить тему можно только внутри Телеграма, а не снаружи. Поэтому нам надо будет поделиться этим файлом в Телеграм:
И уже здесь можно применить тему, так как она в Телеграме:
здесь уже всё точно так же, как и раньше
Список тем
Все темы, которые вы когда-либо ставили, запоминаются. Список этих тем находится в Settings → Theme (Настройки → Тема).
Здесь показана тема, которая сейчас у вас стоит, и другие темы, которые вы когда-либо ставили. Напротив каждой темы есть три точки, нажатие по ним откроет следующее меню:
Простое нажатие на тему применит её. По долгому нажатию покажется то же самое меню, которое описано выше.
Создание тем
Для создания тем изначально был только один редактор — встроенный. Сейчас уже есть два других, онлайн-редактора и даже два CLI (не поняли — пропускайте), созданных сообществом. Сначала рассмотрим встроенный, потом — основные принципы работы с другими редакторами, а также с текстовым.
Встроенный редактор
Встроенный редактор подойдёт для новичков — изменяя в нём переменную, почти всегда (но не всегда! это уже по части другой статьи) изменяются соответствующие элементы, а список переменных зависит от экрана, на котором вы сейчас находитесь.
Когда введёте название и нажмёте OK, будет создана новая тема, за основу которой будет взята та, которая у вас сейчас применена. Новая тема будет применена сразу же, также на экране появится иконка палитры.
Эту иконку можно свободно передвигать по экрану; если её увести за край экрана, то иконка будет убрана с экрана, как если бы вы сохранили тему (это описано чуть ниже).
Когда нажмёте на иконку палитры, покажется вот такой список:
Такие слова, как windowBackgroundWhite, actionBarDefault и т. д. называются переменными. Цвета, которые им заданы — значения, они показаны слева от переменных.
Когда нажмёте на любую из переменных, откроется такой экран:
Поэкспериментируйте с полями, кругом и движками, и поймёте, что к чему.
Если закрыть редактор и открыть редактор на другом экране, то список переменных будет уже другим:
Обычно в списках — те переменные, которые могут быть использованы на этом экране. Но эти списки не генерируются автоматически, а создаются разработчиком самостоятельно, поэтому зачастую в редакторе невозможно найти какие-то переменные.
Также редактор не поддерживает поиск по переменным, HEX-цвета и иногда искажает их. Поэтому сообщество создаёт свои редакторы тем без багов встроенного и удобнее.
Сторонние редакторы
Главное, что надо уметь делать, чтобы работать со сторонними редакторами, — экспортировать их из Телеграма и импортировать обратно. Процесс импорта был описан выше, а экспорт делается так.
1. Если темы нет ни в одном чате, то нужно выполнить шаги 2-5, иначе переходите к шагу 6.
2. Зайдите в список тем, найдите нужную тему, нажмите три точки.
4. Из списка выберите Телеграм.
6. Необходимо скачать тему, если она ещё не скачана.
Любознательный читатель мог заметить, что на шаге 4 можно выбрать не Телеграм, а какое-нибудь другое приложение. Главное, чтобы оно позволяло сохранить файл в загрузки или сразу бы сохраняло в память устройства.
Так тема с оригинальным названием будет сохранена в загрузках. В дальнейшем сохранённый файл открывают в любом редакторе.
На данный момент есть два редактора: от @snejugal и от @YouTwitFace. Рассмотрим оба редактора.
.attheme editor от @snejugal
После открытия редактора в браузере он предложит создать новую тему или открыть существующую.
Откроем существующую тему. Нажмём на Open an existing file, из открывшегося списка выберем проводник (в разных браузерах может быть по-разному).
И выберем нужную тему:
После этого мы увидим вот такой экран.
Рассмотрим его поближе.
Дальше идёт список переменных темы. Полностью он выглядит так:
По нажатию на переменную покажется вот такое окно:
Здесь есть две вкладки. На первой можно задать HEX, RGB и HSL цвета, причем они динамически обновляются. На второй показаны все цвета темы с возможностью их быстро применить.
Стоит отметить, что они не будут изменять прозрачность переменной, что удобно, когда у вас есть несколько вариантов одной темы с разным акцентным цветов. По двойному нажатию на цвет из палитры он удалится. Всегда первым цветом в палитре идёт стандартный цвет, его нет только при редактировании chat_wallpaper.
Палитра — с виду простая возможность, но ускоряющая разработку темы в несколько раз, которой нет в стандартной теме. С ней можно задать цвет в теме только один раз, а в дальнейшем брать его из палитры, а не писать его значение по памяти ещё раз. Более того, таким образом не появляются несколько вариаций одного цвета, появляющиеся в результате опечаток при его задании.
В редакторе постепенно вводятся превью переменнных — предпросмотр того, как изменяемые элементы будут смотреться в Телеграме. Превью полностью раскрашивается в цвета темы:
Несомненным плюсом является возможность предпросмотра элемента, до которого сложно добраться в Телеграме. Однако на данный момент лишь несколько переменных имеют такие превью, что исправится со временем.
Рассмотрим поиск. По нажатию на само поле появится полный список переменных, который можно листать:
При вводе слов редактор будет показывать только те переменные, которые подходят под запрос:
При нажатии на любую переменную начнётся её редактирование. Переменная автоматически добавится в тему, если её нет.
К сожалению, сейчас в этом редакторе одновременно может быть открыта только одна тема; также не может быть изменён фон чата, если он — картинка, но она сохраняется из открытой темы и при скачивании она останется. Из плюсов — редактор поддерживает оффлайн-режим и он полноценно работает на ПК, в дополнение на нём есть Drag'n'drop:
Данный редактор, возможно, не такой удобный, как предыдущий, но в нём есть несколько возможностей, которых нет в предыдущем. При его открытии видно всего лишь одну кнопку, которая предложит открыть тему.
После открытия темы будет такой экран:
- Вверху осталась кнопка открытия темы с названием открытой темы. Она переоткроет тему.
- Ссылка под заголовком Edit theme откроет список переменных.
- В поле Variables(s) вводится переменная или список переменных, разделённый запятыми. При вводе показываются переменные, которые, возможно, вы имеете ввиду.
- В поле hex вводится HEX цвета, на который вы хотите поменять значение заданных переменных. При нажатии на поле откроется дополнительная панель с RGB каналами и прозрачностью. На этой панели можно легко сгенерировать HEX, зная RGB и прозрачность. По нажатию на Edit заданные переменные изменятся на заданный цвет.
- Под полем HEX есть кнопка Invert — она инвертирует все цвета темы.
- Кнопка Download скачивает тему.
Надеюсь, автор в скором времени улучшит свой редактор до полноценного. Но пока рассмотрим CLI.
Общая часть по CLI
CLI расшифровывается как Command-line interface — интерфейс командной строки. Если у вас нет компьютера, то использовать CLI будет затруднительно, так что можете пропустить этот раздел.
Рассмотренные здесь CLI написаны на JS и используют Node.js как движок. Если у вас не установлен Node.js и npm, то сделайте это с официального сайта. npm устанавливается вместе с Node.js, если вы этого не отменили при установке.
Тем, кто хочет научится пользоваться CLI, но не умеет работать с командной строкой, стоит погуглить гайды по его использованию.
attheme-cli
Для установки attheme-cli нужно запустить команду npm i -g attheme-cli:
После установки надо в папке с темой запустить команду attheme:
CLI предложить создать новую тему, открыть стандартную или одну из лежащих тем в папке. Стрелками вверх/вниз перемещается список. После выбора темы можно вводить команды.
Список всех команд доступен по команде help.
- Команды valueof и get работают одинаково и выводят значения указанных переменных;
- Команда set задаст указанным переменным указанный цвет и выведет их значения;
- Команда delete удаляет указанные переменные из темы;
- Команда save сохраняет в открытый файл отредактированную тему;
- Команда importwallpaper загружает из указанного файла фон темы, команда exportwallpaper — сохраняет фон в указанный файл;
- Команда exit выходит из CLI.
attheme-better-cli
Работа с ним аналогична. Для установки надо запустить следующую команду:
Для запуска надо запустить команду attheme-b:
- help — показывает доступные команды;
- colors — выводит все цвета темы в виде HEX. Значения окрашиваются в приблизительный цвет или точный — в зависимости, поддерживает ли система кастомные цвета в консоли;
- save — сохраняет тему;
- open — открывает другую тему;
- show — показывает значение указанной переменной;
- set — задаёт указанной переменной указанное значение.
Текстовый редактор
Любую тему можно отредактировать и через текстовый редактор. Однако можно повредить картинку в теме, да и делать это не очень удобно, но с его помощью можно разобрать, как устроены .attheme темы.
Откроем тему и увидим следующее:
Уже можно сделать вывод о структуре любой темы:
Но что это за цифры? Давайте разберёмся.
0x — обозначение шестадцатиричной системы счисления
Измерим длину полученной строки:
А теперь рассмотрим это число как 32-битное. Первый бит — 1, значит, число отрицательное, что и видим у большинства значений в теме. От остальной части отнимем 1:
Перевернём все биты:
И представим остальную часть как десятиричное число:
А теперь посмотрим на файл и найдём -14966285:
Если всё проделать обратно, то можно получить HEX на основе signed int. Но в консоли можно делать это проще:
В файле можно писать комментарии, но только на новых строках:
Спустимся вниз (почти).
Видим, что здесь начинается бинарный код — это картинка темы. Начало картинки обозначение WPS — Wallpaper start (начало обоев) — на предыдущей строке. Заканчивается картинка словом WPE — Wallpaper end (конец обоев) — на следующей строке.
Теперь вам должно быть понятно устройство тем, и, если захотите, сможете сделать инструменты для тем. Если вы JS-разработчик, то уже есть attheme-js — можно использовать этот модуль и не тратить время на изобретение колеса.
Скорее всего, редактор при сохранении темы не сможет правильно сохранить картинку — именно поэтому темы стоит редактировать в сторонних редакторах, но не в текстовом.
Здесь мы не объясняли значение каждой переменной — для этого есть словарь переменных на английском (более полный) и на русском (менее полный). Обращайтесь к нему, когда вам не понятно, что меняет какая-нибудь переменная, но сперва всегда пытайтесь сами найти изменяемый элемент. Для более удобного доступа есть бот @atthemeglossarybot, но пока что он знает меньше переменных. В любом случае, вам всегда рады помочь в @themesrussia с переменными.
Читайте также: