init

2026-02-04 06:23:04 -05:00
commit efe206a589
22 changed files with 4107 additions and 0 deletions
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -0,0 +1,175 @@
+# Deployment Checklist & Quick Start
+
+## Pre-Deployment Checklist
+
+- [ ] Review the modern theme changes in [README.md](README.md)
+- [ ] Test CSS syntax validation (no errors reported)
+- [ ] Backup existing `custom/otssignange/css/override.css`
+- [ ] Verify asset paths (logos, preview images)
+- [ ] Check browser compatibility requirements
+- [ ] Test on your development Xibo instance first
+- [ ] Verify dark mode toggle if using system preference
+- [ ] Test responsive layout on mobile devices
+
+## Installation Steps
+
+### Option A: Direct File Copy
+
+```bash
+# Navigate to your Xibo installation root
+cd /path/to/xibo
+
+# Backup original theme files
+cp web/theme/custom/otssignange/css/override.css web/theme/custom/otssignange/css/override.css.backup
+cp web/theme/custom/otssignange/css/html-preview.css web/theme/custom/otssignange/css/html-preview.css.backup
+
+# Copy new theme files
+cp /Users/matt/dev/theme/custom/otssignange/css/override.css web/theme/custom/otssignange/css/
+cp /Users/matt/dev/theme/custom/otssignange/css/html-preview.css web/theme/custom/otssignange/css/
+cp /Users/matt/dev/theme/custom/otssignange/css/client.css web/theme/custom/otssignange/css/
+
+# Verify files copied
+ls -la web/theme/custom/otssignange/css/
+```
+
+### Option B: Using Git (if version-controlled)
+
+```bash
+cd /path/to/xibo
+git checkout web/theme/custom/otssignange/css/
+# Or manually merge your changes with the new files
+```
+
+## Post-Deployment Validation
+
+1. **Clear Xibo Cache** (if applicable):
+   ```bash
+   # Xibo may cache CSS—clear if using PHP APC or similar
+   rm -rf web/uploads/temp/*
+   ```
+
+2. **Verify in Browser**:
+   - Open Xibo CMS admin interface
+   - Inspect elements for CSS color changes
+   - Check Network tab for CSS file loads (should see override.css)
+   - Verify no CSS errors in browser console
+
+3. **Test Key Features**:
+   - [ ] Login page displays correctly
+   - [ ] Header bar shows primary color
+   - [ ] Sidebar navigation is styled properly
+   - [ ] Dashboard widgets render as cards with shadows
+   - [ ] Links have correct color and hover state
+   - [ ] Forms have proper focus states (blue outline)
+   - [ ] Mobile layout: open DevTools (F12) and resize to <640px
+   - [ ] Sidebar collapses into hamburger menu on mobile
+   - [ ] Dark mode: open DevTools → Rendering → Prefers color scheme: dark
+
+4. **Check Asset Loading**:
+   - Verify `xibologo.png` displays in header
+   - Check preview splash screen background loads
+   - Confirm favicon appears in browser tab
+
+## Rollback Plan
+
+If issues occur:
+
+```bash
+cd /path/to/xibo
+
+# Restore backup
+cp web/theme/custom/otssignange/css/override.css.backup web/theme/custom/otssignange/css/override.css
+cp web/theme/custom/otssignange/css/html-preview.css.backup web/theme/custom/otssignange/css/html-preview.css
+
+# Optional: Remove new client.css if causing issues
+rm web/theme/custom/otssignange/css/client.css
+
+# Clear cache
+rm -rf web/uploads/temp/*
+
+# Refresh browser (Ctrl+Shift+R for hard refresh)
+```
+
+## Browser Support
+
+### Fully Supported (CSS Variables)
+- Chrome/Edge 49+
+- Firefox 31+
+- Safari 9.1+
+- Opera 36+
+- Mobile browsers (iOS Safari 9.3+, Chrome Mobile 49+)
+
+### Partial Support (Fallbacks Recommended)
+- IE 11 and below: Not supported
+
+To add IE11 fallbacks, modify `override.css` (advanced):
+```css
+/* Fallback for older browsers */
+.widget {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* IE fallback */
+  box-shadow: var(--shadow-sm);
+}
+```
+
+## Performance Notes
+
+- **CSS File Size**: `override.css` is ~35KB (gzipped ~8KB)
+- **Variables**: 70+ CSS variables—negligible performance impact
+- **Dark Mode**: Uses `prefers-color-scheme` media query (no JavaScript required)
+- **Responsive**: Mobile-first approach—efficient layout recalculation
+
+## Next Steps
+
+1. **Optional Enhancements**:
+   - Add SVG icon sprite to `img/` for consistent iconography
+   - Create Twig view overrides for deeper layout customization
+   - Implement user-controlled dark mode toggle
+
+2. **Documentation**:
+   - See [CUSTOMIZATION.md](CUSTOMIZATION.md) for 15+ customization recipes
+   - See [README.md](README.md) for full feature documentation
+
+3. **Testing in CI/CD**:
+   - Add CSS linter (stylelint) to your build pipeline
+   - Validate HTML/CSS in staging before production push
+
+## Support & Troubleshooting
+
+### Issue: CSS Not Loading
+**Solution**: 
+- Hard refresh browser: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
+- Check browser console for 404 errors on CSS files
+- Verify file permissions: `chmod 644 override.css`
+
+### Issue: Colors Look Wrong
+**Solution**:
+- Check if system dark mode is enabled (see Post-Deployment Validation)
+- Verify `--color-primary` value in `:root` matches intended brand color
+- Test in different browsers
+
+### Issue: Sidebar Doesn't Collapse on Mobile
+**Solution**:
+- Verify viewport meta tag is in Xibo's `<head>`: `<meta name="viewport" content="width=device-width, initial-scale=1">`
+- Check browser DevTools for responsive mode enabled
+- Ensure no custom CSS is overriding the media query
+
+### Issue: Fonts Not Loading
+**Solution**:
+- Verify system fonts are available (`-apple-system`, `Segoe UI`, etc.)
+- If using Google Fonts, check internet connectivity
+- Add font-family fallback: `-fallback-font, sans-serif`
+
+---
+
+## Quick Links
+
+- [Theme README](README.md) — Feature overview and tokens reference
+- [Customization Cookbook](CUSTOMIZATION.md) — 15+ customization recipes
+- [Xibo Developer Docs](https://account.xibosignage.com/docs/developer/)
+- [Config Reference](custom/otssignange/config.php)
+
+---
+
+**Version**: 1.0.0 (Modern)  
+**Last Updated**: February 2026  
+**Status**: Ready for Production