---
sidebar_position: 1.2
sidebar_custom_props:
  section: "Setup"
  section_position: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Advanced Configuration

## Common Layout Parameters

Most layouts support these common parameters:

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `logo` | boolean | varies | Show/hide the logo |
| `textAlignment` | string | `'center'` | Vertical alignment: `'top'`, `'center'`, `'bottom'` |

## Image Configuration Parameters

Layouts with images support:

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `imageSrc` | string | - | Image URL or path |
| `imageRatio` | string | `'50%'` | Image width percentage |
| `imageScale` | string | `'100%'` | Image size within container |
| `imageAlign` | string | `'center'` | Image alignment |
| `imagePosition` | string | varies | Position: `'left'` or `'right'` |
| `imageBackgroundMode` | boolean | varies | Background vs foreground mode |

### Image Path Resolution

The theme automatically resolves image paths in frontmatter, so you can use different path formats:

| Path Format | Example | Description |
|-------------|---------|-------------|
| **Relative** | `./image.png` | Relative to the markdown file |
| **Parent relative** | `../assets/img.png` | Navigate to parent directories |
| **Same directory** | `image.png` | File in same folder as markdown |
| **Public directory** | `/image.png` | Absolute path from `/public` folder |
| **External URL** | `https://...` | Remote images |

:::tip Relative Paths Recommended
Using relative paths (e.g., `./assets/diagram.png`) is recommended when working with the `docusaurus-plugin-slidev` integration. The theme's Vite plugin automatically resolves these paths and ensures images are correctly bundled during build.
:::

```markdown title="Example: Using relative image paths"
---
layout: image-left
imageSrc: ./assets/architecture.png
---

# Architecture Overview

This diagram shows our system design.
```

:::note Public Directory
For images in the `/public` directory, use absolute paths starting with `/`. These are served as-is without processing.
:::

## Global Theme Configuration

Configure theme-wide settings in your presentation frontmatter:

```markdown title="slidev/presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
highlighter: shiki
lineNumbers: true
drawings:
  persist: false
transition: slide-left
---
```

### Available Global Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `highlighter` | string | `'shiki'` | Code highlighter: `'shiki'` or `'prism'` |
| `lineNumbers` | boolean | `false` | Show line numbers in code blocks |
| `drawings` | object | - | Drawing/annotation settings |
| `transition` | string | `'fade'` | Slide transition effect |
| `colorSchema` | string | `'auto'` | Color scheme: `'auto'`, `'dark'`, `'light'` |

See [Slidev configuration](https://sli.dev/custom/#frontmatter-configures) for all options.

## Custom Styling

Override theme styles with custom CSS:

```markdown title="slidev/presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
---

<style>
.slidev-layout.cover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

h1 {
  font-size: 3rem !important;
}
</style>
```