Вики Сообщества
Advertisement
Вики Сообщества

Собираетесь изменить дизайн своей вики с помощью CSS? Эта справочная статья поможет вам разобраться в некоторых вопросах и изменить внешний вид вики без проблем.

Советы

  • основной и самый главный:

Конструктор тем

Самым простым и наиболее эффективным способом изменения внешнего вида вики является Конструктор тем. Он позволяет без лишних затрат времени и знаний CSS настроить дизайн, в том числе поменять логотип, фон или цветовую схему вики. Ознакомьтесь со справочной статьёй Конструктора!

Theme designer - theme tab.png

Подбирайте цвета с умом

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

  • Не все люди видят цвета так, как вы. Значительное число людей имеют проблемы, связанные с дальтонизмом (цветовой слепотой). См. Справка:Цветовая слепота.
  • Дисплеи мониторов или других устройств отображают цвета по-разному, особенно при различной освещенности. То, что отображается на вашем экране, может отображаться иначе или вовсе не отображаться на другом экране.

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

  • Старайтесь поддерживать хороший контраст между текстом и фоном. Обычно хорошего сочетания добиваются подбором основного светлого и тёмного цвета (в качестве текста и фона и наоборот).
  • Фоновое изображение — это круто, но не в том случае, если из-за него вы не можете прочитать текст. Обратите на это внимание, если задаёте прозрачность странице через Конструктор тем, чтобы отобразить за ней фон. Не переусердствуйте.
  • Также не стремитесь чересчур уменьшить размер объектов, чтобы их не стало слишком трудно различить (особенно это касается области с основным/вспомогательным текстом, которых могут коснуться изменения и при выборе другого шрифта). См. Справка:Подключение Google Fonts.

Используйте простой стиль

Всегда есть желание сделать свою вики красивее, добавив в дизайн анимацию, новые иконки или цвета. Однако подобное нагромождение может запутать или вовсе оттолкнуть участников и читателей.

Стоит также учесть, что Фэндом использует динамическую ширину страницы — то, что отображается на вашем разрешении экрана, может отображаться иначе при меньшем или большем разрешении. Хорошим примером является ширина блоков. Использование точных значений чаще всего приводит к зазорам и пустым пространствам между блоками и содержимым страницы, в то время как процентные (относительно размера родительсого элемента) или относительные (по отношению к видимой области) значения позволяют этого избежать.

Читабельность кода

Помните, что вы не единственный человек, который может настраивать дизайн вики. Убедитесь, что код, написанный вами, смогут понять другие. Использование понятных названий селекторов и соблюдение расстояния между блоками кодов могут в этом помочь.

Не забывайте использовать комментарии в коде. Это поможет быстро разобраться, что это за код и за что он отвечает. Добавить комментарий достаточно просто — вставьте ваш текст между /* и */. В качестве примера:

/* Это комментарий */

См. также