Hai
Search
⌃K
🖍

Theming Hai!

Hai! uses regular CSS for theming, with a few special considerations unique to Hai!:

Things to keep in mind

  • Backgrounds are added to html. Do not block html from being seen entirely. body can be use to apply a filter or effect over the image, and background-filters can be added to html.
  • Fonts should not be defined in the theme: fonts are selected by the user, and will be overridden by their selection.

Special selectors

.animationOff { }

Used to specifically define a class without animation. Hai! will attempt to disable most animations when the Visual Effects setting is switched off.
A good example of this might be the user experience when changing the Visual Effects setting in Hai!. When disabled, users can expect to see a less animated experience with fewer flashy visuals. This means that certain classes or design elements may be less flashy or less pronounced than usual. In other words, users can expect a toned-down UI when the Visual Effects setting is turned off.

.nc, .lc, .hc

Hai! has 4 contrast settings: Default/Theme (no selector), High Contrast (.hc), Normal Contrast (.nc) and Low Contrast (.lc).
By default, Low Contrast makes all elements and text softer. Normal removes any modifications to text including text-shadows. High Contrast adds outlines to the text.
Default/Theme has no selector, as is the default for what fits your theme best.

[scroller=left,top] { }

The navigation bar can be made to overflow and scroll. Some buttons will not be visible until scrolled to.. When the user taps on one of the navigation buttons, the viewport for the navigation area can be made to scroll to the button that was pressed.
This selector accepts no rules, and acts like a flag to enable this behavior. The options for it are left or top
Hai! looks for this option as the second selector in the theme file. If it is not present there, the effect will not be enabled. The included WP7 theme uses this for it's Metro-style navigation bar.

.isVisible {}

Post content has the class .isVisible added to it when it starts to become visible in the timeline. This can be used for arranging or animating incoming posts. The platforms this works on are limited to mostly the iPhone at the moment.

.action_boost, .action_fav, .action_unboost, .action_unfav

When a button on a post is pressed, .action classes are added to the body. The included Cute theme uses these to create full window animations using .action_{action}::after

.notification.favourite, notification.reply, .notification.share

Styles applied to notifications to indicate type

.shared, .favorited {}

Classes added to the the boost and favourite buttons to indicate their state

.sk-grid, .sk-grid-cube {}

These make up the waiting animations while Hai! is in a loading state. The animation appears when .showLoad is attached to .sk-grid.

.deleteVisualItem {}

This class is attached on any element that is being deleted.

.spoiler_text, .spoiler_text.ns

.spoiler_text.ns is used when the post is hidden (usually behind .spoiler_text). Styles for when the post is visible are .spoiler_text.

.isDesktop

Yes, yes, user agent sniffing is bad. However, using media queries, if the device being used is deemed to be a desktop (or iPad at the moment), the class .isDesktop will be added to the body.

Included Animations

​Animate.css animations are built into Hai! In addition, these animations can also be used:
  • crumple
  • attentionShake

Classes

Structure

​
Previous
Theme Previews
Next
Color Settings
Last modified 7mo ago