# Section styles

Sections include general style options. In the editor side panel, click the section to find settings for **Section colors**, **image overlays**, **padding**, and **animations**.

 

## Section colors

***

{% columns %}
{% column width="58.333333333333336%" %}
You can change a section's **color scheme** or use **custom colors** for your section. Click a section to open the settings and find the **Section colors** area.

{% endcolumn %}

{% column %}

<figure><img src="/files/BTVVHAxuDLZXzpHzY3SP" alt="" width="375"><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

### Use color scheme

***

Sections use the colors from your theme settings as the **default color scheme**. You can select a **variant color scheme** or [use custom section colors](#use-custom-section-colors).

**Variant color schemes** generate alternate colors based on your default theme colors. There are four variant color schemes: **Inverse**, **Soft**, **Accent**, or **Sale**.

`Click the section to find color settings`

<table data-header-hidden><thead><tr><th width="113"></th><th></th></tr></thead><tbody><tr><td><mark style="color:blue;">Default</mark></td><td>Use colors selected in <a href="/pages/7UqaWJHr530MKWscpEMp">Theme settings > Color > General</a>.</td></tr><tr><td><mark style="color:blue;">Inverse</mark></td><td>Swap default <strong>Text</strong> and <strong>Background</strong> colors.</td></tr><tr><td><mark style="color:blue;">Soft</mark></td><td>Use a blend of default <strong>Text</strong> and <strong>Background</strong> colors.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Use default <strong>Accent</strong> and <strong>Accent contrasting</strong> colors.</td></tr><tr><td><mark style="color:blue;">Sale</mark></td><td>Use default <strong>Sale</strong> color for background and default <strong>Background</strong> color for text.</td></tr><tr><td><mark style="color:blue;">Custom</mark></td><td>Apply <strong>Color scheme 1</strong> or <strong>Color scheme 2</strong> from your theme settings. Go to <em>Theme settings > Colors > Color scheme</em> to edit.<br><br><img src="/files/kIOtUffupQfJwqls2mqw" alt=""></td></tr></tbody></table>

&#x20;

### Use custom section colors

***

Instead of using a color scheme, you can use custom colors for the **text** and **background**. In the section settings, enable the **Override with custom colors** option.

<figure><img src="/files/kMp5YDKQKc78OyYoFIEq" alt=""><figcaption></figcaption></figure>

`Click section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Enable to apply custom colors to the section. <br><br>These colors will override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for headings, text, and foreground elements.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the section background. </td></tr></tbody></table>

&#x20;

## Image overlays

***

When text appears on top of images, sections use **Image overlay** colors for the text. You can use the **default colors** from your *theme settings*, or select **custom colors** for the section.

The overlay also applies a **tint** over top the image. You can use a **solid** or **gradient** color, or turn it off.

{% hint style="info" %}
Overlay colors with high contrast help keep text readable and [accessible for everyone](/cornerstone/general/editing-themes/accessibility.md#color-contrast-for-text).
{% endhint %}

<div><figure><img src="/files/MWaHYDomGLKVsMhTvtM1" alt="" width="301"><figcaption></figcaption></figure> <figure><img src="/files/ozjRjvyjOsqFJrwmb3xE" alt="" width="563"><figcaption><p>Solid color with 70% opacity</p></figcaption></figure> <figure><img src="/files/RRJj153Ziy0rHHTn6nJD" alt="" width="563"><figcaption><p>Gradient color - bottom to top</p></figcaption></figure></div>

&#x20;

{% stepper %}
{% step %}

### Change overlay colors

* To change the **default overlay colors** for all sections, go to *Theme settings > Colors > Image overlay*.&#x20;
* To use **custom overlay color**s, open the section settings to enable **Override with custom colors**. Select the **Text** and **Tint** colors.
  {% endstep %}

{% step %}

### Use solid or gradient style

Change the **Tint style** to use a **solid** or **gradient** color overlay. Gradient overlays fade from solid to transparent. You can select the **direction** of the fade.
{% endstep %}

{% step %}

### Change transparency

Use the **Tint opacity** slider to make the tint more or less transparent. *S*e*t the opacity to 0% to turn off the tint overlay.*

{% hint style="info" %}
Set the opacity to 100% to create solid color blocks or banners in sections like [Grid](/cornerstone/pages/theme-sections/grid.md), [Image hero](/cornerstone/pages/theme-sections/image-hero.md), or [Slideshow](/cornerstone/pages/theme-sections/slideshow.md).
{% endhint %}
{% endstep %}
{% endstepper %}

&#x20;

`Click block or section to find settings`

<table><thead><tr><th width="185">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tint opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br><em>S</em>e<em>t the opacity to 0% to turn off the tint overlay.</em></td></tr><tr><td><mark style="color:blue;">Tint style</mark></td><td>Select a <strong>Solid</strong> color or <strong>Gradient</strong> color overlay for the tint. For gradients, select a <strong>direction</strong> of the fading color.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to use custom overlay colors, instead of the default theme colors .</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the headings and text.</td></tr><tr><td><mark style="color:blue;">Tint color</mark></td><td>Select a custom overlay color.</td></tr></tbody></table>

&#x20;

## Section padding

***

Add or remove space at the top and bottom of the section. Click the section to open the settings. Under **Section style**, use the **Top spacing** and **Botton spacing** sliders. Set to 0px to remove spacing.

<div><figure><img src="/files/Jhxl7QJJ4nJ53pCUCtGk" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="/files/3ddmAtuVNo9MtYTf38ov" alt="" width="375"><figcaption></figcaption></figure></div>

&#x20;

## Section animations

***

When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once.

Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.

### Turn off animations

***

You may want to turn off animations if you have concerns about load time, style, or accessibility.

* To turn off animations for a section, click the section to open the settings. Under **Section style**, toggle off **Enable animations**.
* To turn off animations for *all* sections, go to **Theme settings > Animation** and toggle of **Enable section animations**.


---

# 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/cornerstone/pages/theme-sections/section-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.