--- title: Manage styles slug: cms-saas/docs/work-with-styles docTags: createdAt: 2026-07-30T20:18:09.000Z --- Use the [Optimizely CMS Content API](docId\:UBbVVvgyfOQzyLOTn4KMH) to manage styles in Optimizely Content Management System (SaaS). You can configure styles on rows, columns, sections, or experiences to influence how content displays. Styles can target global base types, global node types, or unique content types built for the specific CMS (SaaS) instance. For details on implementing styles in Visual Builder, see [Select styles](docId\:BvwirGlmyuK-_HgUNw93b). ## Styles Styles in CMS (SaaS) are abstract settings used to control the presentation of content across various channels. Unlike standard CSS, these styles act as metadata descriptors. They can be interpreted and rendered based on the presentation channel, such as websites, apps, or smart devices. Styles in CMS (SaaS) - describe how content is presented as an abstract layer. - provide reusable settings for content administrators to maintain visual consistency. - permit the union of overlapping styles, merging their effects when applicable. - are managed through the DisplayTemplate API. ### Use case Styles are commonly applied with characteristics such as animation, size, height, width, alignment, and other design decorators. These styles provide the client with an instruction set on how to present content. The channel delivering that content is responsible for interpreting and rendering the styles accordingly. For example, a fitness company manages its website to promote classes, trainers, and membership plans. Using CMS (SaaS), the company creates and applies reusable styles, including animation effects, to keep the website visually engaging and user-friendly. For example, a style for "Animation Type" might include: - **Fade in** – Smoothly reveals content as users scroll down the page. - **Bounce in** – Adds dynamic, attention-grabbing movement when content displays. The company creates a "Featured Trainers" section to showcase its top instructors. To enhance the user experience they implement the following: - The section heading uses the `Fade in` animation to display subtly as users scroll. - Individual trainer cards use the `Bounce in` animation to grab attention when loaded. These styles ensure a consistent, branded look while making the site interactive and engaging. CMS (SaaS) defines these animations as abstract settings, which the website interprets and renders using CSS or JavaScript. See [Create a style](docId\:AwYc-NJzcE8JvLY0xvWCU) for steps to create the example animation types. ## Apply styles in CMS (SaaS) You can apply styles to different levels of content structure in CMS (SaaS). These include: - **Global base types** – Apply styles to sections or content blocks for uniform styling across multiple pieces of content. - **Global node types** – Apply styles to rows and columns for consistency across content. - **Unique content types** – Apply styles to custom content types for tailored styling based on specific needs. See [Configure Visual Builder](docId:0o9L75GP0gCgPCxNO1CvS) for information. ## DisplayTemplate API information You can create styles using the [DisplayTemplate API](docId\:Rx0Yw4QzeXKsUc0N1jW3i). Styles apply globally to the base, node, or content type you assign them to and cannot be restricted based on context. See [Content base types](docId:9HkNAajEbNXyGOVfRfRUr). ### Create a style To create a new style, send a `POST` request to the `displaytemplates` endpoint. ```http POST https://api.cms.optimizely.com/v1/displaytemplates ``` Include the parameters in JSON format in the request body. For example, see the following code sample: ```json { "settings": { "AnimationType": { "displayName": "Animation Type", "editor": "select", "choices": { "One": { "displayName": "Fade In", "sortOrder": 1 }, "Two": { "displayName": "Bounce In", "sortOrder": 2 } } } }, "displayName": "Animation", "nodeType": "section", "key": "GlobalStyleAnimation" } ``` Confirm the response includes a summary of the added style. Your created style displays in Visual Builder like the following image: ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/PybN5_HPIt1GyffCE_aZm_ff73fa8f3ce49db7c2cb610849a31407b64b18a2573a23edcd4e045fa0837322-image.png) See [Create display template](docId\:tI5eqYQkGcPv66emTJYS5) endpoint in the API reference documentation. ### List styles List the styles in your CMS (SaaS) instance by sending a `GET` request to the `displaytemplates` endpoint. ```http GET https://api.cms.optimizely.com/v1/displaytemplates ``` Use the following query parameters to filter the list of styles: - `pageIndex` – The zero-based index of the current page. - `pageSize` – The number of items on each page. **Example:** ```http GET https://api.cms.optimizely.com/v1/displaytemplates?pageIndex=5&pageSize=123 ``` See [List display templates](docId\:Rx0Yw4QzeXKsUc0N1jW3i) endpoint in the API reference documentation. ### Get styles You can retrieve information about the style by sending a `GET` request to the `displaytemplates` endpoint with the unique key of the display template. The following code sample calls a `GET` request on the `displaytemplates` endpoint with `AnimatedHeadingStyles` as the key. ```http GET https://api.cms.optimizely.com/v1/displaytemplates/AnimatedHeadingStyles ``` See [Get display template](docId\:E1pzNs_VACPh-DXCHIeX_) endpoint in the API reference documentation. ### Update a style You can update a style by sending a `PATCH` request to the `displaytemplates` endpoint with the unique key of the display template. ```http PATCH https://api.cms.optimizely.com/v1/displaytemplates/IconImage Content-Type: application/merge-patch+json ``` Include the parameters of what you want to update in JSON format in the request body. For example, to update the `Icon` style you created in the [Create a style](docId\:AwYc-NJzcE8JvLY0xvWCU) section by adding an option to add borders around images, see the following code sample: ```json { "displayName": "Icon", "settings": { "border": { "displayName": "Border", "sortOrder": 100, "choices": { "yes": { "displayName": "Yes", "sortOrder": 30 }, "no": { "displayName": "No", "sortOrder": 40 } } } } } ``` Confirm the response includes a summary of the added style. Your updated style displays in Visual Builder like the following image: ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Yqv_X6dGkiAMbtXTNp_1g_bb04ced73b9bf1c763300e03af961e29295cf2939154cbbe8dc2079a774510d5-image.png) See [Update display template](docId\:hoSVb2eeUvT7dCREkhmv3) endpoint in the API reference documentation. ### Delete a style You can delete a style by sending a `DELETE` request to the `displaytemplates` endpoint with the unique key of the display template you want to delete. ```http DELETE https://api.cms.optimizely.com/v1/displaytemplates/IconImage ``` Confirm the response includes a summary of the deleted style. Your style no longer displays as an option in the Visual Builder. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/nuDE0rPm6W3ZV3elM_vuY_e96f325ae1b151128838ffcd5d5bbfe98f7a1fec4588aefa08394fbd22ad85ea-image.png) See [Delete display template](docId\:pTRL60FpIGwCa23izPio8) endpoint in the API reference documentation. ## Manage styles through Mark chat Mark (Optimizely Agent Platform) is an agent orchestration platform that helps you work smarter in CMS (SaaS). As an alternative to calling the DisplayTemplate API directly, you can manage display templates through [Mark chat](docId\:VLxVfzPzAW0rpwNrtkETK). Mark chat provides the following tools for working with display templates: - `cms_list_display_templates` – Lists every display template in the CMS (SaaS) instance, along with its type association, default state, and a summary of its settings. - `cms_get_display_template` – Returns the full details for a single display template, including its settings and choices, when you provide the template key. - `cms_create_display_template` – Creates a display template from the display name, type association, settings, and choices you provide. - `cms_update_display_template` – Updates the display name, default state, or settings of an existing display template. To delete a display template, use the [Delete display template](docId\:pTRL60FpIGwCa23izPio8) API endpoint.