import { MdxImage } from "@/components/MdxImage";

import StepEight from "./images/StepEight.webp";
import StepEleven from "./images/StepEleven.webp";
import StepFive from "./images/StepFive.webp";
import StepFour from "./images/StepFour.webp";
import StepNine from "./images/StepNine.webp";
import StepSeven from "./images/StepSeven.webp";
import StepSix from "./images/StepSix.webp";
import StepTen from "./images/StepTen.webp";
import AllowOverwrite from "./images/allow-overwrite.webp";
import BackgroundSettings from "./images/background-settings.webp";
import CardSettings from "./images/card-settings.webp";
import FormSettings from "./images/form-settings.webp";
import LookAndFeelSettings from "./images/look-and-feel.webp";

import Doggo from "./images/Doggo.jpg";
import HipsterLiving from "./images/HipsterLiving.jpg";
import Mario from "./images/Mario.webp";
import WindowsXp from "./images/WindowsXp.jpg";

export const metadata = {
  title: "Styling Theme",
  description:
    "Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.",
};

# Styling Theme

Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.

## Configuration

In the left side bar, you find the `Configuration` page. On this page you find the `Look & Feel` section:

<MdxImage
  src={LookAndFeelSettings}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## **Styling Options**

1. **Form Styling:** Customize the survey card using the following settings

<MdxImage
  src={FormSettings}
  alt="Form styling options UI"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Brand Color**: Sets the primary color tone of the survey.
- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
- **Input Color:** Alters the border color of input fields.
- **Input Border Color**: This is the color of the border of the form input field.

2. **Card Styling:** Adjust the look of the survey card

<MdxImage
  src={CardSettings}
  alt="Card styling options UI"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
- **Card Background Color**: Sets the card's main background color.
- **Card Border Color**: Changes the border color of the card
- **Card Shadow Color**: Adds a shadow effect for depth
- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
- **Add Highlight Border**: Adds a distinct border for emphasis.

3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)

<Note>This is only available for Link Surveys</Note>

<MdxImage
  src={BackgroundSettings}
  alt="Background styling options UI"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Color**: Pick any color for the background
- **Animation**: Add dynamic animations to enhance user experience..
- **Upload**: Use a custom uploaded image for a personalized touch
- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
- **Background Overlay**: Adjust the background's opacity

## Add Brand Logo

Customize your survey with your brand's logo.

<Note>Brand logos are only visible on Link Survey pages.</Note>

1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.

<MdxImage
  src={StepFour}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

2. Upload your logo

<MdxImage
  src={StepFive}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.

<MdxImage
  src={StepSix}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

4. Remember to save your changes!

<MdxImage
  src={StepSeven}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

<Note>The logo settings apply across all Link Surveys pages.</Note>

## Overwrite Styling Theme

You can allow to overwrite the styling theme for individual surveys to create unique styles for each survey:

<MdxImage
  src={AllowOverwrite}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

In the survey editor, a tab called `Styling` will appear. Here you can overwrite the default styling theme.

---
