SimpliServDocs

Appearance & branding

Customize SimpliServ's appearance organisation-wide: custom CSS on the design page and rebuilding the sidebar in the navigation editor.

→ Open design · Open the navigation editor

Under Administration → Appearance you customize SimpliServ's appearance for your whole team. The group contains two pages: Design for organisation-wide custom CSS and the navigation editor, with which you rebuild the left sidebar. Both settings apply to all users of your organisation.

Both pages require the permission to view settings (admin.settings.view); to save you additionally need the permission to edit settings (admin.settings.update). Without these permissions you see the page read-only or not at all.

Custom CSS (Design)

On the Design page there's the Custom CSS card. The CSS stored here is included app-wide for all users of your organisation – with it you can adjust e.g. font weights, colours and individual areas of the interface to your brand.

Open the design page

Go to Administration → Appearance → Design.

Enter CSS

Write your CSS into the CSS field. Example: dl dt { font-weight: 700 } makes all field labels bold.

Save

Click Save. The rules take effect for all users of the organisation.

Expand the Available CSS hooks area below the field to see stable anchors for targeted adjustments – e.g. [data-ss-region="sidebar"] for the navigation, [data-ss-region="card"] for the standard cards and info grids or [data-ss-card="customer-data"] for a single card. You find a card's exact slug via the browser DevTools in the data-ss-card attribute.

Custom CSS works globally. Faulty rules can make parts of the interface unusable. Test changes carefully; on problems, clear the field and save again.

This page has no logo or colour picker. You store the organisation logo under Administration → Company in the company data. You design the look of invoices, proposals and delivery notes in the document designer under Administration → Documents.

In the navigation editor you rebuild the left sidebar: show/hide items and groups, rename, change icons, sort, nest, pin, and add your own groups and items. The customization applies organisation-wide.

Open Administration → Appearance → Navigation editor for this. Each row shows a navigation item with the following controls:

  • Drag handle – move via drag & drop; dragged to the right, an item becomes a sub-item (nesting).
  • Icon picker – choose a different icon for the item.
  • Name – type directly into the field to rename the item.
  • Add sub-item (+) – creates a new custom item below this row.
  • Pin / unpin – lifts the item into the upper, pinned area of the sidebar.
  • Visible (toggle) – hides or shows the item for all users.

You can adjust renaming, icon, sorting, visibility and pinning for all items (including the standard modules). Edit and Delete are only available for items you created yourself.

Create a custom group

Click "Add group"

Top right, a dialog opens. Assign a name and optionally choose an icon.

Sort items in

Drag existing items into the new group or create new ones with Add sub-item (+).

Create a custom item

Via the + on a row you open the dialog for a new custom item. First choose the type:

  • Link – points to an internal route (/dashboard/…) or an external URL (https://…). Known routes like contacts, proposals, orders, invoices, products, delivery notes, calendar or boards can be chosen from a list; alternatively you enter the path manually via URL / path.
  • Dynamic list – creates a group that's filled automatically with live entries. As the source, Contact groups and Registers are available.
  • Create page – jumps straight to the creation form of the chosen route (/create is appended to the route).
  • Filter – opens a route with a preset filter. For this, provide the filter parameter (e.g. customer_group_id) and filter value.

Each item gets a name and optionally an icon.

Save and reset changes

As long as changes are open, Unsaved changes appears at the top. With Save you apply the new navigation for all users. Reset to default discards all customizations and restores the default navigation.

Further reading

How is this guide?

On this page