How to Customise a Published Site
Step-by-step guide to customising branding, navigation, theme colours, marketing home sections, custom icons, footer, cookie consent, and SEO for a published NeoArc Studio documentation site.
Goal
Customise the appearance and behaviour of a published NeoArc Studio documentation site. Configure branding, navigation menus, theme colours, marketing home sections, custom icons, footer links, and SEO meta tags through the Site Settings editor.
Step 1: Open Site Settings
Click the settings icon in the main toolbar. The Site Settings editor opens with tabs covering all customisation options. Settings are saved to site.settings.cf.page.json with 500ms auto-save debounce.
Step 2: Configure Branding
Step 3: Set Up Top Menu Navigation
Step 4: Configure the Sidebar
Step 5: Set Theme Colours
The Theme tab provides control over a comprehensive set of CSS custom properties that define the published site's visual appearance. Colours are grouped into categories.
| Category | Number of Properties | Examples |
|---|---|---|
| HTTP Methods | 14 | GET, POST, PUT, PATCH, DELETE background and text colours |
| HTTP Status Codes | 10 | 2xx, 3xx, 4xx, 5xx background and text colours |
| Content Type Badges | 8+ | Page, Endpoint, Schema, ApiDefinition colours |
| Validation | 9 | Success, Error, Warning, Info background, border, and text |
| UI State | 10+ | Hover background, border, text primary/secondary/tertiary/muted |
| Special Elements | 6 | Deprecated, enum value, schema reference colours |
| Knowledge Map | 42 | Node and edge colours for 5 types in light and dark modes |
| CTA and Loader | 2 | Call-to-action background, loader colour |
Step 6: Add Custom Icons
Step 7: Configure the Footer
Step 8: Set Up Marketing Home Sections
The Marketing Home tab configures the landing page with predefined section types.
| Section Type | Description |
|---|---|
| Hero | Large banner with title, subtitle, and call-to-action buttons |
| Content | Rich text content section |
| Feature Grid | Grid of feature cards with icons and descriptions |
| CTA (Call to Action) | Prominent call-to-action with button linking to a page or external URL |
| Graph Links | Interactive force-directed graph linking to documentation pages |
| Graph Diagram | Embedded graph diagram visualisation |
| Diagram | Embedded standard diagram |
| Explanatory Diagram | Animated explanatory diagram with step-based playback |
| Presentation Diagram | Embedded presentation with step navigation |
Step 9: Configure SEO Meta Tags
Step-by-step guide to publishing your documentation, including local file-system publishing and Azure Blob Storage deployment.