UI Style & Colors

NDR Core has a number of styles to give your project web site the desired look. A page style determines where the UI elements (such as navigation, title, footer, etc.) are placed and how they look in general. Together with the selected color palette (which determines which colors said elements have) this results in styled NDR Core pages. You can choose existing styles and palettes or create your own.

Change UI Style

  • Go to Style & Colors > Change UI Style and choose an UI style you like.
  • You can select the UI style by clicking "Set this Style as your Page Style". (Important: These changes are immediate and change your page.)
  • You can check out the changes on your Test Page. You might have to force-reload your page to show the changes.

Change Color Palette

  • Go to Style & Colors > Manage Color Palettes and choose a color palette you like.
  • You can select the color palette by clicking "Set this Palette as your Page Palette". (Important: These changes are immediate and change your page.)
  • You can check out the changes on your Test Page. You might have to force-reload your page to show the changes.

Create a New Palette

Go to Style & Colors > Manage Color Palettes > Create New Color Palette to create a new palette. Choose the colors by selecting the field or Enter the corresponding Hex-Code.

Import and Export Palette

Palettes can be exported and imported. They need to be in a specific JSON format (see NDR Core settings serialization). They define a pk key which is the unique name of the palette. If you import a palette with an existing pk, it will be overwritten.

Technical Details

Every time you choose a palette, a CSS file is created and written to your ndr app. It is saved in your static folder: static/ndr/css/colors.css. The CSS file defines the colors of bootstrap elements such as .btn-primary, .btn-secondary, etc.

See also

(Administration pages in blue, help pages in grey, external links in yellow)

XXX XXX NDR Core Settings Serialization