Викия

ru-Викия

коммент.24

Модульные инфобоксы. Часть 2: Оформление

Обнаружено использование расширения AdBlock.


Викия — это свободный ресурс, который существует и развивается за счёт рекламы. Для блокирующих рекламу пользователей мы предоставляем модифицированную версию сайта.

Викия не будет доступна для последующих модификаций. Если вы желаете продолжать работать со страницей, то, пожалуйста, отключите расширение для блокировки рекламы.

Навигация
#1 Строение#2 Оформление и стилиСправочная статья (ТегиCSS)

Введение

Здравствуйте. Приятно снова увидеть вас на уроке. Сегодня мы перейдём к более творческой части создания — оформление модульного инфобокса. Увы, но привычные многим нам параметры типа style и class не работают тут. Кто-то скажет «Фу! На помойку!», а я скажу Стоять!. Не будь у нас альтернативы, стал бы я создавать этот блог? Конечно да нет! Вновь запасаемся напитками и открываем свои информационные каналы для принятия знаний.

Он некрасивый!

Надеюсь, что после первого урока многие из вас уже попробовали свои силы в создании модульного инфобокса. Если нет, то я отвечу за тех, кто попробовал — модульный инфобокс не всегда выглядит так, как многим хотелось бы. «Он некрасивый» — хорошее оправдание чтобы сложить ручки и отказаться от него, неправда ли? Любой алмаз до огранки выглядит ужасным, однако, отдав его в руки мастера, он сразу же засверкает на солнце.

«Но я ведь не мастер», подумали вы.
— Самое время становится им! Специально для вас инженеры потрудились и сделали возможность персонализации инфобокса через несколько классов.
«Какие классы? Что ты несёшь?»
— Классы это набор стилей в CSS. С помощью них можно творить поразительные вещи.
«CSS? Ой, нет, всё, я сваливаю!»
— Стоять! Обширных познаний в CSS от вас не требуется. Всё, что вам нужно, это знать как задавать цвет и ещё несколько мелочей (Хотите больше? Увы, но тогда придётся подучить CSS или попросить помощи на форуме). Как всё это делать — сейчас расскажу.

Инфобокс имеет несколько стилей, которые значительно упрощают создание дизайна для него. Найти их, а также посмотреть на яркие примеры, можно здесь. Вот, например, хочу я покрасить фон своего инфобокса в красный цвет и беру из списка класс ".pi-background":

.pi-background {
    background-color:red; /* красный цвет */
}

Просто? Просто! А вот ещё я хочу чтобы заголовки были черными (background-color:black;), цвет текста в них был белым (color:white;) и сам текст был по центру (text-align:center;). Вот тут у меня появляется огромный выбор: я могу покрасить только заголовки тега header, или же только "короля заголовков" — title. А могу и всё сразу, так ведь проще. И инфобокс не будет выглядеть как новогодняя ёлочка :) Идём всё по той же ссылочке и смотрим:

  • .pi-secondary-background — меняет фоновый цвет заголовков
  • .pi-title — отвечает за стили ячейки title (наш "король")

Давайте запишем и посмотрим, что у нас получилось:

.pi-secondary-background {
    background-color:black;
    color:white;
    text-align:center;
}
 
.pi-title {
    background-color:black;
    color:white;
    text-align:center;
}

Работает, но писать один и тот же стиль дважды некрасиво, да? Небольшой урок из CSS: нескольким классам можно задавать общий стиль. Для этого классы нужно записать через запятую.

Оk, Google, так и сделаем! Для красоты я буду разделять классы новой строкой после каждой запятой:

.pi-secondary-background,
.pi-title {
    background-color:black;
    color:white;
    text-align:center;
}

Стало лучше и компактнее, верно? Главное не забывать про запятую и не поставить её после последнего класса. Теперь запишем всё вместе и посмотрим, что у нас получилось:

Модульный инфобокс Вафли со стилем.png

Результат покраски: Новый, «красочным» стиль!

.pi-background {
    background-color:red; /* красный цвет */
}
 
.pi-secondary-background,
.pi-title {
    background-color:black;
    color:white;
    text-align:center;
}
«И куда теперь это?»
— Всё просто — данный код нужно добавить на страницу MediaWiki:Wikia.css.
«Я добавил, а ничего не поменялось! Автор не может в CSS!!»
— Тихо, тихо. Все проблемы в том, что вы не сбросили кэш. Инструкцию о том, как это делается на вашем браузере, можно найти в самом начале страницы MediaWiki:Wikia.css. Если там нет инструкции для вашего типа браузера — "Ок, Google!"
«А вот у нас инфобокс тоже помешан на классах, только мы указываем их название при заполнении инфобокса и получаем новую цветовую схему. А ваш так может?»
— Может! Помните старый-добрый тег infobox? Читали справку? Помните, что он имеет ряд параметров? Одним из них является параметр theme-source. Что-то знакомое, не находите? Да-да, это аналог параметра source и работает он аналогично.

Вернёмся к моему примеру инфобокса, предварительно выкинув пройденный материал и добавив новый:

<infobox layout="stacked" theme-source="Тема">
    <!-- тут был выкинутый материал -->
</infobox>

Что поменялось при заполнении шаблона? Добавилась переменная Тема:

