Docs
Guides and reference for MyOshi Theme Lab.
- Theme Lab How the lab works, previews, snapshots, exporting, and recommended patterns.
- Getting Started What this project is, where to click, and the fastest way to start styling.
- How To - Get Preview HTML How to get the rendered HTML from your MyOshi preview.
- How To - Audit Your Custom Theme How to use the auditing tools to audit your custom theme.
- Tool - Accessibility Audit Audit your theme for common accessibility issues (alt text, accessible names, contrast).
- Tool - Color Converter Convert colors to HEX/RGBA and insert variable snippets into Custom CSS.
- Tool - CSS Blocks Insert pre-made CSS chunks into Custom CSS.
- Tool - Component Styler Generate scoped CSS for common components (cards, navbar, tabs, links).
- Tool - CSS Scope Fixer Rewrite pasted CSS so it works with MyOshi’s automatic selector scoping.
- Tools What the Tools modal is, where to find it, and what each tool does.
- Tool - Quick Theme Builder Guided starter theme generator (palette, spacing, card style, typography, avatar).
- Tool - Schedule Builder Generate a responsive streaming schedule block (HTML + CSS).
- Tool - Theme Variables Generate scoped --vs-* overrides for the base template’s design system.
- Tool - Widget Inserter Insert pre-made widgets (HTML + CSS) into your theme with customizable fields.
- Widgets Pre-made HTML + CSS blocks you can insert into your theme.
- Widget - Info Card Simple heading & content card. Great for “About”, “Rules”, “Credits”, etc.
- Widget - Callout Box A title + body callout with an optional link. Fully scoped to .labw-callout.
- Widget - MyOshi Card (native-looking) A native-looking card that reuses MyOshi’s built-in .card / .card-header / .card-body styles.
- Widget - Notice Glow (native) A native-looking “notice” strip that reuses the base template’s .notice-glow style.
- Widget - Sparkle Divider (native) A themed horizontal divider that matches the base template’s “sparkle” styling.
- Widget - Streaming Schedule (Grid) Responsive 7-day schedule grid. Fill each day with slots using the provided markup.
- Widget - Twitch Buttons Three CTA buttons for Twitch. Delete any you don’t want.
- Templates How demo templates are stored, edited, and added without touching application code.
- Extending Tools & Widgets Developer reference for adding new tool, widget, or CSS block definitions.