---
title: "CSS Example"
slug: "css-beispiel"
updated: 2025-07-04T12:00:41Z
published: 2025-07-04T12:00:41Z
canonical: "help.frisbii.com/css-beispiel"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Example

Below is a CSS example that enables simple design changes. Only the color codes need to be adjusted accordingly.

```css
body {
  /* Background color of the entire HTML document */
  background-color: #000000;
  
  /* Font color of the entire HTML document */
  color: #000000;
  
  /* Font type */
  font-family: 'Roboto', Arial, sans-serif;
}

/* Color of the button for e.g. "Confirm", "Save", "Order" (primary functions) */ .btn-primary, .e.g. "Confirm", "Save", "Order" (primary functions) */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #000000;
  border-color: #000000;
}

/* Color of the button for e.g. "Cancel", "Skip" (secondary functions) */
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

/* Color of all links in the entire HTML document */
a {
  color: #000000;
}

/* Color of the box of the selected payment type */
.payment-tabs li a.active {
  color: #000000;
}

/* Color of the box of the selected payment type when focusing or hovering */
.payment-tabs li a.active::before .payment-tabs li a:hover::before, .payment-tabs li a:focus::before {
  border-color: #000000;
}

/* Color of the price text in the list of selected products in the order detail box (top right by default) */
.price-list table td:last-child {
  color: #000000;
}

/* Top border color of the order detail box (in the standard top right) */
.order-details {
  border-top-color: #000000;
}
```

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(981).png)