> For the complete documentation index, see [llms.txt](https://nostalgiatv.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nostalgiatv.gitbook.io/user-guide/advanced/web-ui/design.md). # Design {% columns %} {% column %} ### Visual Customization Customization is broken down into collapsible categories to help you focus on specific parts of the UI. Each entry allows you to input a Hex Code (e.g., `#1A3A52`) or use the color picker. ### **General** Core surfaces that define the app's overall feel. * App Background: The primary backdrop behind all menus. * Surface / Elevated Surface: The colors for menus, cards, and dialogue boxes. * Top Bar: The header navigation area at the top of the screen. * Main & Secondary Colors: Your primary "accent" colors for highlights and active states. * Border & Divider: The subtle lines that separate UI elements. ### **Guide** Fine-tune your linear program grid for maximum readability. * Button Surface: The background color for interactive buttons within the guide. * Guide Channel Cell / Focused Channel: The background of the channel list and the highlight when you hover over a station. * Time Row: The strip at the top showing the broadcast hours. * Program Cells (Alt 1-4): Customize the colors of the show blocks. Using alternating colors creates a "checkerboard" effect that makes it easier to distinguish back-to-back programs. * Focused Program: The color of a show block when it is selected. * Time Indicator: The color of the vertical line tracking the "Now" position. ### **Text** Maintain high readability across all themes. * Primary / Secondary / Muted Text: The different weights for show titles and descriptions. * Inverse Text: For text sitting on bright backgrounds. * Settings Text: Specifically for text visibility within the menu navigation. ### **Status** Colors for system feedback: Success (Green), Warning (Orange), and Error (Red). ### Advanced Visuals Go beyond colors to adjust the "physics" and accessibility of your design. * Font & Size: Choose your preferred typeface and scale for the Guide and Info Panels. * Contrast Sliders: Adjust the contrast of your Primary, Secondary, and Font colors to ensure they pop on your specific TV screen. * Time Indicator Opacity: Control how subtle or prominent the "Now" line appears on the grid. ### Theme Management Located at the bottom of the page, these tools allow you to preserve and share your custom looks. * Export Theme: Save your current color scheme as a `.json` file. Perfect for backing up your work or sharing with the community. * Import Theme: Load a theme file shared by others to instantly transform your app's UI. * Reset to Default: Use this to wipe all custom changes and return to the classic NostalgiaTV "Midnight" theme. {% hint style="success" %} \[Changes made in the Design tab are applied in real-time. If you are using the Web Remote, you can see the results instantly on your TV as you tweak the hex codes. {% endhint %} {% endcolumn %} {% column %}
{% endcolumn %} {% endcolumns %} #### 📺 Guide Layout & CRT Emulation Modify the grid spacing, row density, and aesthetic filters used across the electronic program guide (EPG) and video canvas. * **Guide Rows:** Adjust the vertical scale and count of visible rows shown on screen simultaneously (e.g., *10 mobile / 6 TV*). * **Program Cell Gaps:** Toggle structural spacing blocks between distinct program elements in the grid layout. * **Rounded Program Cells:** Smooth the corners of program blocks and channel cell frames. * **Static Overlay:** Overlay CRT-style analog static noise across the entire interface, including active video streams. * **Scanlines:** Apply horizontal CRT cathode-ray scanline emulation overlays across the display canvas. * **Episode Code Format:** Customize how season and episode counters render across the guide, media info cards, and player overlays (e.g., *S1E12*). #### 💬 Subtitles Configuration Fine-tune device-wide closed captioning and subtitle presentation behaviors for both the ExoPlayer and MPV media engines. Settings modified here apply across all active profiles on the device client. * **Live Preview Panel:** A real-time rendering box demonstrates exactly how captions will overlay against a dark canvas before you save changes. * **Font Color:** Swap subtitle text fills between standard high-contrast values (White, Yellow, or Cyan). * **Background Opacity:** Set the caption bounding box fill density (*None*, *Semi-translucent*, or *Solid black*). * **Bold Emphasis:** Toggle typeface weighting on or off for enhanced readability. * **Size Stepper:** Scale caption sizing smoothly using percentage values. * **Font Family:** Select the active typeface engine used to generate the subtitle strings. * **Edge Style:** Apply text-border effects to separate text from background imagery (*None*, *Drop shadow*, or *Outline*). * **Vertical Position:** Adjust the absolute vertical alignment offset percentage to shift text higher up or lower down on the screen. * **Reset to Default:** Instantly flushes all manual adjustments to return subtitles back to factory guidelines.