Збираєтеся змінити дизайн своєї вікі з допомогою CSS? Ця довідкова стаття допоможе вам розібратися в деяких питаннях і змінити зовнішній вигляд вікі без проблем.

Поради[ред. | ред. код]

Конструктор тем[ред. | ред. код]

Найпростішим і найбільш ефективним способом зміни зовнішнього вигляду вікі є Конструктор тем. Він дозволяє без зайвих витрат часу та знань CSS змінити дизайн, в тому числі поміняти логотип, фон або колірну схему вікі. Ознайомтеся з довідковою статтею Конструктора!

Theme designer - theme tab.png

Підбирайте кольори з розумом[ред. | ред. код]

Використання конфліктуючих один з одним або позбавлених смаку кольорів може відштовхнути користувачів. Особливо це стосується області з вмістом сторінки. Пам'ятайте, що:

  • Не всі люди бачать кольори так, як ви. Значне число людей мають проблеми, пов'язані з дальтонізмом (колірною сліпотою).
  • Дисплеї моніторів або пристроїв відображають кольори по-різному. Те, що з'являється на вашому екрані, може відображатися інакше або зовсім не відображатися на іншому екрані.

Створення колірної схеми для теми не є легким процесом. Щоб уникнути помилок, просто дотримуйтесь наступних правил:

  • Намагайтеся створити гарний контраст між текстом та фоном. Хорошим прикладом є темний колір тексту на світлому фоні.
  • Фонове зображення — це круто, але не в тому випадку, якщо через нього ви не можете прочитати текст. Зверніть увагу, що Конструктор тем дозволяє змінити прозорість фону статей, що дозволяє відобразити фон. Не перестарайтеся.
  • Не зменшуйте розмір об'єктів! Особливо це стосується області з текстом.

Використовуйте простий стиль[ред. | ред. код]

Завжди є бажання зробити свою вікі красивіше, додавши в анімацію дизайн, нові іконки або кольори. Однак подібне нагромадження може заплутати або зовсім відштовхнути користувачів та читачів.

Варто також врахувати, що Фандом має динамічну ширину сторінки, що відображається на вашій роздільній здатності екрану, може відображатися інакше при меншій або більшій роздільній здатності. Хорошим прикладом є ширина блоків. Використання точних значень найчастіше призводить до зазорів та порожніх просторів між блоками та вмістом сторінки, в той час як процентні значення дозволяють цього уникнути.

Читабельний код[ред. | ред. код]

Пам'ятайте, що ви не єдина людина, яка може налаштовувати дизайн вікі. Переконайтеся, що код, написаний вами, зможуть зрозуміти інші. Використання зрозумілих назв селекторів і дотримання відстані між блоками кодів можуть у цьому допомогти.

Не забувайте використовувати коментарі у програмному коді. Це допоможе швидко розібратися з кодом і зрозуміти, за що він відповідає. Додати коментар достатньо просто: вставте ваш текст між /* та */. В якості прикладу:

/* Це коментар */

Див. також[ред. | ред. код]

Community content is available under CC-BY-SA unless otherwise noted.