Custom CSS: what you can style
NX1 Pro lets you write your own style rules onto your start page. So that this is more than an empty text box, there are stable names to aim at — all of them are listed here.
Your rules stay on your device. They are never synced, and never travel with a start page you hand to someone else.
Custom CSS is part of NX1 Pro.
Where to type it
- Open a new tab and click the gear in the top right.
- Go to “Advanced”, then “Custom CSS”.
- Write your rules into the field and click “Apply”.
The complete list
Every entry is a promise: these names are chosen to stay. A test in the build checks on every change that they still exist — if one disappears, the build breaks, not your start page.
Page & background
| Name | What it is |
|---|---|
.nx1-page | The whole start page — the outermost element everything else sits in .nx1-page { font-family: Georgia, serif; } |
.nx1-wallpaper | The wallpaper layer (photo, pattern, flat colour or voxel art) .nx1-wallpaper { filter: grayscale(1); } |
.nx1-scrim | The darkening veil drawn over busy wallpapers to keep text readable .nx1-scrim { opacity: 0.4; } |
.nx1-aurora-veil | The drifting accent-coloured veil (appears with the Gold unlock) .nx1-aurora-veil { display: none; } |
Header
| Name | What it is |
|---|---|
.nx1-header | The top bar: logo on the left, area pills on the right .nx1-header { margin-bottom: 2rem; } |
.nx1-logo | The NX1 wordmark, or a partner space’s own logo .nx1-logo { opacity: 0.5; } |
.nx1-areanav | The row of area pills and the buttons at its end .nx1-areanav { justify-content: center; } |
.nx1-areapill | One area pill in that row .nx1-areapill { text-transform: uppercase; letter-spacing: 0.06em; } |
.nx1-chrome-btn guarded | The round header buttons: trophies, account, settings .nx1-chrome-btn { border-color: currentColor; } |
Search
| Name | What it is |
|---|---|
.nx1-search | The search form — set its width here .nx1-search { max-width: 34rem; } |
.nx1-searchpill | The rounded bar itself: border, radius, padding .nx1-searchpill { border-radius: 8px; } |
.nx1-searchinput | The text field you type into .nx1-searchinput { font-size: 18px; } |
.nx1-searchgo | The submit button at the end of the bar .nx1-searchgo { border-radius: 6px; } |
Tiles
| Name | What it is |
|---|---|
.nx1-tilegrid | The grid holding the tiles — override the column rule here .nx1-tilegrid { grid-template-columns: repeat(4, 1fr) !important; } |
.nx1-tilebox | One tile or folder button (links and folders share it) .nx1-tilebox { border-radius: 2px; } |
.nx1-tilelabel | The name printed under a tile .nx1-tilelabel { font-weight: 700; } |
.nx1-bookmarkbar | The row of browser bookmarks along the top .nx1-bookmarkbar { opacity: 0.6; } |
Widgets
| Name | What it is |
|---|---|
.nx1-widget | One widget cell — weather, sport, notes, news and every other box .nx1-widget { border-radius: 4px; overflow: hidden; } |
.nx1-boxhead | The header row every widget wears .nx1-boxhead { border-bottom: 1px solid currentColor; padding-bottom: 4px; } |
.nx1-boxtitle | The title text inside that header .nx1-boxtitle { text-transform: uppercase; } |
Dialogs
| Name | What it is |
|---|---|
.nx1-modal | A dialog panel (settings, folders, account — including this one) .nx1-modal { border-radius: 6px; } |
.nx1-modal-veil | The blurred layer behind an open dialog .nx1-modal-veil { backdrop-filter: none; } |
Colours & sizes
| Name | What it is |
|---|---|
--accent !important | The accent colour, as a hex value — buttons, rings, highlights :root { --accent: #ff7a18 !important; } |
--accent-rgb !important | The same accent as space-separated RGB channels — keep it in step with --accent :root { --accent-rgb: 255 122 24 !important; } |
--fg !important | Foreground/text colour as RGB channels :root { --fg: 240 240 245 !important; } |
--bg !important | Page background colour, as a hex value (visible where no wallpaper covers it) :root { --bg: #101018 !important; } |
--surface !important | Base colour of every raised box, as RGB channels :root { --surface: 30 30 40 !important; } |
--box | The fill of tiles, folders and widget boxes — raise the alpha to kill the glass look :root { --box: rgb(var(--surface)); } |
--box-quiet | The quieter fill for secondary and nested boxes :root { --box-quiet: rgb(var(--surface) / 0.35); } |
--ui-border | The hairline around interactive surfaces :root { --ui-border: rgb(var(--fg) / 0.6); } |
--tile-size | Footprint of one tile — folders and standalone icons share it :root { --tile-size: 110px; } |
--tile-cols | Upper bound on tile columns (the grid may use fewer to avoid overlap) :root { --tile-cols: 5; } |
--label-size !important | Font size of the tile labels :root { --label-size: 15px !important; } |
--label-shadow | The shadow that keeps labels legible over a photo — none removes it :root { --label-shadow: none; } |
--wallpaper-blur !important | Blur applied to the wallpaper :root { --wallpaper-blur: 8px !important; } |
--wallpaper-dim !important | How far the scrim darkens the wallpaper, 0 to 1 :root { --wallpaper-dim: 0.65 !important; } |
When you need !important
Some variables are written straight onto the page element on every render — the accent, the label size and the wallpaper blur among them. An inline value like that beats any normal rule; only !important gets past it. Every affected entry is marked in the list above, and the examples already carry it.
Three ready-made examples
Square instead of round
Takes the rounding off tiles, search bar and widgets — the fastest route to a different overall feel.
.nx1-tilebox { border-radius: 2px; }
.nx1-searchpill { border-radius: 4px; }
.nx1-widget { border-radius: 4px; overflow: hidden; }Calmer background, clearer boxes
Darkens the picture further and makes the boxes opaque instead of translucent.
:root {
--wallpaper-dim: 0.7 !important;
--box: rgb(var(--surface));
--label-shadow: none;
}Big tiles, fewer columns
For a wide screen where eight columns look lost.
:root {
--tile-size: 120px;
--tile-cols: 5;
--label-size: 15px !important;
}What NX1 filters out
Checking is done with the browser’s own CSS parser, not with a text search — comments and escapes get you nowhere. The dialog tells you afterwards how many rules were removed.
- Any address other than data: — an image or font from a foreign server would reveal when you open your tab, and is the usual channel for reading values out through attribute selectors.
- @import, for the same reason: it pulls in a foreign file.
- @font-face with a foreign source.
You cannot lock yourself out
After your rules, NX1 installs a guard that keeps the gear visible and clickable, whatever you write. Colour and border still give way; it simply cannot disappear. And the dialog has a switch that turns your CSS off temporarily without deleting it.
Missing a hook?
If you want to style something that has no name here, write to us — the list grows with what people actually want to touch. Do not send your rules; we only need to know which spot you mean.
FAQ
Is my CSS synced to my other devices?
No. It lives only on the device you type it into. That is deliberate: style rules that travel between users could be used to fake a system dialog.
Does my CSS travel when I share a start page?
No. Sharing carries the content of the start page only. What a shared sheet may bring along in terms of styling is a fixed schema of colour values — never free-form rules.
Can I use my own fonts?
Only fonts already installed on the device — just name them in font-family. Loading a font from a foreign address is blocked, because it would tell your font provider when you open a tab.
What if I break the page?
The gear stays reachable at all times. From there you can switch your CSS off temporarily or remove it entirely.
Does this apply to the web version too?
Yes. The extension and the web app share the same surface, and therefore the same names.