Manage styles

12 min

Use the Optimizely CMS Content APIOptimizely CMS Content API 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.

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 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 for information.

DisplayTemplate API information

You can create styles using the DisplayTemplate APIDisplayTemplate API. 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.

Create a style

To create a new style, send a POST request to the displaytemplates endpoint.

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:

{  
   "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:

See Create display templateCreate display template 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.

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:

GET https://api.cms.optimizely.com/v1/displaytemplates?pageIndex=5&pageSize=123

See List display templatesList display templates 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.

GET https://api.cms.optimizely.com/v1/displaytemplates/AnimatedHeadingStyles

See Get display templateGet display template 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.

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 section by adding an option to add borders around images, see the following code sample:

{
  "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:

See Update display templateUpdate display template 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.

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.

See Delete display templateDelete display template endpoint in the API reference documentation.

Manage styles through Opal Chat

As an alternative to calling the DisplayTemplate API directly, you can manage display templates through Opal Chat. Opal 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 templateDelete display template API endpoint.