Викия

ru-Викия

коммент.24

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

Навигация
#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!

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

Заключение

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

Викия-сеть

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