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.
 * UIPage - For transclusion of UIs on other pages. Custom settings can be passed to the first UI that is transcluded.
 * 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.
 * 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: For a collection UI, please note the following:
 * 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.
 * The page for a collection can be created with Collection UI
 * Sub-pages for that collection (if any) shall be created with the following exceptions:
 * The sub-page "XX Rewards" that separates the main page and the recipe, can be omitted
 * For Minion Recipes, which are created with Minion Recipes UI, only the page with all the minions need to be created
 * For Potion Recipes, which currently should be created with UI, only the page with all the potions need to be created
 * For Armor Set Recipes, which are created with UI, should further link to subpages of individual recipes

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.

An example of such a tabber is as follows:

To prevent unnecessary new lines being added before lower-level tabs, the extra lines in-between should be commented out as shown above.