DocumentationAEM as a Cloud ServiceUser Guide

Creating and using themes creating-and-using-themes

Last update: Tue Dec 12 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Version
Article link
AEM 6.5
Click here
AEM as a Cloud Service
This article

You can create and apply themes to stylize an Adaptive Form. A theme contains styling details for the components and panels. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply a theme, the specified style reflects on the corresponding components. Theme is managed independently without a reference to an Adaptive Form.

You can download and install AEM Forms reference content package from Software Distribution portal to import reference themes and templates to your environment.

Creating, downloading, or uploading a theme creating-downloading-or-uploading-a-theme

A theme is created and saved as a separate entity, complete with meta-properties like Adaptive Forms. It allows reusing a theme in multiple Adaptive Forms. You can also move a theme to a different instance and reuse it.

Creating a theme creating-a-theme

To create a theme:

  1. Click Adobe Experience Manager, click Forms, and click Themes.

  2. In the Themes page, click Create > Theme.
    A wizard to create a theme is launched.

  3. Specify Name of the theme.

  4. Specify a form to preview the theme in the Default Preview for this Theme field. Click Use Default to use the default form to preview the theme.

  5. Specify a Configuration Container. You can choose a Configuration Container that contains configuration details of Adobe Font for your account. You can also leave the option blank for now and specify the details later from theme properties.

  6. Click Create and then click Edit to open the theme in Theme Editor, or click Done to return to the themes page.

Difference from themes on Experience Manager 6.5 Forms and previous versions difference-in-themes

Themes created on a Cloud Service instance:

  • Have version number 2.

  • Are stored at /content/dam/formsanddocuments-themes/<theme-name>/

  • Do not provide client-library option. You cannot specify a client library category and path.

  • Do not have write and update permissions on /apps location (Forms-user group does not have write and update permission on /apps location).

  • Before uploading a theme created on Experience Manager Forms 6.5 or previous versions to a Cloud Service instance, ensure that the client library location is set to etc/clientlibs/fd/themes. If the client library does not exist in the etc folder, manually update the location to etc/clientlibs/fd/themes. You can make the change on your Experience Manager Forms 6.5 or previous versions instance. After setting the location of the client library, an administrator can upload themes to the Cloud Service instance or use the Content Transfer Tool to migrate the themes from 6.5 or previous version instances to the Cloud Service instance.

    Also, change the name of the category. If the name is not changed, an error theme with same category name exists might occur. When you change the category name, it does not impact the Adaptive Forms that use the theme.

Downloading a theme downloading-a-theme

You can export themes as a zip file and use these themes in other projects or Experience Manager instances. To download a theme:

  1. Click Adobe Experience Manager, click Forms, and then click Themes.

  2. In the Themes page, Select a theme, and click Download. A dialog box with the details of the theme is displayed.

  3. Click Download. The theme is downloaded as a zip file.

NOTE
If you download a theme that has an Adaptive Form associated to it and the associated Adaptive Form is based on a custom template, then also download the custom template. When you upload the downloaded theme and Adaptive Form, then upload the related custom template also.

Uploading a theme uploading-a-theme

A user with administrator privileges can upload a theme that is created in Experience Manager Forms 6.5 or earlier versions.

To upload a theme:

  1. Click Adobe Experience Manager, click Forms, and then click Themes.

  2. In the Themes page, click Create > File Upload.

  3. In the File Upload prompt, browse and select a theme package on your computer and click Upload.
    The uploaded theme is available in the themes page.

Metadata of a theme metadata-of-a-theme

List of meta-properties of a theme (found in properties page of a theme).

ID
Name
Can be edited
Property Description
1.
Title
Yes
Display name of the theme.
2.
Description
Yes
Description about the theme.
3.
Type
No
  • Type of asset.
  • Value is always Theme.
4.
Created
No
Date of the theme creation
5.
Author Name
Yes
Author of the theme. Computed at the time of theme creation.
6.
Last Modification Date
No
Date when the theme is last modified.
7.
Status
No
Status of the theme (Modified/Published).
8.
Publish On Time
Yes
Time to automatically publish the theme.
9.
Publish Off Time
Yes
Time to automatically unpublish the theme.
10.
Tags
Yes
A label attached to the theme for identification used to improve searching.

About the Theme Editor about-the-theme-editor

Theme Editor is a business-user and web-designer/developer friendly interface that provides functionalities required to specify the styling of various Adaptive Form elements easily. When you create a theme, it is stored as a separate entity like forms .

