Eigenes CSS: was du gestalten kannst
NX1 Pro lässt dich eigene Gestaltungsregeln auf deine Startseite schreiben. Damit das mehr ist als ein leeres Textfeld, gibt es feste Namen, auf die du zielen kannst — sie stehen hier vollständig.
Deine Regeln bleiben dabei auf deinem Gerät. Sie werden nicht synchronisiert und niemals mitgegeben, wenn du eine Startseite an jemanden weiterreichst.
Eigenes CSS gehört zu NX1 Pro.
Wo du es eingibst
- Öffne einen neuen Tab und klicke oben rechts auf das Zahnrad.
- Geh zu „Erweitert" und dann auf „Eigenes CSS".
- Schreib deine Regeln ins Feld und klicke auf „Übernehmen".
Die vollständige Liste
Jeder Eintrag ist eine Zusage: die Namen sind so gewählt, dass sie bleiben. Ein Test im Bau prüft bei jeder Änderung, dass es sie noch gibt — verschwindet einer, bricht der Bau, nicht deine Startseite.
Seite & Hintergrund
| Name | Was es ist |
|---|---|
.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; } |
Kopfzeile
| Name | Was es ist |
|---|---|
.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; } |
Suche
| Name | Was es ist |
|---|---|
.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; } |
Kacheln
| Name | Was es ist |
|---|---|
.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 | Was es ist |
|---|---|
.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; } |
Dialoge
| Name | Was es ist |
|---|---|
.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; } |
Farben & Maße
| Name | Was es ist |
|---|---|
--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; } |
Wann du !important brauchst
Einige Variablen schreibt NX1 bei jedem Rendern direkt auf das Seitenelement — etwa den Akzent, die Beschriftungsgröße und die Hintergrund-Unschärfe. Ein solcher Inline-Wert schlägt jede normale Regel; nur !important kommt dagegen an. In der Liste oben ist jeder betroffene Eintrag markiert, und die Beispiele bringen es schon mit.
Drei fertige Beispiele
Kantig statt rund
Nimmt Kacheln, Suchleiste und Widgets die Rundungen — der schnellste Weg zu einem anderen Gesamteindruck.
.nx1-tilebox { border-radius: 2px; }
.nx1-searchpill { border-radius: 4px; }
.nx1-widget { border-radius: 4px; overflow: hidden; }Ruhiger Hintergrund, klarere Kästen
Dunkelt das Bild stärker ab und macht die Kästen deckend, statt durchscheinend.
:root {
--wallpaper-dim: 0.7 !important;
--box: rgb(var(--surface));
--label-shadow: none;
}Große Kacheln, wenige Spalten
Für einen breiten Bildschirm, auf dem acht Spalten verloren wirken.
:root {
--tile-size: 120px;
--tile-cols: 5;
--label-size: 15px !important;
}Was NX1 herausfiltert
Geprüft wird mit dem CSS-Parser des Browsers, nicht mit einer Textsuche — Kommentare und Maskierungen helfen also nicht daran vorbei. Der Dialog sagt dir hinterher, wie viele Regeln entfernt wurden.
- Jede Adresse außer data: — ein Bild oder eine Schrift von einem fremden Server würde verraten, wann du deinen Tab öffnest, und wäre der übliche Weg, Werte über Attribut-Selektoren abzugreifen.
- @import, aus demselben Grund: es holt eine fremde Datei nach.
- @font-face mit einer fremden Quelle.
Du kannst dich nicht aussperren
Nach deinen Regeln hängt NX1 einen Riegel ein, der das Zahnrad sichtbar und klickbar hält — was du auch schreibst. Farbe und Rand geben trotzdem nach, nur verschwinden kann es nicht. Und im Dialog gibt es einen Schalter, der dein CSS vorübergehend abschaltet, ohne es zu löschen.
Fehlt dir ein Haken?
Wenn du etwas gestalten möchtest, wofür es hier keinen Namen gibt, schreib uns — die Liste wächst mit dem, was Leute tatsächlich anfassen wollen. Schick deine Regeln nicht mit; wir brauchen nur zu wissen, welche Stelle du meinst.
FAQ
Wird mein CSS mit anderen Geräten synchronisiert?
Nein. Es liegt ausschließlich lokal auf dem Gerät, auf dem du es eingibst. Das ist Absicht: Gestaltungsregeln, die zwischen Nutzern wandern, könnten benutzt werden, um einen Systemdialog zu fälschen.
Wird mein CSS mitgegeben, wenn ich eine Startseite teile?
Nein. Beim Teilen reist nur der Inhalt der Startseite. Was ein geteiltes Blatt an Gestaltung mitbringen darf, ist ein festes Schema aus Farbwerten — keine freien Regeln.
Kann ich eigene Schriften einbinden?
Nur solche, die schon auf dem Gerät liegen — schreib den Schriftnamen einfach in font-family. Eine Schrift von einer fremden Adresse nachzuladen ist gesperrt, weil das deinem Schriftanbieter verrät, wann du einen Tab öffnest.
Was passiert, wenn ich mir die Seite zerschieße?
Das Zahnrad bleibt immer erreichbar. Dort kannst du dein CSS vorübergehend abschalten oder ganz entfernen.
Gilt das auch für die Web-Version?
Ja. Die Erweiterung und die Web-App teilen sich dieselbe Oberfläche, also auch dieselben Namen.