# Customize page styles

Many pages templates have the same general style settings. These settings let you customize the content width, top and bottom padding, and animation styles.

### Page colors

***

You can change the page colors by assigning a color scheme using the color scheme picker in the page section settings.

Color schemes are sets of colors. You can add and define different color schemes in **Theme settings > Colors**.

<figure><img src="/files/fOrc6uVsbB6elVRJdyxv" alt="" width="267"><figcaption></figcaption></figure>

### Content width

***

Change the **Page width** to adjust how far the section spans across the page. Available width options will vary depending on the type of section.

`Click Page section to find settings`

| Setting                                               | Description                                | Options                                                                                                                            |
| ----------------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">Content width</mark>        | Choose the width of the section content.   | <p><strong>Page width</strong><br><strong>Custom width</strong> <em><mark style="background-color:yellow;">Default</mark></em></p> |
| <mark style="color:blue;">Custom content width</mark> | Set a custom width for the section content | *<mark style="background-color:yellow;">Default</mark>*<mark style="background-color:yellow;">: 650</mark>                         |

### Section padding

***

Use the sliders to add space at the top or bottom of the section. Set to 0 to remove spacing.

`Click Page section to find settings`

<figure><img src="/files/GKReBH3EfMLtTnOAek62" alt="" width="338"><figcaption></figcaption></figure>

### Animations

***

Eclipse uses **animation** effects when loading images and text to create a more engaging user experience.

<table><thead><tr><th width="265">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable text animation</mark></td><td>When enabled, headings and text slide up and fade into view upon loading.</td></tr><tr><td><mark style="color:blue;">Image animation</mark></td><td><p>Change the animation style of how the image loads. Select <strong>None</strong> to disable load animations.<br><br><strong>Fade</strong>: The image gradually fades into view.<br></p><p><strong>Iris swipe</strong>: The image is revealed in the form of a growing circle.</p></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/pages/templates/customize-page-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.