The Theme Editor lets you customize styles of the components styled in a theme. You can customize how a form looks on a device.

The Theme Editor is divided in two panels:

  • Canvas - Appears on the right side. It shows a sample Adaptive Form in which all styling changes reflect instantly. You can also select objects directly from the canvas to look up styles associated with them, and to edit these styles. A device resolution ruler on the top governs the Canvas. Selecting a resolution breakpoint from the ruler shows the preview of the sample form for the respective resolution. Canvas is discussed in detail below.

  • Sidebar- Appears on the left side. It has the following items:

    • Selector: Shows the component selected for styling, and its properties that you can style. The selector represents all the components of a type. If you select a text box component in a theme for styling, all the text boxes in your form inherit the style. Selectors let you select a generic component or a specific component for styling. For example, a field component is a generic component, and a text box is a specific component.

      Styling generic component:
      A field can be a numeric box field, such as age, or a text box field, such as address.
      When you style a field, all the fields such as age, name, address are styled.

      Styling specific component:
      A specific component impacts objects of the specific category. When you style the numeric box component in the theme, only the numeric box object in inherit the style.

      For example, a text box field such as address which is longer and a numeric box field such as age is shorter. You can select a numeric box field, reduce its length, and apply to your form. Width of all numeric box fields is reduced in your form.

      When you customize all the field components with a specific background color, all the fields such as age, name, and address inherit the background color. When you select a numeric box, such as age, and reduce its width, width of all the numeric boxes such as age, number of people in a family is reduced. Width of text boxes is not changed.

    • State: Lets you customize styles of an object in a specific state. For example, you can specify appearance of an object when it is in default, focus, disabled, hover, or error state.

    • Property Categories: Styling properties are divided in various categories. For example, Dimension & Position, Text, Background, Border, and Effects. Under each category, you provide styling information. For example, under Background, you can provide Background Color, and Image & Gradient.

    • Advanced: Lets you add custom CSS to an object, which overrides the properties visual controls define if there is an overlap.

    • View CSS: Lets you view CSS of the selected component.

    Also, in the Sidebar, at the bottom an arrow is present. When you click the arrow, you get two more options: Simulate Success and Simulate Error. These options, along with the options described above are discussed in detail below.

Theme editor A. Sidebar B. Canvas

Styling components styling-components

You can use a theme in multiple Adaptive Forms, which imports the component formatting that you have specified in the theme. You can style various components such as titles, description, panels, fields, icons, and text boxes. Use widgets to configure component properties in a theme. Prior knowledge of CSS or LESS is not required but desired, though the CSS Overrides section lets you write CSS code or provide custom selectors. The CSS Overrides section appears when you select a component in the sidebar.

Stylable components in the sidebar

Options in sidebar that let you select and style different components.

Clicking edit button against a component in the sidebar selects the component in Canvas, and lets you style the component using options in the sidebar.

Certain components like text box, numeric box, radio button, and check box are categorized under generic components like Field. For example, you want to customize styling of radio buttons. To select radio buttons for styling, select Field > Widget > Radio Button.

Styling panel layouts styling-panel-layouts-br

Themes in AEM Forms support styling of elements in the layout of panels in your forms. Styling of elements in out-of-the-box layouts and custom layouts is supported.

Out-of-the-box panels include:

  • Tabs on left

  • Tabs on top

  • Accordion

  • Responsive

  • Wizard

  • Mobile layout

    • Panel titles in header
    • Without panel titles in header

Selectors vary for each layout.
Styling custom layouts from the Theme Editor involves:

  • Defining the components for a layout that can be styled, and CSS selectors for uniquely identifying these components.
  • Defining the CSS properties that can be applied on these components.
  • Define the styling for these components interactively from the user interface.

Different styles for different screen sizes different-styles-for-different-screen-sizes-br

Desktop and mobile layouts can have slightly or entirely different styles. For mobile devices, tablet and phone share similar layouts except for component sizes.

Use Theme Editor breakpoints to define alternate styling for different screen sizes. You can select a base device or resolution on which you start building the theme, and the styling variations for other resolutions are automatically generated. You can explicitly modify the styling for all the resolutions.

NOTE
The theme is first created using a form, and then applied on different forms. The breakpoints used in theme creation can be different from the form on which the theme is applied. The CSS media queries are based on the form used in theme creation, and not the form on which the theme is applied.

Styling properties context changes in sidebar on selecting objects styling-properties-context-changes-in-sidebar-on-selecting-objects

