---
title: Prepare styling options for a flexible template
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Email Builder in Xperience by Kentico empowers marketers to create visually engaging emails using a drag-and-drop interface. Let's create a flexible, reusable template that supports a variety of layouts and color schemes.

We'll walk through the process of building a general-purpose template and section for Email Builder, supporting a range of visual customization options for your marketers.

![Screenshot of a finished email](https://docs.kentico.com/docsassets/modules/prepare-template-styling-options/FinishedEmail.png "Screenshot of a finished email")

## Prepare styling options

### Create an enumeration dropdown provider

To support flexible layouts and color schemes, start by creating dropdown providers for enumerations. This allows you to manage the options marketers can specify for column layout, corner style, and color scheme.

You may be familiar with a DropdownEnumOptionProvider class from our [dropdown provider guide](https://docs.kentico.com/guides/development/page-builder/map-enum-to-dropdown.md#implement-a-generic-mapper-class). If your project does not have the class, you add it by following the steps in that guide or copy the completed code from [the finished branch of the Training guides repository.](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/DropdownEnumOptionProvider.cs).

### Define a service for parsing enum values

Next, create and register a service for parsing enum values from strings, using the [Enums.NET NuGet package](https://www.nuget.org/packages/Enums.NET/). It should take a _default value_ to fall back to when the provided string does not contain an enum value.

We also outline this in the [dropdown provider guide](https://docs.kentico.com/guides/development/page-builder/map-enum-to-dropdown.md#create-a-service-to-parse-enumeration-values-from-strings) mentioned earlier, which creates the following files:

- [\~/Features/Shared/OptionProviders/IEnumStringService.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/IEnumStringService.cs)
- [\~/Features/Shared/OptionProviders/EnumStringService.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/EnumStringService.cs)
- [\~/ServiceCollectionExtensions.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/ServiceCollectionExtensions.cs)

### Include enumerations for styling

With a dropdown provider and a class for parsing enumeration values in place, we can move on to the enumerations themselves.

If you haven't completed our [Page Builder module](https://docs.kentico.com/modules/page-builder.md) or [guides](https://docs.kentico.com/guides/development/page-builder.md), add these files to your project:

- [\~/Features/Shared/OptionProviders/ColorScheme/ColorSchemeOption.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/ColorScheme/ColorSchemeOption.cs)
- [\~/Features/Shared/OptionProviders/ColumnLayout/ColumnLayoutOption.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/ColumnLayout/ColumnLayoutOption.cs)
- [\~/Features/Shared/OptionProviders/CornerStyle/CornerStyleOption.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/OptionProviders/CornerStyle/CornerStyleOption.cs)

### Add styles corresponding to the enums

Now we have the framework for allowing editors to specify styling options, but we don't have any actual styles to apply based on their selections.

Let's define CSS classes to style your Email Builder components according to the selected options.

```css title="~/wwwroot/EmailBuilder.css"
...
.tg-tiny-margin {
    margin: 1px;
}

.tg-corner-shrp {
    border-radius: 0;
}

.tg-corner-rnd {
    border-radius: 32px;
}

.tg-corner-v-rnd {
    border-radius: 64px;
}

.tg-bg-primary {
    background: #8107c1;
}

.tg-bg-secondary {
    background: #f0561a;
}

.tg-bg-none {
    background: none;
}

.tg-bg-light-1 {
    background: white;
}

.tg-bg-light-2 {
    background: #efe6f9;
}

.tg-bg-light-3 {
    background: #ebf5ff;
}

.tg-txt-light {
    color: white;
}

.tg-txt-light a {
    color: #f0561a;
}

.tg-txt-medium {
    color: #f0561a;
}

.tg-txt-medium a {
    color: white;
}
.tg-txt-dark {
    color: #1e1a1b;
}

.tg-txt-dark a {
    color: #f0561a;
}
```

### Link these styles to their enums with a service

Now, all that's left is to build a service that retrieves a collection of CSS styles based on a provided enumeration value.

> **Note:** The column layout will change the markup of an email, so we'll handle that logic in the specific Razor component. For this service, focus on retrieving classes for color scheme and corner style, which are controlled by CSS classes.

Add the following files:

- [\~/Features/Shared/Services/IComponentStyleEnumService.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/Services/IComponentStyleEnumService.cs)
- [\~/Features/Shared/Services/ComponentStyleEnumService.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/Features/Shared/Services/ComponentStyleEnumService.cs)
- [\~/ServiceCollectionExtensions.cs](https://github.com/Kentico/xperience-by-kentico-training-guides/blob/finished/src/TrainingGuides.Web/ServiceCollectionExtensions.cs)

> **Info:** You can find more implementation details for the style service in the [versatile page templates guide](https://docs.kentico.com/guides/development/page-builder/create-versatile-templates-part-1.md#create-a-service-to-retrieve-styles).