The developer license gives you Northline's source in Zendesk's code editor (Customize designNorthlineEdit code). Editing code needs Knowledge (Guide) Professional or higher.
Before editing, copy the theme (theme menu → Copy) and edit the copy. Once a theme's code is edited, Zendesk can't update it automatically; keeping the original lets you compare against new versions.
Files
| File | What it holds |
|---|---|
templates/*.hbs | One template per page type, in Zendesk's Curlybars language. document_head.hbs, header.hbs and footer.hbs are on every page. |
templates/custom_pages/videos.hbs | The video library page. |
style.css | All styles. Section 00 is the foundation from Zendesk's Copenhagen theme; Northline's own styles are sections 01–16 (tokens, base, header, home, topics, article, pages, footer, components, print, content blocks, community, account, request modules, interaction states, content that doesn't fit). |
assets/northline.js | Northline's script: menus, quick search, article tools, tabs, carousels, videos, translations of Northline's own words. Readable, not minified. |
script.js | Copenhagen's script for dropdowns, the mobile menu and forms. |
assets/*-bundle.js | Zendesk's compiled modules for the request form, request list, service catalog and approvals. Don't edit them; their readable source is Zendesk's Copenhagen theme 4.53.6 on GitHub (github.com/zendesk/copenhagen_theme, folder src). |
manifest.json | Settings and their defaults. |
translations/ | Setting labels in the Settings panel. |
Colors and sizes
Every color, radius and font comes from CSS custom properties at the top of style.css (--nl-brand, --nl-ink, --nl-line, --nl-r, --nl-font-heading...). Dark mode redefines them under :root[data-nl-mode="dark"]. Change a token rather than individual rules and both modes stay consistent.
Northline's words in other languages
Northline's own interface words live in assets/northline.js, in one dictionary per language (the I18N object). Add a language by copying the English entry and translating it.
Script hooks
window.Northline exposes refreshFormPicker(), paintIcons(), initTabs() and initCarousels() if you add content after the page loads.