When you select a component in the Canvas, its styling properties are listed in the sidebar. Select the object type and its state, and then provide its styling.

Recently used styles in Theme Editor recently-used-styles-in-theme-editor

Theme editor caches up to ten styles applied to a component. You can use the cached styles with other component of a theme. Recently used styles are available right below the selected component in sidebar as a list box. Initially, the recently used styles list is empty.

Asset-library

As you style a component, the styles are cached and listed in the list box. In this example, the label of the text box is styled to change the font size and color. You can follow similar steps for choosing an image or changing colors to style a component. Observe how the style is cached and listed in the list box when the field label styling is changed.

Font style cached for a component available for another

In this example, style for the field label is changed, and when Responsive Panel Description is selected for style, a list entry is added in the asset library. The entry in the asset library can be used to change the style for Responsive Panel Description.

When a style is added in the asset library, it is available for other themes and in the style mode of the form editor UI. Similarly, when you use the style mode of the form editor UI to style a component, the style is cached and is available in themes.

The plus button against the asset library lets you permanently save the style with a name of that you provide. The plus button saves the style even if you do not click the Save button in the sidebar to apply the style to a component. The plus button to save a style for later use is not available in the style mode.

Providing a custom style name for asset library

When you provide a custom name for a style, the style is tied to a theme and is no longer available to other themes. To delete a saved style:

  1. On the CANVAS toolbar, click Theme Options theme-options > Manage Styles.

  2. In the Manage Styles dialog, select a saved style, click Delete.

    Delete the saved style

Live preview, save, and discard changes live-preview-save-and-discard-changes

Modifications made in the styling are instantly reflected in the form loaded in the Canvas. Live preview lets you interactively define and see the impact of the styling. When you change the styling of a component, the Done button is enabled in the sidebar. To retain changes, use the Done button.

NOTE
When an invalid character is entered in a field, the field boundary color changes to red and an error message is displayed at the top-left corner of the screen. For example, if you enter alphabets in a textbox which accepts numeric characters as inputs, the input box boundary color changed to red. You cannot save such a theme without resolving the error displayed at the center bottom of the screen.

Theme with another Adaptive Form theme-with-another-adaptive-form

When you create a theme, it is created with a form that is shipped with the Theme Editor. You provide styling for components in this form. Instead of the form that is shipped with the Theme Editor, you can select a form of your choice to provide styling and preview its results.

To replace the current form or in Theme Editor Canvas:

  1. In the THEME EDITOR panel, click Theme Options theme-options > Configure.

  2. In the General tab, browse and select a form for the Adaptive Form field.

Redo/Undo redo-undo

You can undo or redo the undesired changes that occur accidentally. Use the redo/undo buttons in the Canvas.

Redo and undo actions

Redo/undo buttons appear when you style a component in the Theme Editor.

Using the Theme Editor using-the-theme-editor

The Theme Editor lets you edit a theme you created or uploaded. Navigate to Forms & Documents > Themes, and select a theme and open it. The theme opens in the Theme Editor.

As discussed above, the Theme Editor has two panels: Sidebar and Canvas.
Theme-editor

Customizing the success state styling of Text Box Widget component in Theme Editor. Component is selected in Canvas, and its state is selected in the sidebar. Styling options available in the sidebar are used to customize the look of a component.

Using Canvas using-canvas

The theme is either created using the out-of-the-box form, or using a form of your choice. The Canvas shows the preview of the form or used for creating the theme with customizations specified in theme. The ruler above the form is used for determining the layout according to the size of the display of your device.

In the Canvas toolbar, you see:

  • Toggle Side Panel toggle-side-panel : Lets you show or hide sidebar.

  • Theme Options theme-options : Provides three options

    • Configure: Provides options to select the preview form and Adobe Fonts configuration.
    • View Theme CSS: Generates CSS for the selected theme.
    • Manage Styles: Provides options to manage text and image styles
    • Help: Runs an image guided tour of the Theme Editor.

  • Emulator ruler : Emulates the look of your theme for different display sizes. A display size is treated as a breakpoint in the emulator. You can select a breakpoint and specify a style for it. For example, Desktop and Tablet are two breakpoints. You can specify different styles for each breakpoint.

