Custom Styling Examples

Custom Theme

Applying a custom theme to your services:

# values.yaml
theme:
  colors:
    primary: "#FF4B75"
    secondary: "#FF8E3C"
    background: "#FFFFFF"
  typography:
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"

Branding Configuration

Setting up branding elements:

# values.yaml
branding:
  logo:
    enabled: true
    path: "/assets/logo.svg"
  favicon:
    enabled: true
    path: "/assets/favicon.ico"
  company:
    name: "Gresham"
    website: "https://www.gresham.com"

Custom CSS

Adding custom CSS configurations:

# values.yaml
customCSS:
  enabled: true
  styles: |
    .header {
      background: linear-gradient(120deg, #FF4B75, #FF8E3C);
      color: white;
    }
    .footer {
      background-color: #333;
      color: white;
    }

Layout Templates

Custom layout configurations:

# values.yaml
layout:
  template: "custom"
  header:
    height: "80px"
    fixed: true
  sidebar:
    width: "250px"
    collapsible: true
  content:
    maxWidth: "1200px"
    padding: "20px"