📘

New

The info on this page applies to [projects using our new designs](🔗).

## Customization Options

There are two ways to customize your docs. We recommend using CSS variables; it's the easiest and safest way to add customization to your docs.

If you want to change your header background, you can set the CSS variable like so:

The other option is to write custom CSS. We'll expose global class names for you to use as selectors (prefixed with `rm`):

📘

:root vs body

Our CSS vars are targeted on the `:root` selector and load in after yours, so use the `body` selector to ensure your variables take priority!

## Changing Your Typeface

You can change the typeface throughout your docs through the `--font-family` variable.

If you’re using a service like Google Fonts, you'll need to include the `<link />` elements in your Custom HTML.

## Header

Some variables vary depending on the primary color of your header background (set in the Appearance page, if it's dark or light). You can base your CSS variable overrides on light or dark by doing:

### CSS Variables

### Global Classes

1. `.rm-Header`

2. `.rm-Logo`

3. `.rm-Header-top-link`

4. `.rm-Header-bottom-link`

5. `.rm-SearchToggle`

6. `.rm-Header-top-link_login`

Not pictured:

• `.rm-JumpTo`

• `.rm-Logo-img`

## Sidebar

### Global Classes

1. `.rm-Sidebar`

2. `.rm-Sidebar-link `

3. `.rm-Sidebar-wrapper` (wraps both heading and list)

4. `.rm-Sidebar-heading` (just the heading)

5. `.rm-Sidebar-list` (just the list)

## Article

### Global Classes

1. `.rm-APISectionHeader` (this selector is used in the Playground and will affect those too)

2. `.rm-APILogInfo`

3. `.rm-APILogsTable`

4. `.rm-ParamContainer `

5. `.rm-ParamInput` or `.rm-ParamSelect`

6. `.rm-APIResponseSchemaPicker`

Not pictured:

• `.rm-Pagination` (the wrapper for the Previous / Next Page navigation buttons located at the bottom of page)

## Playground

### CSS Variables

### Global Classes

Language Picker:

1. `.rm-LanguageButton`

2. `.rm-LanguageButton-more`

3. `.rm-APISectionHeader` (this selector is used in the Article and will affect those too)

4. `.rm-PlaygroundRequest`

5. `.rm-TryIt`

6. `.rm-PlaygroundResponse`

## Global Variables

## ReadMe Markdown

We also have several variables that are specific to [ReadMe Markdown (RDMD)](🔗), which is the Markdown engine that renders all of ReadMe's Markdown content. You can read about these variables and other tips for [customizing RDMD](🔗).