# 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