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
Go to **Admin Console** \>**Themes & Content** \> **Theme Resources**.
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.
This screen also displays the **File Name**, **Group**, **Language**, and **Status** (either Published or Draft).
Search for a resource using the **Search Bar** at the top of the page.
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.
Click **Delete** at the top of the screen to delete a theme resource. System resources cannot be deleted.
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
Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**
Click **View Only** next to a theme.
Click **Clone**.
Assign the resource a File Name on the **Details** tab, and click **Save**.
Modify the other resource tabs as needed.
### Create a new theme resource
Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**
Click **Add Theme Resource**.
Select a **Resource Type** (Style, Script, or View) and the corresponding **Resource Language.**
Select **Create** to create a new blank resource, or select **Upload** to upload a file.
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.**
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.
Go to **Admin Console** \> **Themes & Content** \> **Theme**.
Click **Edit** to edit an existing Theme.
Click the **Styles** or **Scripts** finger tab and click **Add Styles** or **Add Scripts**.
In the **Add Style** or **Add Script** pop-up, click **Link External.**
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.
Go to **Admin Console** \> **Themes & Content** \> **Theme Resources**
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.
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.
Click a drop-down to change the respective options. **Preview** mode bundles resources by default.
Click the **YES** toggle to unbundle resources.
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.
Click **Preview** to preview selected drafts in a new window.
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.
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
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).
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.
Click **Compare** to open the code in a new window.
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.
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
Click the **Code** tab to modify the resource's code in the ACE editor. A system resource's code cannot be modified.
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.
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
Click the **Version History** tab to view the resource's current and previous versions.
Select **View Only** to view more information about a version.
Note
The version history is limited to a maximum of 30 versions.
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.
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.
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.
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.