OTSSignsTheme/DEPLOYMENT.md

Deployment Checklist & Quick Start

Pre-Deployment Checklist

• Review the modern theme changes in 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

# 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)

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):

   # 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:

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):

/* 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 for 15+ customization recipes
   • See 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 — Feature overview and tokens reference
• Customization Cookbook — 15+ customization recipes
• Xibo Developer Docs
• Config Reference

---

Version: 1.0.0 (Modern)
Last Updated: February 2026
Status: Ready for Production