Fandom Developers Wiki
Advertisement

BalancedTL — это набор стилей, предназначенных для конструирования заглавных страниц и шаблонов. Использует те же дизайнерские решения, что и вся линейка «Balanced» от Hummel009.

Использование[]

BalancedTL содержит набор классов, использующих цвета вики (акцентный цвет, основной цвет, дополнительный цвет, цвет ссылок и т. д.). Вот пример заглавной страницы, созданной сугубо при помощи BalancedTL. Этот набор классов применим для всех вики, вне зависимости от того, тёмная ли у них тема или светлая.

hummel-navi

Допустим, вы хотите сделать на заглавной странице типичную навигацию по основным аспектам вашей вики. Обычно это реализовано в виде галереи с картинками с подписями, а при нажатии на изображение вы куда-то перенаправляетесь. Так вот, этот шаблон сделает навигацию более красивой и анимированной.

Вы можете вставить много li в один ul, чтобы получить много ячеек в одной строке. Чтобы иметь несколько строк ячеек, просто создайте несколько ul'ов. Все ячейки в пределах строки будут иметь одинаковую ширину. Если такой вариант вам не подходит, ознакомьтесь ниже с параметрами позиционирования ячеек.

<ul class="hummel-navi">
	<li>
		[[File:{{{Photo}}}|link={{{Page}}}]]
		<div style="line-height: 18px">[[{{{Page}}}|{{{Label}}}]]</div>
	</li>
</ul>

Всего есть четыре класса-параметра позиционирования ячеек: square, full, static и auto. Без hummel-navi они не имеют смысла; между собой параметры можно комбинировать.

  • «square» делает изображения в навигации не круглыми (по умолчанию там закругление с радиусом 50%).
  • «full» позволяет использовать в навигации изображения с X ≠ Y.
  • «static» позволяет использовать в навигации изображения с X ≠ Y и хардкодить их высоту, подгоняя изображение под рамки. Без «full» не работает. В будущем может быть @Deprecated.
  • «auto» включает разную ширину ячеек с автоматическим переходом на новую строку, если в текущей строке больше нет места. Что-то вроде полностью автоматизированного конструктора навигации без необходимости расставления большого количества ul'ов вручную.
<ul class="hummel-navi square"></ul>
<ul class="hummel-navi full"></ul>
<ul class="hummel-navi static"></ul>
<ul class="hummel-navi auto"></ul>

hummel-linker

Допустим, у вас есть какой-то шаблон для ссылок на другие страницы или сайты, и в этом шаблоне нет ничего, кроме ссылок. Подобные шаблоны часто встречаются в Википедии. Если вы считаете, что список ссылок или абзац со ссылками выглядит плохо, то этот шаблон вам пригодится. Небольшой бонус: шаблон отлично работает на мобильных устройствах.

{|class="hummel-linker hummel-right hummel-mainbox"
|[https://example.com Text]
|-
|[https://example.com Text]
|-
|[https://example.com Text]
|-
|...more links
|}

hummel-gallery

На вики о мультфильмах и сериалах иногда возникает необходимость добавить избранные фотографии из раскадровки, и тогда галерея состоит из множества фотографий одного формата (то есть все фотографии имеют одинаковую ширину и высоту). В этом случае может пригодиться шаблон скроллбокса, который позволит красиво, адаптивно и без больших пространственных затрат оформить эту галерею, а также сделать миниатюры изображений более высокого качества.

<div class="hummel-gallery">
	<gallery spacing="small" widths="440" mode="nolines" heights="247">
		contents of the gallery
	</gallery>
</div>

hummel-mainbox and related

Набор самых основных стилей, которые позволяют при их комбинировании создать кастомный шаблон-бокс, который будет иметь фон, может иметь левую или правую границу (или две границы одновременно, или вообще не иметь границ).

В этот набор также входит шаблон-разделитель, отделяющий содержимое внутри него от содержимого выше при помощи черты; двойной разделитель (с чертами сверху и снизу); шаблон заголовка, который создает полупрозрачный фон под текстом на половину высоты букв, как это реализовано в заголовках правой рельсы.

{| class="hummel-back" style="padding:1em; font-size: 24px; text-align: center; width: 100%">
!Big greetings text with padding and background without any borders.
|}


{|class="hummel-right hummel-mainbox">
!<span class="hummel-header">Header</span>
|-
|Some text in the block with right border.
|}


{|class="hummel-left hummel-mainbox">
!<span class="hummel-header">Header</span>
|-
|Some text in the block with left border.
|}


<div class="hummel-updown" style="padding-top:1em; padding-bottom: 1em; margin-top: 15px">
Block with separation from upper content and lower content.
</div>


<div class="hummel-separator" style="padding-top:1em; padding-bottom: 1em; margin-top: 15px">
Block with separation from upper content.
</div>

hummel-edit or hummel-info

Иногда вверху статьи размещают какой-нибудь короткий дисклеймер или сообщение о том, что, например, статья требует доработки (или, наоборот, является избранной). Иными словами, шаблон-плашка. Для таких шаблонов, если в них мало текста и если они крайне важны, отлично подходит класс hummel-edit с ярким акцентным цветом фота.

Если же ваш шаблон второстепенный и/или требует большое количество текста, то предпочтительно использовать hummel-info, который использует более мягкие цвета и не оттягивает на себя слишком большое внимание.

{|class = "hummel-edit">
!Very important info about the page!
|}


{|class = "hummel-info">
!Very important info about the page, but contains a big amount of text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}

Установка[]

См. также[]

Advertisement