Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

Theme Resources (also known as Front End Resources) are used to create and manage various theme styles, scripts, and views in Optimizely <<product-name>>. This includes creating new resources and writing any applicable code within those resource or uploading existing code. Additionally, if a content delivery network (CDN) is used, the option to link externally lets you point the CDN paths.

This article is divided into the following three categories:

  • **Work with the Theme Page** – this section describes various buttons and icons that are presented and how to search and sort files.

  • **Create a New Theme Resource** – this section covers how to create a new resource, clone an existing one, or link to external theme resources (CDNs).

  • **Edit a Theme Resource** – this section covers working with drafts, previewing changes, publishing a resource, comparing changes, uploading code, viewing assigned resources, and viewing past versions.

## Work with the theme page

  1. Go to **Admin Console** \>**Themes & Content** \> **Theme Resources**.

    

  2. The **System** column displays **System Resource** if the resource is a system resource. If a resource is a system resource, it also displays **View Only** in the **Edit** column, noting that the resource is view only and cannot be edited. Editable theme resources show **Edit** in the **Edit** column.

  3. This screen also displays the **File Name**, **Group**, **Language**, and **Status** (either Published or Draft).

  4. Search for a resource using the **Search Bar** at the top of the page.

  5. By default, theme resources are sorted by **Language**, then by **Group within the Language**. Click a column header to sort the list by that column.

  6. Click **Delete** at the top of the screen to delete a theme resource. System resources cannot be deleted.

  7. If the resource is assigned to a theme, the system displays a pop-up as a reminder the resource cannot be deleted. Unassign the resource from the theme first, then return to the delete screen to delete the resource.

    

## Create a theme resource

Use the following steps to create a new theme resource by either cloning a system resource and modifying the code, or by creating a theme resource.

Note

Cloning a cloned resource is not recommended, as the version history will be inaccurate. Clone from system resources only.

### Clone a system resource

  1. Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**

  2. Click **View Only** next to a theme.

  3. Click **Clone**.

  4. Assign the resource a File Name on the **Details** tab, and click **Save**.

  5. Modify the other resource tabs as needed.

### Create a new theme resource

  1. Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**

  2. Click **Add Theme Resource**.

  3. Select a **Resource Type** (Style, Script, or View) and the corresponding **Resource Language.**

  4. Select **Create** to create a new blank resource, or select **Upload** to upload a file.

  5. If creating a new blank resource, enter a **File Name,** and a group name. Optionally, paste code in the box at the bottom of the screen. Click **Create.**

  6. If uploading a file, select **Choose File** to browse for the file, then enter a group name. Click **Upload**.

### Link to a CDN

If your content resources are stored in a CDN, follow these steps to link to the CDN.

  1. Go to **Admin Console** \> **Themes & Content** \> **Theme**.

  2. Click **Edit** to edit an existing Theme.

  3. Click the **Styles** or **Scripts** finger tab and click **Add Styles** or **Add Scripts**.

  4. In the **Add Style** or **Add Script** pop-up, click **Link External.**

  5. Paste the relevant URL into the field and click **Add**.

## Edit a theme resource

Edit cloned or custom theme resources to update details, change code, or restore a previous version of the resource. Editable resources show the **Edit** button in the **Edit** column. Cloned or custom theme resources can be edited, while System resources cannot.

  1. Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**

  2. Click **Edit** next to the resource you wish to edit.

### Edit buttons

Editing buttons vary depending on the current resource and current state (Draft or Published).

#### Discard draft

If the select resource is in **Draft** mode, select **Discard Draft** to delete the current draft and return to the last published version of the resource. In the pop-up window, select **Discard Draft**.



#### Preview

The **Preview** button is available if the selected resource is in **Draft** mode and attached to a theme.

  1. Click **Preview** to preview the current theme resource in conjunction with one of its assigned themes. The **Preview** window shows the currently selected **Theme**, **Theme Version**, and **Website** on the left.

  2. Click a drop-down to change the respective options. **Preview** mode bundles resources by default.

  3. Click the **YES** toggle to unbundle resources.

    

  4. On the right side of the screen, resources are sorted by type (Styles, Scripts, Views, and Widgets). The current resource automatically is selected; uncheck the checkbox next to a resource to exclude it from the preview, or check the checkbox to include it.

  5. Click **Preview** to preview selected drafts in a new window.

  6. A black bar displays at the top of the preview screen, displaying the theme name, if bundling is on or off, and the number of draft resources currently being previewed.

  7. Click **Cancel Preview** to view the website as normal.

#### Publish

The **Publish** button appears when the theme resource is in **Draft** mode. Add optional revision notes in the pop-up, and click **Publish**.



#### Clone

Click **Clone** to clone the current resource.

Note

Cloning a cloned theme resource is not recommended, as the version history will be inaccurate. Clone from System resources only.

#### Compare

  1. Click **Compare** to compare the current resource version with either a previous version of itself, or with a version of the resource it was cloned from (if applicable).

  2. Select a version type using the radio buttons at the top of the pop-up, then select a resource version using the checkboxes.

    

    Note

    Compare code options are limited to a maximum of 50 versions.

  3. Click **Compare** to open the code in a new window.

    

  4. Any differences between the two selected versions appear in blue. In the above example, a line of code exists in the previous version that was deleted in the subsequent version.

  5. Close the window to return to the Admin Console.

### Details tab

On the **Details** tab of a cloned resource, **Resource Type**, **Language**, and **Cloned From** are set fields and cannot be changed. The cloned resource inherits these field values from the parent resource.



Assign the resource a unique **File Name** (required) and **Group Name** (optional). Group names are for internal reference only, and are helpful in organizing resources in a way that makes sense for your company.

### Code editor tab

  1. Click the **Code** tab to modify the resource's code in the ACE editor. A system resource's code cannot be modified.

  2. Click into the **ACE** editor and begin typing your code. Possible code auto-suggestions appear as text is typed; press the **Tab** key to enter the suggested code.

    

  3. In the upper right corner of the **ACE** editor, click **Upload File**. The uploaded code replaces all of the current lines of code; it does not append the existing code.

    Note

    The ACE editor supports Vim. To enable it, click **More Options** and check the box next to **Vim Mode**.

### Assigned themes

Use the **Assigned Themes** tab to view all resource assigned to the current themes. Click **View Resources** to view the theme. This tab cannot be used to assign the resource to a theme.

### Version history

  1. Click the **Version History** tab to view the resource's current and previous versions.

  2. Select **View Only** to view more information about a version.

    Note

    The version history is limited to a maximum of 30 versions.

  3. The **Version** page lists the resource's title, type, version number, published by/on information, any comments added when the version was published, and the version's code. All of this information is **Read Only**, and may not be changed.

    

  4. Click **Information** next to the version number at the top of the screen to view additional version details, like Created By, Created On, Modified By, Modified On, and Id.

  5. Click **Restore** in the upper right corner of the screen to restore a previous version of the theme resource. If a **Draft** version currently exists, the **Restore** pop-up displays a warning.

  6. Click **Restore & Publish** to restore the version and publish the resource, or click **Restore** to restore the version but leave the resource in **Draft** mode.

    

Note

The **Restore** option appears only if the user selects a version other than the current **Draft** or **Published** version of the resource.