BalancedTL

BalancedTL — is a set of styles designed for designing title pages and templates. Uses the same design solutions as the entire "Balanced" lineup from Hummel009.

Usage

BalancedTL contains a set of classes that use the wiki colors (accent color, primary color, secondary color, link color, etc.). Here is an example of a main page created purely with BalancedTL. This set of classes applies to all wikis, regardless of whether they have a dark or light theme.

hummel-navi

Let's say you want to do a typical navigation of the main aspects of your wiki on the main page. This is usually implemented as a gallery with pictures with captions, and when you click on an image you are redirected somewhere. So, this template will make the navigation more beautiful and animated.

You can insert many li in one ul to get many cells in one row. To have multiple rows of cells, just create multiple ul's. All cells within a row will have the same width. If this option doesn't work for you, check out the cell positioning options below.

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

There are four classes of cell positioning parameters: square, full, static and auto. They are meaningless without hummel-navi; the parameters can be combined among themselves.

«square» makes the images in the navigation not round (by default there is a 50% radius rounding).
«full» allows X ≠ Y images to be used in navigation.
«static» allows you to use X ≠ Y images in navigation and hardcode their height, adjusting the image to fit the frames. It doesn't work without 'full. May be @Deprecated in the future.
«auto» enables different cell widths, with an automatic switch to a new line if there's no more room on the current line. Something like a fully automated navigation builder without having to arrange a lot of ul's manually.

<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

Suppose you have some template for linking to other pages or sites, and there is nothing in that template but links. Templates like this are often found on Wikipedia. If you think a list of links or a paragraph with links looks bad, this template will come in handy. A little bonus: the template works great on mobile devices.

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

hummel-gallery

On wikis about cartoons and TV series, sometimes there is a need to add favorite photos from the storyboard, and then the gallery consists of many photos of the same format (i.e. all photos have the same width and height). In this case, a scrollbox template can be useful, which will allow you to design this gallery beautifully, adaptively and without large space costs, as well as to make thumbnails of images of higher quality.

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

hummel-mainbox and related

A set of very basic styles that allow you, when combined, to create a custom box template that has a background, can have a left or right border (or two borders at the same time, or no border at all).

This set also includes a divider template that separates the content inside it from the content above it using a dash; a double divider (with dashes above and below); and a header template that creates a semi-transparent background below the text at half the height of the letters, as implemented in right-rail headers.

{| 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

Sometimes some short disclaimer or a message that, for example, the article needs revision (or, on the contrary, is a favorite) is placed at the top of the article. In other words, a boilerplate. For such templates, if there is little text in them and if they are extremely important, hummel-edit class with a bright accent color of the photo is perfect.

If your template is secondary and/or requires a lot of text, it is preferable to use hummel-info, which uses softer colors and does not draw too much attention to itself.

{|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.
|}

BalancedTL

Contents

Usage

hummel-navi

hummel-linker

hummel-gallery

hummel-mainbox and related

hummel-edit or hummel-info

Installation

See also