Hypixel SkyBlock Wiki:Style Manual/UIs


 * < Wiki Policies | < Style Manual

UIs Are custom interactable user interfaces that emulate the real thing in-game. All UI's use custom fonts. They may range from Hypixel SkyBlock UI's to vanilla UIs.

Templates Used
Since UI's are a huge topic, many different templates are used to help reduce the strain on editors and the source code size on pages. The templates used are as follows:
 * Slot - The core template of UIs, which generates a basic inventory slot UI. The module that implements this may be found at Module:Inventory slot.
 * Crafting Table - A template that creates a Vanilla Minecraft crafting table. Although SkyBlock uses a different UI than the vanilla one, the two are so similar in function that it does not cause any issues for readers.
 * Brewing Stand - A template that creates Vanilla Minecraft Brewing Stand UI. As with the same as above, the UIs are so similar that a deviation from vanilla is not needed.
 * Furnace - A template that creates Vanilla Minecraft Furnace UI.
 * UI - A Generic template that creates a SkyBlock Inventory UI. Highly configurable.
 * Collection UI - A template that creates a Collection UI.
 * Collection Rewards UI - A template that creates a Collection Rewards UI.
 * Collection Recipe - A template that works in the same manner as Crafting Table, but as an Inventory UI showcase.
 * Enchanted Collection Recipe - Same as Collection Recipe, but for Enchanted Items.
 * Minion Recipes UI - Same as Collection Rewards UI, but for Minions.
 * Potion UI - Creates a Potion brewing recipe UI.
 * Forging Table - Creates a Forging UI.
 * UIText - Makes creating complicated UI tooltips a breeze.
 * See the categories Category:Inventory templates and Category:UI Templates for all templates relating to UI's.

Unused Vanilla UIs

 * Grindstone - A template that creates Vanilla Minecraft Grindstone UI. Not currently used due to Skyblock not implementing this item.
 * Loom - A template that creates Vanilla Minecraft Loom UI. Not currently used due to Skyblock not implementing this item.
 * Anvil - A template that creates Vanilla Minecraft Anvil UI. Not currently used due to Skyblock not implementing this item.
 * Smithing - A template that creates Vanilla Minecraft Smithing Table UI. Not currently used due to Skyblock not implementing this item.

Hypixel Skyblock UI layout
Hypixel Skyblock UIs comprise of the following layout:
 * The main table, which is a class called mcui.
 * The main title, which is made out of a custom minecraft font.
 * The UI slots, which are individual table cells with HTML.
 * All css related to this may be found at MediaWiki:Custom-common.less/inventory.less.
 * Most UI templates that use lua are found in Module:UI.

Tooltips
Since SkyBlock makes extensive use of custom tooltips, the wiki also uses them. These tooltips are generated with MediaWiki:Common.js/minetip.js. These can be added to inventory slots with Slot.

When Slot is called, it first draws from an aliases module (Module:Inventory slot/Aliases and Module:Inventory slot/Tooltips) to see if there are any preloaded tooltips. If not manual tooltips may be added.

Fonts
In tooltips, custom colors may be used. The syntax for tooltips is quite simple:
 * For custom colors, such as &a or &l may be used.
 * For newlines, the character / is used. This may be prevented by escaping it as follows: \/

Tabbers
In SkyBlock, UI's may link/open other UI's. The replicates this with UI Tabbers. These may be activated by adding an element with a class called sbw-ui-tabber and placing UI's inside.

When a UI is placed inside, a slot with a class with the prefix goto- (this may be generated using Slot and the paramater) will attempt to find a UI with the matching ID with the ui- prefix.

When it succeeds, it will open the other UI. The JS that works this may be found in MediaWiki:Common.js.

A Child UI is hidden at first, so it is only shown when a UI tabber is activated.