> ## Documentation Index
> Fetch the complete documentation index at: https://help.yoursit.ee/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize your appearance

Your Sitee can be as simple or expressive as you want. From the **Customization** menu, you can change its overall theme, colors, typography, shape, banner, and layout.

<Note>
  **Your profile picture is managed separately.** Open your Profile Widget to change it or use your banner as your profile picture.
</Note>

## Customize your Sitee

1. [Open your Sitee editor](https://yoursit.ee/dashboard/login).
2. Select **Customization** from the bottom toolbar.
3. Update the settings you want to change.
4. Select **Save**.

`»video: Open the Customization menu, change one or two settings, save the changes, and show the updated Sitee.«`

## Theme and colors

Choose the overall color style of your Sitee:

* **Light** uses a light appearance.
* **Dark** uses a dark appearance.
* **Custom** lets you choose your own background and accent colors.

The **Accent** color is used for buttons, icons, and highlights across your Sitee.

Enable **Follow accent color** to apply your accent color to social connections, Custom Buttons, and some other elements instead of displaying their original colors.

<img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-4.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=25e8ec6ea8ef42a28de8092e9d1a75c3" alt="Image showing the Customization tab on YourSitee's dashboard editor." width="13602" height="13328" data-path="images/image-4.png" />

## Typography and corners

You can choose separate typefaces for:

* **Headers**
* **Body text**

Select **More fonts** to explore the full font collection.

You can also adjust:

* **Widget corners**, which controls the corner radius of your widgets
* **Connections & Custom Buttons**, which controls the corner radius of those elements separately

<img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-6.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=ae1760e67efd9b7a9a671066eb8b0a31" alt="Image showing the Customization tab on YourSitee's dashboard editor." width="6800" height="10555" data-path="images/image-6.png" />

## Banner and layout

Add a banner to give your Sitee a stronger visual identity. You can add, change, or remove the image and choose between the available banner types:

#### **Default**

<img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-10.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=6d85d3982b448f23e1569aa004d3e4f7" alt="Image" width="10740" height="4174" data-path="images/image-10.png" />

#### **Card** shows your banner inside a profile card. It has two variations:

<Columns cols={2}>
  <Column>
    **Single** width showing only your Profile Widget.

    <img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-11.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=836a1728b71a284f325e2870fa7adb3a" alt="Image" title="Image" width="1074" height="864" data-path="images/image-11.png" />
  </Column>

  <Column>
    **Double** width using a widget next to your Profile Widget.

    <img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-14.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=9322d1d4b19418f9fc424632389d8d40" alt="Image" title="Image" width="1074" height="864" data-path="images/image-14.png" />
  </Column>
</Columns>

**Background** shows your banner as the page's background.

<img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-12.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=26e7970f075bfb9c8fd2dbe79845d939" alt="Image" width="1074" height="864" data-path="images/image-12.png" />

#### **Wide** shows your banner from the top left to the top right of your screen.

<Frame>
  <img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-13.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=0ceb991a80f46404600bdb03e6116a84" alt="Image" width="1074" height="758" data-path="images/image-13.png" />
</Frame>

You can also control how the rest of your Sitee is arranged:

#### **Standardized** column layout uses a single-column layout.

<img src="https://mintcdn.com/yoursitee/jyLi19mDXs3W4Ehf/images/image-22.png?fit=max&auto=format&n=jyLi19mDXs3W4Ehf&q=85&s=403a957270f84774a7117e9c465e1a1e" alt="Image" width="2148" height="1000" data-path="images/image-22.png" />

#### **Classic column layout** uses the original two-column layout.

<img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-10.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=6d85d3982b448f23e1569aa004d3e4f7" alt="Image" width="10740" height="4174" data-path="images/image-10.png" />

#### **Alignment** controls whether widgets align to the left or right.

<Columns cols={2}>
  <Column>
    Left-alignment (default)

    <img src="https://mintcdn.com/yoursitee/TsZTBH6NMr4FA78A/images/image-18.png?fit=max&auto=format&n=TsZTBH6NMr4FA78A&q=85&s=fb30510a353aaa9fec1c759f4fb35c75" alt="Image" width="2148" height="1000" data-path="images/image-18.png" />
  </Column>

  <Column>
    Right-alignment

    <img src="https://mintcdn.com/yoursitee/jyLi19mDXs3W4Ehf/images/image-20.png?fit=max&auto=format&n=jyLi19mDXs3W4Ehf&q=85&s=c939b2b99553cd03049df8a94e17d9ea" alt="Image" width="2148" height="1000" data-path="images/image-20.png" />
  </Column>
</Columns>

#### **Profile card alignment** controls whether the content inside your profile card aligns to the left, center, or right.

<Columns cols={3}>
  <Column>
    <img src="https://mintcdn.com/yoursitee/jyLi19mDXs3W4Ehf/images/image-23.png?fit=max&auto=format&n=jyLi19mDXs3W4Ehf&q=85&s=7a287c08572f34284c414c82b9d58c73" alt="Image" width="313" height="221" data-path="images/image-23.png" />
  </Column>

  <Column>
    <img src="https://mintcdn.com/yoursitee/jyLi19mDXs3W4Ehf/images/image-24.png?fit=max&auto=format&n=jyLi19mDXs3W4Ehf&q=85&s=5f4fe95e68ad2090eb7447b1e96443b0" alt="Image" width="313" height="221" data-path="images/image-24.png" />
  </Column>

  <Column>
    <img src="https://mintcdn.com/yoursitee/jyLi19mDXs3W4Ehf/images/image-25.png?fit=max&auto=format&n=jyLi19mDXs3W4Ehf&q=85&s=f2338e704bd358e475d766e3af6f04a3" alt="Image" width="313" height="221" data-path="images/image-25.png" />
  </Column>
</Columns>

## Change your profile picture

Your profile picture is not part of the Customization menu.

Open your [**Profile Widget**](/account/your-profile-widget) to:

* Change or remove your profile picture
* Use your banner as your profile picture

<Note>
  **Square images work best for profile pictures.** Built-in profile picture cropping is coming soon, which will make it easier to adjust non-square images directly in the editor.
</Note>

<Tip>
  **Preview your Sitee before sharing it.** Check that your colors are readable, your fonts work well together, and your layout looks good on both desktop and mobile.
</Tip>

## Related articles

<CardGroup cols={2}>
  <Card title="Set up your banner and profile background" href="/account/banner-and-background">
    Learn more about adding a banner and choosing how it appears on your Sitee.
  </Card>

  <Card title="Set up your Profile Widget" href="/account/your-profile-widget">
    Update your profile picture, display name, bio, and other profile information.
  </Card>
</CardGroup>