Custom Theme Interface/Copying a Standard Theme Tutorial

Step 2: Click on the Standard Themes tab.

Step 3: Click on the Standard Theme you'd like to copy.

NOTE: If you hover over the theme you'd like to copy, you'll notice that a "copy this theme" pop up shows up, and the small paper icons for copying show up as well.

A: Home: Clicking this option will bring you back to your survey dashboard (for quick navigation switches).

This can be helpful if you realize you need to get back to your surveys or Libraries while you're in the middle of customizing your custom theme.

B: Settings Tab: The settings tab is the location of the basic information for your custom theme. You can use this tab to name your custom theme, give it a description, and even upload a thumbnail.

NOTE: This used to be at the very top of your Custom Theme Editor.

C: Template Tab: This tab allows you to edit the HTML template of your survey. You can go in and manually update the HTML, configure which options you'd like to be available on your Distribute-->Default Theme-->Customize-->Options tab, and access our easy to use merge code dropdown menu to really customize your HTML template how you'd like it to be.

NOTE: We highly recommend only adjusting this section if you are highly experience with HTML.

D: Styles Tab: This tab allows you to edit the Theme Styles(CSS) of your survey. You can go in and manually update the CSS, configure which options you'd like to be available on your Distribute-->Default Theme-->Customize-->Colors tab, and access our easy to use merge code dropdown menu to really customize your Theme Styles how you'd like it to be.

NOTE: We highly recommend only adjusting this section if you are highly experience with CSS.

E: Images Library Tab: This tab will show you a thumbnail, and source link for images in your file library. This will give you easy access to images that you'd like to hardcode into your Theme template.

NOTE: If you scroll down the list, it will continue to populate more images.

F: Editing Theme: This section of the navigation bar will advise you which theme you're looking at.

TIP: If you're working on multiple themes at once, we recommend keeping an eye on this section (to make sure you're editing the proper theme).

G: Page Preview: This section will allow you to navigate through the pages of your simulation survey.

TIP: Moving to other page can help you check things like whether or not your "back button" is turned on or off.

A: Theme Name: This section allows you to name your theme so you can easily identify when applying it to your survey.

B: Theme Description: This theme description is for internal use only. It doesn't appear anywhere on your theme, but can be used to add a quick description of the theme for your colleagues who also work in the account.

C: Theme Thumbnail: You have the option to upload a theme thumbnail so that when you try to add your custom theme to your survey, you can differentiate it by the thumbnail. This will show up on your Distribute tab under the Look n' Feel (themes) section.

 A: Template Options:  Each one of your Template Options Corresponds with a merge code that your theme template uses to display different items. Using merge codes are helpful because it means you don't have to hard code an image, you can till use the "Logo/Image" option inside your survey itself. If you have various options checked in this Template tab, those options will be customizable (can be turned on or off) in the survey's Distribute-->Default Theme-->Options/Images section.

For example: If you uncheck "Progress Bar" from this theme, when you go into the Distribute-->Default Theme->Options (and Images for Logo), the option to turn on and off the Progress bar will no longer be there.

B: Theme Template: This section of your Theme Template is where the HTML of your theme is housed. You can adjust where certain things are placed (within the footer, header, or the body of the theme template), and delete or add things at your leisure. We highly recommend only adjusting this section if you are highly experienced with HTML.

C: Toggle Full Screen: This option allows you to expand the Theme Template tab to fill your entire screen.

D: Merge Codes: This dropdown menu will allow you to choose the different type of merge codes you'd like to use when customizing your HTML template. It will display the merge code to the right, and allow you to copy and paste it into the HTML template wherever you'd like. NOTE: These merge codes were previously populated by a green arrow. Their new location will be easier for you to copy and paste into the desired location.

Non-configurable HTML Options: These options are still available under the "MERGE CODES" dropdown menu. They are not part of your usual Theme Options under Distribute-->Default Theme-->Options. You cannot turn them on or off once you're in your survey. You can however add them to, or delete them from different sections of your theme template if you'd like.

For Example: If you find that you want to move the Submit or Next Button higher up in the survey, you can do so using these options.

E: Keep Panels Open: Normally, when you click "save" on this tab, it will close the overall Template tab so you'll have to open it again before making more adjustments. This checkbox allows you to keep working on the code by keeping the tab open even while the background preview is refreshing.

A: Style Options: Each one of your Style Options corresponds with a merge code that your theme template uses to display different items. Using merge codes are helpful because it means you don't have to hard code the colors into the theme itself.

If you have various options checked in this Styles tab, those options will be customizable (can be turned on or off) in the survey's Distribute-->Default Theme-->Colors/Options section.

For Example: If you find that you want to change the default colors that are listed in your Color section of the Distribute->Default Theme-->Colors area, you can do so by changing them here. Also, if you have a user that you do not want to be able to change the colors of your theme, except for the Question Title and Progress Bar color you can turn off all other options but those.

You'll notice in the image below, since all of the other colors are turned off, when you go to your "colors" tab, there are only 2 listed.

B: Theme Styles (CSS): This section of your Theme Styles is where the CSS version of your theme is housed. You can adjust where certain things are placed (within the footer, header, table elements, body, etc of the theme template), and delete or add things at your leisure. We highly recommend only adjusting this section if you are highly experienced with CSS.

C: Toggle Full Screen: This option allows you to expand the Theme Template tab to fill your entire screen.

D: Merge Codes: This dropdown menu will allow you to choose the different type of merge code you'd like to use when customizing your theme styles. It will display the merge code to the right, and allow you to copy and paste it into the HTML template wherever you'd like. NOTE: These merge codes were previously populated by a green arrow. Their new location will be easier for you to copy and paste into the desired location.

Non-configurable CSS Options:

These options are still available under the "MERGE CODES" dropdown menu. However, they are not part of your usual Theme Options under Distribute-->Default Theme-->Options/Colors. You cannot turn them on or off once you're in your survey. You can however add them to, or delete them from different sections of your theme template if you'd like.

The only non-configurable CSS option is the Color Mixer. This merge code will all you to dynamically blend two colors to make a third in your template. This merge code uses three parameters:

from — can be a hexadecimal value, or the name of another color merge code
to — can be a hexadecimal value, or the name of another color merge code
amount — value between 0 and 1, used as a percentage. Example: .5 = 50%

E: Keep Panels Open: Normally, when you click "save" on this tab, it will close the overall Styles tab so you'll have to open it again before making more adjustments. This checkbox allows you to keep working on the code by keeping the tab open even while the background preview is refreshing.

A: Resources In My File Library: This section will show you a thumbnail of your images, their file name and size, and the source link to them. You can copy and paste these links to use inside of your Template or Styles tab

B: Upload...: This option allows you to upload a file to the file library, which will show up directly on your Theme Image Library tab. This way you can have access to whatever image you need right away.

C: Open My File Library: If you need to go to your file library for any reason (perhaps you need to upload multiple images at once) you can do so by clicking on this option. It will open your file library in a new tab.