When you select a component in the Canvas, you see the component toolbar on top of it. The component toolbar lets you select components, or switch to generic components. For example, you select a numeric text box in a panel. You see the following options in the component toolbar:

  • Numeric Box Widget: Lets you select the component to customize its look in sidebar.

  • Field Widget: Lets you select the generic component for styling. In this example, all text input components (text box/numeric box/numeric stepper/date input) are selected for styling.

  • field-level : Lets you select the parent component for styling. If you select numeric box and select this icon, field component is selected. If you select field component and select this icon, panel is selected. If you keep tapping this icon for selection, you end up selecting the layout for styling.

NOTE
The options available in the component toolbar vary based on the component you select.

Using Sidebar using-rail

The sidebar in theme editor provides options to customize styles for components in a theme, and use selectors. Selectors let you select a group of components or individual components, and you can search for selectors in the sidebar. You can write selectors for custom components.

When you select a component from the Canvas or selectors in sidebar, the sidebar shows all the options that let you customize styles for it.
Below are the options you see in the sidebar when you select a component:

  • State
  • Property sheet
  • Simulate Error/Success

State state

A state is an indicator of user interaction with a component. For example, when a user enters erroneous data in a text box, the state of the text box changes to an error state. Theme editor lets you specify styling for a particular state.

Options for customizing state styles vary for different components.

Property sheet property-sheet

Property
Use
Dimensions & Position

Lets you style alignment, size, positioning, and placing of components in the theme.

Your options are display setting, padding, margin, width, height, and Z Index.

You can also use the Layout mode to define the width of components using an easy drag-and-drop interface. For more information, see Use Layout mode to resize components.

Text

Lets you customize the text styles in the component of the theme.

For example, you want to change how the text entered in the text box looks.

Your options are font family, weight, color, size, line height, text align, letterspacing, text indent, underline, italics, text transform, vertical align, baseline, and direction.

Background
Lets you fill the background of the component with an image or a color.
Border

Lets you choose how the border your component looks. For example, you want the text box to have a deep red, thick border with a dotted line.

Your options are width, style, radius, and color of the border.

Effects
Lets you add special effects to the components such as opacity, blend mode, and shadows.
Advanced

Lets you add:

  • Properties for ::before and ::after pseudo elements to add content after or before default content in the selector, and style it.
    See CSS Pseudo-elements.
  • Custom CSS code inline to a component.

When you add a custom CSS code, it overrides the customization you added using the options in the sidebar.

Simulate Error/Success simulate-error-success

Simulate Error and Success options are available at the bottom of the sidebar. You can see them using a show/hide arrow visible at the bottom of the sidebar. Using Theme Editor, you can style various states of a component.

For example, you add a numeric field in your form, and you specify its styling in theme editor. When a user types an alphanumeric value in the field, you want the background color of the text box to change. You select the numeric field in the theme, and use the state option in the sidebar. You select the Error state in the sidebar, and change the background color to red. To preview the behavior, you can use the Simulate Error option available in the sidebar. Simulate Error and Success options are described in detail below:

  • Simulate Success:
    Lets you see how a component looks if you specify its styling for success state. For example, in a form, customers set password. Users can set password according to guidelines you provide. When a user types a password following all the guidelines you provide, the text box turns green. When the text box turns green, it is in success state. You can specify styling for a component in success state, and simulate its appearance using the Simulate Success option.

  • Simulate Error:
    Lets you see how a component looks if you specify its styling for error state. For example, in a form, customers set password. Users can set password according to guidelines you provide. When a user types a password which does not follow all the guidelines you provide, the text box turns red. When the text box turns red, it is in error state. You can specify styling for a component in error state, and simulate its appearance using the Simulate Error option.

Styling a component styling-a-component

For example, in your form, you have two types of text boxes: one that accepts numeric values only, and other that accepts alphanumeric values. You can customize styling for the text box that accepts numeric values only (a numeric box).

To customize styling for a particular component (a numeric box in this example), perform the following steps:

  1. In the Theme Editor, select the numeric box in the Canvas.

  2. When you select the numeric box, you can see the component toolbar with three options:

    • Numeric Box Widget
    • Field Widget

  3. Select Numeric Box Widget.

  4. Sidebar title changes to Numeric Box Widget, and shows options to customize its look.
    Use Dimension & Position option in the sidebar to customize size of the component. Ensure that the State is Default.

Instead of selecting Numeric Box Widget, select Field Widget in the component toolbar, and perform the steps above. When you select dimensions for Field Widget option, all the text boxes except the numeric box have the same size.

Styling fields for a given state styling-fields-given-state

