> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Using the Editor Theme to Style Your Quiz

### Introduction

The **Editor Theme** in Quizell allows you to easily style your quiz so it matches your website’s branding.  
You can automatically apply your website’s colors and fonts, then fine-tune elements like buttons, backgrounds, and animations — all with a live preview.

This guide walks you through using the **Your Website Theme** option step by step.

---

### Step 1: **Open the Theme Panel**

To start styling your quiz, open the **Theme** section from the editor.

1. Open your quiz from the **Quizell Dashboard**.
2. Click on the **Theme** icon in the left sidebar.
3. The Themes panel will appear with available options.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_krnjhd.png =1000x497)

---

### Step 2: **Select “Your Website Theme”**

Quizell allows you to style your quiz based on your website design.

1. Click on **Your Website Theme**.
2. Add your website link this option helps match your quiz with your website’s branding.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1mfg1bb.png =1000x497)

---

### Step 3: **Enter Your Website URL and Scan**

Now, add your website URL so Quizell can fetch design styles.

1. Enter your website URL (example: `https://quizell.com`).
2. Click **Scan Your Website**.
3. This will scan your site for fonts and colors.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_9u1lrh.png =1000x497)


---

### Step 4: **Save and Apply the Theme**

After scanning, save and apply the theme to your quiz.

1. Click **Apply**.
2. Click **Save** to store the theme.
3. The quiz preview updates automatically.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1yjgkq0.png =1000x497)


---

### Step 5: **Apply the Theme from My Themes**

The saved website theme will now appear in **My Themes**.

1. Go to the **My Themes** section.
2. Click the **three-dot menu** on your website theme.
3. Select **Apply** to activate it.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_ifwk7e.png =1000x497)


---

### Step 6: **Customize Theme Settings**

Once applied, you can further customize the theme settings.

You can adjust:
* **Logo**
* **Font**
* **Buttons**
* **Background**
* **Progress Bar**
* **Loader**
* **Animation**

All changes are reflected instantly in the quiz preview.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_93fdzm.png =1000x497)


---

### Final Note

Using the **Editor Theme** in Quizell helps you create quizzes that feel like a natural extension of your website, while still giving you full control over the final look and feel.