> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/pages/templates/customize-page-styles.md).

# 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>