Getting Started
What this project is, where to click, and the fastest way to start styling.
MyOshi Theme Lab is a browser-based sandbox for authoring MyOshi Custom CSS and Custom HTML safely.
It gives you:
- A demo profile so you can style immediately (no copy/paste required).
- A sandboxed preview (scripts blocked) to reduce risk while experimenting.
- One-click tools (snippets, widgets, audits) to speed up common tasks.
- Theme bundles (Import/Export) so you can back up and share work as a single file.
MyOshi is currently private, so this tool does not fetch live profiles automatically. Instead, it ships with maintainable demo templates and documentation.
Open the Lab
- Go to Theme Lab:
/lab/ - Optional: open the preview as a separate window using Pop out preview.
- Note: the pop-out preview is best for responsiveness testing; you can close/reopen it to refresh.
Fastest workflow (recommended)
- Open Tools (Ctrl/Cmd+K).
- Use Quick Theme Builder (or Theme Variables) to generate a cohesive baseline.
- Use CSS Blocks to add common upgrades (glass cards, background overlays, button styling).
- Add Widgets / Schedule Builder output if you need structured HTML.
- Copy Custom CSS and Custom HTML into MyOshi.
- Run Audit + Accessibility Audit before sharing.
- Export a Theme bundle when you want a portable backup.
What gets copied into MyOshi?
Only these two fields:
- Custom CSS (paste into MyOshi’s Custom CSS editor)
- Custom HTML (paste into MyOshi’s Custom HTML editor)
The demo template is only there so your CSS has something realistic to style.
Notes about MyOshi scoping (important)
MyOshi automatically scopes submitted Custom CSS so it only affects the profile area. Because of this:
- You usually do not need to manually prefix every selector with the wrapper.
- If you paste third-party CSS that assumes full-page control (
body,html,:root), use CSS Scope Fixer to normalize it.
Troubleshooting
The preview looks different from MyOshi
That’s expected unless you import an exact MyOshi preview HTML. The built-in templates aim to be faithful enough to develop styles comfortably, but MyOshi can change frequently.
My CSS works in the Lab but not on MyOshi
Common fixes:
- Increase specificity slightly (e.g.
div.card { ... }) - Avoid relying on overly narrow selectors that only match the demo template
- Use browser DevTools to confirm the selector matches what you think
- Run the Audit tool to catch common pitfalls
I can’t copy to clipboard
Some browsers block clipboard access unless the page is served over HTTPS or you’ve interacted with the page.
Fallback: manually select text, right-click → copy.
Next steps
- Read Theme Lab for feature details and power-user tips.
- Read Tools for quick generators and audits.
- Read Templates if you want to add/modify demo templates (local dev only).