{{Инфобокс
|Тема = 
...
}}
«Добавил. Указал. Как это работает-то?»
— Всё просто. При заполнении этой переменной к вашему инфобоксу добавится новый класс, который будет содержать в своём названии то, что вы ввели. Название этого стиля — .pi-theme-"что-то". Тяжело понять, знаю. Перейдём сразу к примерам: при заполнении переменной "Тема" я поставил значение Waffle. Это значит, что теперь мой инфобокс имеет класс .pi-theme-Waffle. Гораздо проще понять, верно?) Однако мне стоит обратить ваше внимание на то, что все пробелы между словами при заполнении будут заменены на "-". Опять к примерам: теперь я задал значение Waffle 2. Это значит, что теперь мои классом будет .pi-theme-Waffle-2. Пробел видите? Замену видите? Всё просто :)
«Ура! Ура! Мы получили новый бесполезный класс! Что делать?»
— А теперь ещё проще! Помните нашу прошлую коллекцию стилей? Теперь перед каждым прошлым классом прописываем наш новый класс через пробел(!). Что у нас вышло:
.pi-theme-Waffle-2 {
    background-color:red; /* красный цвет */
}
 
.pi-theme-Waffle-2 .pi-secondary-background,
.pi-theme-Waffle-2 .pi-title {
    background-color:black;
    color:white;
    text-align:center;
}
«Эй! Ты сказал, что перед каждым нужно через пробел записать новый класс. Куда ты дел .pi-background? Что это за магия?»
— Это хороший вопрос — .pi-background и .pi-theme-Waffle-2 теперь равнозначные. Почему так получилось я объяснять не буду — те, кто знают HTML и CSS поймут, а тем, кто этого не знает, это и не нужно) Просто, при наличии "своего" класса, заменяйте это дело.
«Было 10 строчек, 10 строчек и осталось. В чём прикол? Как стили-то другие прописывать??»
— Включите воображение. А пока оно включается, я оставлю вам подсказку в виде примера:
/* Waffle */
.pi-theme-Waffle {
    background-color:black; /* красный цвет */
}
 
.pi-theme-Waffle .pi-secondary-background,
.pi-theme-Waffle .pi-title {
    background-color:red;
    color:white;
    text-align:center;
}
 
/* Waffle 2 */
.pi-theme-Waffle-2 {
    background-color:red; /* красный цвет */
}
 
.pi-theme-Waffle-2 .pi-secondary-background,
.pi-theme-Waffle-2 .pi-title {
    background-color:black;
    color:white;
    text-align:center;
}
«Ну вот. Теперь у инфобоксов без своих классов пропали все косметические эффекты :C Что делать?»
— Откатимся ещё немного назад и вспомнить простые стили без собственных классов. Помните? Вот теперь возьмите их и запишите перед всеми стилями с собственными классами:
.pi-background {
    background-color:red; /* красный цвет */
}
 
.pi-secondary-background,
.pi-title {
    background-color:black;
    color:white;
    text-align:center;
}
 
/* Waffle */
.pi-theme-Waffle {
    background-color:black; /* красный цвет */
}
 
.pi-theme-Waffle .pi-secondary-background,
.pi-theme-Waffle .pi-title {
    background-color:red;
    color:white;
    text-align:center;
}
 
/* Waffle 2 */
.pi-theme-Waffle-2 {
    background-color:red; /* красный цвет */
}
 
.pi-theme-Waffle-2 .pi-secondary-background,
.pi-theme-Waffle-2 .pi-title {
    background-color:black;
    color:white;
    text-align:center;
}
«Это хорошо, что поддерживает изменяющийся стиль. А есть способ добавить НЕ изменяющийся стиль? Чтоб вот раз и навсегда!»
— Конечно есть! В наше время без стабильности не прожить. Что нужно сделать? Достаём шаманский бубен, ударяем в него пару раз и откладываем в сторонку. Сделали? Откуда у вас бубен о_О? Ладно, не важно. Помните theme-source? Вот теперь мы меняем его на theme, а его значение на нужное нам. Думаю, вы уже догадались о том, что теперь нужное нам название будет играть не роль переменной при заполнении шаблона, а являться названием в "своём" классе. А свои классы мы прошли, верно?) Ну, для закрепления материала, ещё один примерчик!
<infobox layout="stacked" theme="Waffle">
    <!-- тут могла быть ваша реклама -->
</infobox>

Видите? Теперь его класс будет .pi-theme-Waffle. И никакие переменные для классов указывать уже не надо) Но, раз уж речь пошла о подобном, стандартную и меняющиеся темы можно комбинировать. Да-да! Вот вам пример:

<infobox layout="stacked" theme="Waffle" theme-source="Тема">
    <!-- всё равно никто не читает -->
</infobox>

Теперь у нашего инфобокса класс по умолчанию .pi-theme-Waffle, но мы всегда можем его изменить через переменную "Тема" при заполнении шаблона. Однако учтите, что параметр theme всегда(!) должен стоять перед theme-source!

«Ура ура ура! Остался один вопрос: когда ты уже, наконец-то, закончишь? Мой чай закончился! Это трудная тема! Хочу экспериментировать!»
— Перемена для учителя. Потерпите пару строк!

Заключение

Подведём общий итог. Как видно, новые инфобоксы не такие уж и страшные и ограниченные в своём функционале. Теперь, когда вы официально прошли курс молодого инфобоксостроителя — дерзайте! Экспериментируйте! Творите! Покоряйте этот Эверест и делитесь своими творениями! Удачи!

Викия-сеть

Случайная вики