Собираетесь изменить дизайн своей вики с помощью CSS? Эта справочная статья поможет вам разобраться в некоторых вопросах и изменить внешний вид вики без проблем.
- Также, прежде всего, ознакомьтесь с Политикой настроек
Советы[]
- основной и самый главный:
Конструктор тем[]
Самым простым и наиболее эффективным способом изменения внешнего вида вики является Конструктор тем. Он позволяет без лишних затрат времени и знаний CSS настроить дизайн, в том числе поменять логотип, фон или цветовую схему вики. Ознакомьтесь со справочной статьёй Конструктора!
Подбирайте цвета с умом[]
Использование конфликтующих друг с другом или безвкусных цветов может оттолкнуть участников. Особенно это касается области с содержимым страницы. Помните, что:
- Не все люди видят цвета так, как вы. Значительное число людей имеют проблемы, связанные с дальтонизмом (цветовой слепотой). См. Справка:Цветовая слепота.
- Дисплеи мониторов или других устройств отображают цвета по-разному, особенно при различной освещенности. То, что отображается на вашем экране, может отображаться иначе или вовсе не отображаться на другом экране.
Создание собственной цветовой схемы для вики — достаточно сложный процесс. Чтобы избежать ошибок, просто придерживайтесь следующих правил:
- Старайтесь поддерживать хороший контраст между текстом и фоном. Обычно хорошего сочетания добиваются подбором основного светлого и тёмного цвета (в качестве текста и фона и наоборот).
- Фоновое изображение — это круто, но не в том случае, если из-за него вы не можете прочитать текст. Обратите на это внимание, если задаёте прозрачность странице через Конструктор тем, чтобы отобразить за ней фон. Не переусердствуйте.
- Также не стремитесь чересчур уменьшить размер объектов, чтобы их не стало слишком трудно различить (особенно это касается области с основным/вспомогательным текстом, которых могут коснуться изменения и при выборе другого шрифта). См. Справка:Подключение Google Fonts.
Используйте простой стиль[]
Всегда есть желание сделать свою вики красивее, добавив в дизайн анимацию, новые иконки или цвета. Однако подобное нагромождение может запутать или вовсе оттолкнуть участников и читателей.
Стоит также учесть, что Фэндом использует динамическую ширину страницы — то, что отображается на вашем разрешении экрана, может отображаться иначе при меньшем или большем разрешении. Хорошим примером является ширина блоков. Использование точных значений чаще всего приводит к зазорам и пустым пространствам между блоками и содержимым страницы, в то время как процентные (относительно размера родительсого элемента) или относительные (по отношению к видимой области) значения позволяют этого избежать.
Читабельность кода[]
Помните, что вы не единственный человек, который может настраивать дизайн вики. Убедитесь, что код, написанный вами, смогут понять другие. Использование понятных названий селекторов и соблюдение расстояния между блоками кодов могут в этом помочь.
Не забывайте использовать комментарии в коде. Это поможет быстро разобраться, что это за код и за что он отвечает. Добавить комментарий достаточно просто — вставьте ваш текст между /* и */. В качестве примера:
/* Это комментарий */