Brand and content
Customization Guide
Use this guide to safely adapt CodideX Mobile while preserving its mobile-first shell, bottom navigation, dark mode, toast/preloader behavior, and symbolic avatar system.
Common Changes
| Change | Recommended location |
|---|---|
| Logo and brand name | Update /assets/images/branding/ and visible HTML labels. |
| Colors | Edit CSS variables in /assets/css/mobile-variables.css and dark variables in /assets/css/mobile-dark.css. |
| App cards | Edit dashboard HTML pages and related role CSS. |
| Bottom navigation | Edit bottom nav HTML in pages or component snippets in /components/. |
| Header | Edit page headers and mobile header component snippets. |
| Toast | Customize markup/classes and /assets/js/mobile-toast.js. |
| Preloader | Customize /assets/js/mobile-preloader.js and related CSS. |
| Placeholder images | Replace files in /assets/images/placeholders/ or update image paths. |
| Symbolic avatars | Replace the global avatar asset in /assets/images/avatars/ and keep profile image controls display-only. |
Edit Demo Pages Safely
- Duplicate an existing page in the same role folder when adding a demo screen.
- Keep the mobile shell, safe-area spacing, header, card rhythm, and bottom navigation consistent.
- Update links in dashboards and related guides if a buyer-facing page is added or removed.
- Remove demo pages only after checking all navigation links.
Do not add a photo upload or change button in mobile profile screens if desktop ERP handles profile images.
Customization does not add backend behavior. Any API, database, authentication, notification delivery, payment, upload, or messaging integration must be built separately.