With component toolbar, you can also specify styling of components for its different states. For example, if a component is disabled, then it is in a disabled state. Commonly used states of a component that you can style in theme editor are: Default, Focus, Disabled, Error, Success, and Hover. You can select a component in the Canvas and use the State option in sidebar to customize its look.

To customize styling for a component in a specific state, perform the following steps:

  1. Select a component in the Canvas, and select appropriate option from the component toolbar.
    Sidebar shows options to customize styling for the component.
  2. Select a state in the sidebar. For example, Error state.
  3. Use options such as Border, Background in the sidebar to customize how the component looks.
  4. Use the Simulate Error option at the bottom of the sidebar to see how the styling looks in editing.

When you customize the styling of a component after specifying its state, the customization appears for the component only for the specified state. For example, if you customize styling for the component when hover state is selected. The customization appears for the component when you move your pointer over the component in the rendered form to which you apply the theme.

To simulate behavior of states other than error and success, use Preview mode. To use Preview mode, click Preview in the page toolbar.

Styling layouts for smaller displays styling-layouts-for-smaller-displays

Use ruler in Canvas to select breakpoints for devices with smaller displays. Click emulator ruler in Canvas to view ruler and breakpoints. The breakpoints let you preview a form for display sizes pertaining to different devices such as phones and tablets. Multiple display sizes are supported in Theme Editor.

To style components for different breakpoints:

  1. In the Canvas, select a breakpoint above the ruler.
    A breakpoint represents a mobile device and its display size.
  2. Use sidebar to customize styling of form components in the theme for the selected display size.
  3. Ensure that the customization is saved.

You can style form components for multiple devices. Form components for desktops and mobile devices can have entirely different styles.

Using Web Fonts in a theme using-web-fonts-in-a-theme

You can now use fonts available in a web-service in an Adaptive Form . Out-of-the-box, Adobe Fonts, Adobe’s web font service, is available as a configuration. To use Adobe Fonts, create a kit, add fonts in it, and obtain the Kit ID from Adobe Fonts.

To configure Adobe Fonts in Experience Manager, perform the following steps:

  1. In the author instance, click Adobe Experience Manager Adobe Experience Manager > Tools hammer > Deployment > Cloud Services.

  2. On the Cloud Services page, navigate to and open the Adobe Fonts option. Open the configuration folder, and click Create.

  3. On the Create Configuration dialog, specify a title for the configuration, and click Create.

    You are redirected to the configuration page.

  4. In the Edit Component dialog that appears, provide your Kit ID and click OK.

To configure a theme to use the Adobe Fonts configuration, perform the following steps:

  1. On the author instance, open a theme in the theme editor.

  2. In the theme editor, navigate to Theme Options theme-options > Configure.

  3. In Adobe Fonts Configuration field, select a kit, and click Save.

    Now, you can see that the fonts are added in the font-family property of the theme.

Selecting fonts in theme editor selecting-fonts-in-theme-editor

You can use the + button to add a font. When you add a font, it gets listed in the sidebar.

New font listed in the theme editor

In addition to the theme configuration option, you can also add your font from the theme editor itself. Type the font you want to use in the font family field under sidebar and press the return key on your keyboard.

Typing and selecting font in theme editor

When you select a font, it is added under the font family list. You can use the Mask option in theme editor to disable or enable the listed fonts.

Multi-fonts

You can see the component font change.

The Font Family field supports multiple fonts. When you type a font, browser looks for it and applies it to the selected component. If the browser cannot find a font, it looks for a font that is next to it in the family. You can start with typing the specific font you are looking for. If you do not find the font you want to use, you can type a generic font in the family and use it.

Mask styles applied in theme editor mask-styles-applied-in-theme-editor

You can mask styles applied in a theme. In the theme editor sidebar, you can use the toggle_eye icon to disable an applied style. For example, if you change dimensions of a component in a form , then you can use the mask button on the left of a property to disable it. When you save a theme, the selected masking options are retained.

Mask option available in theme editor sidebar

The example below shows masked and unmasked styles in a theme.

Masked and unmasked stylings

Applying a theme to a form applying-a-theme-to-a-form-or-interactive-communication-br

To apply a theme to an Adaptive Form:

  1. Open your form in edit mode. To open a form in edit mode, select a form and click Open.

  2. In the edit mode, select a component, then click field-level > Adaptive Form Container, and then click cmppr .

    You can edit properties of your form in the sidebar.

  3. In the sidebar, click Styling.

  4. Select your theme from the Adaptive Form Theme drop-down and click Done check-button .

You can also define a theme for an Adaptive Form when you are creating it.

