Скачать и установить Темы для Дискорда
Темы для Дискорда — специальный CSS-код, позволяющий изменить внешний вид программы с учетом собственных предпочтений. Сложность в том, что просто скачать данные и просто изменить оформление не получится. Здесь существуют обходные пути, на которых подробнее остановимся в статье.
Какие бывают
Для начала отметим, что themes for Discord бывают двух типов — для программы и веб-версии приложения. В обоих случаях действуют индивидуальные подходы по изменению внешнего вида. При этом переместить интересующую тему и активировать ее в Дискорд одним нажатием кнопки не получится.
Чтобы поставить новую тему, придется установить специальное приложение-плагин, позволяющее создавать и добавлять такие инструменты в Discord. Кроме того, необходимо копировать и добавить CSS-код в специальное поле.
Как поставить тему для Дискорда: пошаговая инструкция
Самый просто способ поменять оформление — воспользоваться программой Better Discord. Ее легко скачать на многих ресурсах, но лучше это делать на официальном сайте. С помощью софта можно добавлять свои темы, ставить разные плагины, внедрять дополнительные наборы смайлов и т. д.
Алгоритм действий имеет следующие вид (рассмотрим на примере темы Metro):
-
- Переходите по ссылке betterdiscord.net/home.
- Жмите на кнопку Download.
- Выберите версию ОС и запустите загрузчик.
-
- Следуйте рекомендациям системы и установите программу на ПК.
-
- Перейдите по ссылке github.com/TakosThings/Metro-for-Discord.
- Жмите на надпись BetterDiscord для скачивания темы для Дискорд.
- Сохраните файл в любое удобное место и откройте его с помощью редактора.
- Копируйте данные из файла.
- Запустите Дискорд и жмите на символ шестеренки слева внизу.
- Листайте столбец с левой стороны до раздела BetterDiscord.
- Кликните на пункт Custom CSS.
- Вставьте копированный ранее код темы для Дискорд.
- Жмите на ссылку Update внизу.
Выбранная тема активируется в Дискорде в автоматическом режиме. В дальнейшем можно поменять оформление, следуя такому же алгоритму. По аналогичному алгоритму можно устанавливать и другие theme для Discord, которые легко найти в Сети.
Как установить тему для Дискорд в веб-версии
Даже после установки Discord на ПК многие продолжает его применять в браузере. Если вы относитесь к этой категории, можно установить новое оформление для своей веб-версии. Алгоритм действий имеет следующий вид:
-
- Войдите на сайт userstyles.org.
- Установите расширение на свой браузер (к примеру Хром). После этого в веб-проводнике появляется буква S.
- Откройте Дискорд в веб-проводнике и жмите на появившуюся кнопку.
- Выберите вкладку Доступные стили и выберите подходящий вариант.
- Кликните на кнопку Установить стиль, согласитесь с условиями и дождитесь перезагрузки.
Если все сделать правильно, обои и оформление веб-версии должны поменяться. Если никаких изменений не произошло, возможно, причина в действии антивирусного ПО, блокирующего работу расширений. В таком случае попробуйте отключить антивирусную программу и повторите попытку.
Как создать свою тему
Многие интересуются, как сделать свою тему в Дискорд, и насколько это реально. Для этого можно использовать программу, о которой упоминалось выше — Better Discord. Сложность в том, что для создания индивидуального стиля необходимо иметь навыки CSS-верстки. Без наличия этих знаний любые попытки обречены на провал. Но опытные верстальщики могут с легкостью сделать собственную тему для Дискорд.
Общий алгоритм такой:
- Установите софт BetterDiscord по принципу, который рассмотрен выше.
- Войдите во вкладку Custom CSS.
- Введите свой код (предварительно его необходимо написать).
- Жмите на кнопку Update.
Если CSS-код написан корректно, программа преображается и получает новый интерфейс. При это можно сделать оформление в любом стиле, будь это anime, классика или любой другой. Здесь можно проявить фантазию и сделать тему для Дискорда «под себя».
Итоги
В распоряжении пользователей два способа, как изменить тематику в Discord — написать CSS-код самостоятельно или воспользоваться уже годовыми наработками. В обоих случаях необходимо скачать и установить программу Better Discord, без которой внесение изменений невозможно. Далее остается войти в раздел Custom CSS, после чего добавить собственный или уже готовый код. При копировании этих данных будьте осторожны, ведь изменение или случайное удаление одного символа может поломать всю структуру.
Как создать СSS
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 15 человек(а).
Количество просмотров этой статьи: 26 461.
В этой статье:
CSS — это язык таблиц стилей, с помощью которого можно создавать веб-страницы и одновременно управлять несколькими функциями, назначая группам определенные элементы. К примеру, с помощью цветового кода дизайнер может изменить цвет фона на всех страницах сайта, внеся всего одно изменение в CSS-код.
Часть 1 из 4:
Как написать встроенный CSS-код
Ознакомьтесь с HTML-тегами. Необходимо знать, как работают теги и атрибуты src и href .
- Запомните следующие основные свойства CSS: color и font-family .
Изучите значения соответствующих свойств. Для каждого свойства указывается значение. Например, для свойства color можно указать значение red .
Ознакомьтесь с HTML-атрибутом style . Он используется внутри элемента href или src . Чтобы использовать указанный атрибут, в кавычках после знака равенства введите CSS-атрибут, двоеточие, а затем значение свойства. Это называется CSS-правилом.
Обратите внимание, что профессиональные веб-разработчики, как правило, не пользуются встроенным CSS-кодом для создания сайтов. Встроенный CSS-код может нарушить целостность HTML-кода. Тем не менее это отличный способ познакомиться с основами функционирования CSS.
Часть 2 из 4:
Как написать простой CSS-код
- Если специальной программы нет, воспользуйтесь Блокнотом или другим текстовым редактором. Просто сохраните файл как текстовый файл и файл CSS.
- В HTML-редакторе можно работать с HTML-кодом и с CSS-кодом.
Выберите элемент, к которому хотите добавить стиль. Теперь введите имя элемента и фигурные скобки ( < >). Чтобы сделать код более разборчивым, вторую фигурную скобку всегда вводите на новой строке.
- Обратите внимание, что этот стиль будет влиять на «все» элементы выбранного типа на странице. Более конкретный стиль будет рассмотрен в следующем разделе.
Часть 3 из 4:
Как написать более сложный CSS-код
Создайте CSS-файл (а не HTML-файл) и сохраните его с расширением .css . Также откройте HTML-файл.
Выберите элементы разных типов, к которым хотите добавить один стиль. Добавьте атрибут class к таким элементам и приравняйте их к имени выбранного класса. В этом случае у элементов будет одинаковый стиль.
Укажите, какой стиль получит класс. В CSS-файле введите имя класса после точки . , то есть так: .class .
- Идентификаторы более специфичны, чем классы, поэтому идентификатор переопределяет любой стиль класса, если у него есть атрибут со значением, отличным от значения класса.
Часть 4 из 4:
Как изучить CSS и HTML
Откройте сайт HTML Academy. На нем можно научиться основам веб-разработки.
Найдите другие сайты, специально предназначенные для изучения HTML и CSS. Ищите авторитетные источники, чтобы приумножить свои знания.
Общайтесь с веб-дизайнерами и разработчиками. Их опыт поможет вам овладеть ценными знаниями и навыками.
Просматривайте исходные коды сайтов, которые вы открываете. Просмотр CSS-кодов хорошо сделанных веб-сайтов позволит вам ознакомиться со способами разработки частей веб-сайтов. Скопируйте код, а затем редактируйте его, чтобы научиться пользоваться различными атрибутами CSS.
Дизайн и код вашего первого сайта по шагам, простым и понятным
В этом уроке мы сделаем дизайн и код нашего первого веб-сайта простым и лёгким способом. Урок рассчитан на новичков с надеждой дать вам инструменты для написания собственных сайтов согласно принятым стандартам! Начало новой недели; возможно, время получить новый навык!
Шаг 1. Что мы делаем
Делаем дизайн и кодируем этот очень простой веб-сайт. Не совсем эффектный дизайн, но очень эффективный для обучения основным методам кодирования.
Шаг 2 — Подготовка
Что потребуется
Предполагается, что вы никогда не кодировали сайт раньше или делали это только пару раз. Тем не менее, для выполнения урока вам понадобится следующее:
- Photoshop или аналогичный редактор изображений
- Редактор кода (подробнее об этом позже)
- Базовое понимание того, как работает html, базовый синтаксис и теги. Для ускорения ознакомьтесь с официальным ресурсом w3 Schools, где вы найдёте все основы, необходимые для урока.
- Ditto для css, вы должны понимать, как работают селекторы и быть знакомы с основными свойствами. Опять же, смотрите лучший ресурс w3 Schools
- Очевидно, браузер. Я использую Firefox и вы, если хотите, чтобы ваш сайт повторял мои скриншоты на каждом шаге
Макет
Мы создадим очень простой веб-сайт с четырьмя основными элементами: header, content, sidebar и footer, макет будет выглядеть примерно так:
Хорошо бы зафиксировать макет вашего дизайна, прежде чем начнете, на бумаге или в Photoshop, чтобы оптимизировать процесс и организовать свои идеи.
Шаг 3 — Начало работы
Откройте чистый новый документ Photoshop, скажем, 1000px на 1200px. Мы всегда сможем его подрезать. Я делаю его довольно узким, потому что работаю на ноутбуке, но вы не стесняйтесь, если место позволяет.
Здесь я не буду спорить о разрешениях экрана и оптимальной ширине сайта. Вам нужно знать, что content нашей страницы будет шириной 800 пикселей, и всё. Итак, в нашем документе шириной 1000px мы будем перетаскивать направляющие по меткам 100 и 900px, чтобы установить ширину. У нашего дизайна есть sidebar и я решила сделать её на треть ширины страницы. Две трети от 800 составляет около 530, поэтому давайте добавим еще одну направляющую на 630px. Установим приятный цвет фона # ebe8e8.
Шаг 4 — Header
Возьмите инструмент rectangle и нарисуйте большой голубой прямоугольник в верхней части документа, мой — высоты около 170px , а цвет — 23b6eb. Затем нарисуем худенький тёмно-серый bar в самой верхней части страницы, я использовал # 5d5a5a
Шаг 5 — Highlight
Теперь мы добавим немного светового эффекта в синюю область header . Создайте обтравочную маску над синим слоем, затем возьмите большую мягкую кисть (шириной 400 пикселей) и выберите цвет немного светлее, чем синий фон.
Теперь слегка нажмите кончиком кисти прямо под панелью, вокруг центра документа. Старайтесь не допустить, чтобы более светлый цвет достиг края страницы (будет понятно позже). И установите режим смешивания на screen.
Шаг 6 — Navigation Bar
Теперь мы добавим еще один bar к нижней части синего, он будет серым с наложением градиента, так что точность не имеет большого значения.
На панели стилей слоев добавьте градиент от # e2e3e4 до #bebdbd на 90 градусов.
Шаг 7 — Footer
Давайте нарисуем серый квадрат внизу страницы, я выбрала цвет немного темнее, чем серый, расположенный сверху панели.
Step 8 — Logo
Задний план
Для логотипа мы нарисуем прямоугольник, добавим ещё одну опорную точку и перетащим её в сторону. Чтобы избавиться от округления, нажмите на точку правой кнопкой мыши.
Затем добавьте стили слоя: наложение градиента и 1px штрих: градиент от # aec457 до # cdf399
Текст
Теперь текст: большой и полужирный.
- Шрифт: Myriad Pro
- Стиль: Bold
- Размер: 60px
- Цвет: #36809a
Для придания глубины добавьте внутреннюю тень:
Step 9 — Слоган
Затем я просто добавила короткую строку:
- Font: Arial
- Style: Bold
- Size: 30pt
- Color: #e4dfdf
Шаг 10 — Навигация
Пишите ссылки хорошо и крупно, расставьте и разместите их равномерно.
- Font: Arial
- Style: Bold
- Size: 30pt
- Color: #676666
Шаг 11 — Основное содержимое
Время вставлять макет контента. Я использовала размер заголовка h2, а меньший будет h3 ссылкой на html ipsum.
Сделайте текстовые поля шириной около 2/3 страницы. Стили текста:
- Font: Arial
- Style: Bold
- Size: 36pt
- Color: #0e5d7a
- Font: Arial
- Style: Bold
- Size: 24pt
- Color: #444444
- Font: Arial
- Style: Normal
- Size: 14pt
- Color: #595858
Данные в разделе «latest updates» будут помещены в маленький тег, шрифт такой же, как в абзаце, но 12pt. Я дважды копирую новость из лени.
Step 12 — Sidebar
Ссылки
Затем нарисуем тощий прямоугольник над областью sidebar, цвет # d4d6d3, с 1px строкой #bebdbd
Заполните sidebar фиктивным контентом с иконками, которые я тут использовала. Шрифты такие:
- Font: Arial
- Style: Normal
- Size: 24pt
- Color: #044055
- Font: Arial
- Style: Normal
- Size: 18/14pt
- Color: #373737
Кнопка
Затем мы добавим кнопку «join our team» под ссылками участников. Кнопка — просто прямоугольник с градиентом, что и у логотипа и строкой 1px цвет c7c7c7. Для текста:
- Font: Arial
- Style: Normal
- Size: 24pt
- Color: #434343
Шаг 13 — Footer
Заканчивая макет, добавьте немного фиктивного текста или что хотите, к нижнему колонтитулу. Шрифт:
- Font: Arial
- Style: Normal
- Size: 14pt
- Color: #e0e2e2
С дизайном страницы всё, ничего особенного, но его простота поможет вам следовать за остальной частью процесса.
Нарезка PSD
Теперь, когда у нас есть прекрасный PSD, пришло время разбить его на части, которые будем использовать. Идея здесь в том, чтобы использовать как можно меньше изображений как можно меньшего размера. Okay, начнём с header. Мы хотим растянуть его на весь экран, независимо от его ширины. Для этого мы собираемся вырезать маленький кусочек header и повторять его по экрану, сколько понадобится.
Шаг 14 — The Slice Tool
Может, вам не приходилось использовать slice tool раньше, но это действительно очень просто. Это позволяет вам нарезать файл в крошечные кусочки, которые можно экспортировать в Интернете.
Header
Итак, давайте вырежем небольшой кусочек нашего header. Нажмите и перетащите, чтобы создать срез так же, как инструмент прямоугольной области выделения. Будьте осторожны, чтобы не срезать со стороны изображения, а то не получите ни одного highlight.
Теперь, когда у нас есть эта полоска, мы можем повторить её по оси X. Однако highlighted область не повторяется, поэтому мы должны всё это вырезать . Нарежьте часть header между двумя направляющими, на ширину заявленных 800px .
Footer
Для нарезки footer повторите тот же процесс с узким фрагментом footer.
Всё остальное
Нам понадобятся несколько изображений: иконки «subscribe» и кнопка «join our team».
Поскольку значки и логотип имеют неправильную форму, мы сохраним их как прозрачные .png-файлы, поэтому мы вернемся и возьмём их отдельно.
Итак, чтобы нарезать кнопку, мы можем использовать ту же технику, что с header и footer, но на этот раз нам нужен только один тонкий срез. Когда делаете срез, не забудьте включить 1px строку (добавим позже), вам может понадобиться увеличить масштаб.
Шаг 15 — Экспорт в интернет
Теперь, когда у нас есть снимки, давайте сохраним их как оптимизированные jpeg и поместим их в нужное место.
Перейдите в меню File/Save for web и устройств . В появившемся окне, удерживая клавишу shift, щёлкните, чтобы выбрать каждый фрагмент (опять же, можете увеличить масштаб). Убедитесь, что в раскрывающемся меню «preset» установлено значение JPEG-High, снимите флажок «convert to srgb» и нажмите «save»
В следующем окне выберите имя и место для ваших изображений, я пока сохраняю на рабочий стол.
Убедитесь, что установлено значение «images only», «default settings» и «selected slices only.»
Затем проверьте место, где были сохранены ваши файлы. Вместо поиска отдельных images, найдите папку, помеченную «images», где будут все ваши изображения. Компьютер даст каждому изображению номер, который не очень нужен. Убедитесь, что у вас правильные изображения, затем назовите их соответствующим образом.
Теперь вернёмся к этим надоедливым иконкам и логотипу. Обязательно скройте слои фона, затем снова вытащите slice tool и вырежьте красивые квадратики вокруг каждого значка и логотипа.
Теперь мы проходим ту же процедуру экспорта в web, что и в случае с jpeg, только на этот раз обязательно выберите PNG-24 из выпадающего меню «preset» и отметьте флажком «transparency». Переименуйте и эти файлы и папка с изображениями будет выглядеть примерно так:
Вот и всё, мы закончили работу над нашим PSD и у нас есть все нужные изображения. Пока не закрывайте Photoshop, нам всё равно нужно выбирать цвета, шрифты, размеры и прочее.
Часть 3 — HTML
Шаг 16 — Начало работы
Хорошо, займёмся html. Первое, что вам понадобится, это какой-нибудь редактор кода. Это из области личных предпочтений,
Но я рекомендую начать с бесплатного. Для Mac и ПК я настоятельно рекомендую Komodo в качестве первого редактора кода. Он имеет множество функций, которые идеально подходят для любых пользователей.
Одна из лучших особенностей — синтаксическая проверка, похожая на проверку правописания в текстовых процессорах, она выявит и объяснит небольшие ошибки.
Для ПК есть гораздо больше опций, ни одна из которых мне не знакома, но есть статья Andrew Burgess 22 Neat Code Editors for WindowsВ этом уроке мы будем использовать редактор Komodo, но принципы одинаковы в каждом.
Шаг 17 — Настройка папок
Во-первых, нам нужно создать место хранения всех файлов, связанных с нашим сайтом. Создайте папку сайта, моя называется «MySite», внутри этой папки создайте другую папку, содержащую только что вырезанные изображения.
Назовите её «images». Теперь мы открываем редактор кода, эта часть будет зависеть от того, какой software вы используете:
Если это Komodo, выберите «create new project» и сохраните/переместите файл .kpf в папку «MySite» . Когда вы открываете файл, браузер файлов от Komodo должен отображать содержимое папки.
Затем щёлкните правой кнопкой мыши на файле проекта и выберите «add» и «new file». В появившемся окне выберите «html (xhtml)» и назовите файл «index.html».
Если у вас другой редактор, процесс будет схожим, но основные моменты остаются теми же: вам нужно создать файл index.html, и он должен находиться в папке «MySite» вместе с папкой с изображениями.
Шаг 18 — Настройка файла index.html
Первое, что нам нужно сделать, это объявить тип документа, кодировку символов и создать теги. Во многих редакторах это должно выглядеть примерно так:
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">Между тегами html нам нужен раздел «head», который содержит всю важную информацию о сайте, которая не отображается внутри body сайта.
На этом этапе всё его содержимое, это заголовок страницы, например:MySiteНиже head, логически, мы добавляем body, также заключённое в тегах . Хорошо, теперь мы имеем:
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">MySiteЭто базовая настройка страницы, вы можете сохранить этот штамп для будущего использования.
Помните, мы говорили, что у нас есть разделы header, content, sidebar и footer?
Хорошо, теперь каждый из них будет заключён в свой и ему будет присвоен соответствующий id.id="header">id="content">id="sidebar">id="footer">ПРИМЕЧАНИЕ. Хорошо бы, особенно при первом запуске, добавлять комментарии в каждом