Change theme of a form at runtime change-theme-of-a-form-at-runtime

A theme styles different components of a form. You can use the themeOverride property to dynamically change theme of a form. A typical URL of a form is:

https://<server>:<port>/content/forms/af/test.html

You can use the themeOverride parameter to apply a theme on the runtime.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

The themeOverride option lets you provide a path to a theme. It changes the theme of the form and refreshes the form with updated styles.

Getting specific appearance using Themes specific-af-appearance

With AEM Forms, along with default out-of-the-box canvas theme, there are many other themes. If you want to design your form using other themes, along with more changes, copy the theme from Theme Library folder. Paste the copied themes outside the Theme Library folder, and edit the copied theme according to the changes you want.

To copy a theme, perform the following steps:

  1. In authoring instance, navigate to Adobe Experience Manager > Forms > Themes.
  2. Open the Theme Library folder.
  3. In the Theme Library folder, hover pointer over the corresponding out-of-the-box theme and select Copy.
  4. Paste the copied theme outside the Theme Library folder.
  5. Customize the copied theme.

After you customize the theme, apply it to your form .

NOTE
Do not modify the themes available in the Theme Library folder. This folder contains system themes. Any change you made to these themes are overwritten on installing a newer version or hot fix of AEM Forms.

Impact on other Adaptive Form use cases impact-on-other-adaptive-form-use-cases

  • Publish/unpublish a form: On publishing a form, theme applied to is also published (if it is not already published)
  • Import/Export a form: On importing or exporting a form, its associated theme is also automatically imported or exported.
  • References of a form: The Refers section in form references contains an extra entry for the theme.
  • Last Modification time of a form: Updated when the associated theme is changed.

CSS generation sequence css-generation-sequence

When you select view CSS, Theme Editor collects all the styling information, and builds a CSS. It collects information in the following order:

  1. User-defined styling, specified using the properties in the sidebar.
  2. CSS style provided using CSS Override option.

For example, background color of a textbox is blue. You change it to pink using the properties in the sidebar. When you generate CSS, you see background color of the text box as pink. After changing the background color using the properties, another author uses CSS override option to change the background color text box as white. When you generate CSS, you see background color as white in the generated CSS.

Debugging styles debugging-styles

When you specify styles for components in Theme Editor, a CSS is generated. When you style a generic component, multiple components included in it are also styled. For example, when you style a field, the text box and label in it are also styled. When you style the text box within the field, it gets its own CSS. If you want to debug the CSS generated for the field and the component, Theme Editor provides options that let you view CSS.

You can see the generated CSS using the following options:

  • View CSS option in the sidebar: When you select a component in the Theme, you can see the VIEW CSS option in the sidebar. It shows the generated CSS, including CSS for ::before and ::after pseudo elements.
  • View Theme CSS option in the canvas toolbar: In the Canvas Toolbar, click theme-options > View Theme CSS. You can see the entire theme CSS generated from the properties you define in the Theme Editor.

Troubleshooting, recommendations, and best practices troubleshooting-recommendations-and-best-practices

  • Avoiding assets from another Theme

    When you edit a theme, you can browse and add assets (such as images) from other themes. For example, you are editing the background of a page. For example, when you select Page edit-button > Background > Add > Image, you see a dialog that lets you browse and add images in other theme.

  • You can face issues with your current theme if an asset is added from another theme, and the other theme is moved or deleted. It is recommended that you avoid browsing and adding assets from other themes.

    code language-none 
    You can also create a theme, create copies of it, and then modify the styling provided in the copied themes for similar use-cases.
See [Getting specific appearance using Themes](#specific-af-appearance)

    • Theme Editor:

      The Theme Editor lets you create themes to style your form . You can specify styling of components in a theme, that enable consistency in look and feel among multiple forms you develop. Specifying styling information in a theme, and then applying the theme to a form is recommended.

    • Inline styling:

      You can style components using the Style mode in form multichannel editor when you work with a form. Using style mode to change form component styling overrides the styling specified in the theme. If you want to change styling for certain components of a particular form, see Inline styling of components.

  • Changing container panel layout width

    Changing container panel layout width is not recommended. When you specify width of a container panel, it becomes static and does not adapt to different displays.

  • When to use form editor or theme editor for working with header and footer

    Use theme editor if you want to style header and footer using styling options such as font style, background, and transparency.
    If you want to provide information such as a logo image, company name in header, and copyright information in the footer, use the form editor options.

See Also see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab