Loading
Salesforce now sends email only from verified domains. Read More
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Apply Custom CSS to a Flexcard Element (Managed Package)

            You are here:

            1. Salesforce Help
            2. Docs
            3. Omnistudio for Managed Packages

            Apply Custom CSS to a Flexcard Element (Managed Package)

            For the managed package runtime, when the design interfaces available in the Style panel of the Flexcard Designer don't meet your design needs, apply custom CSS to your elements. Add custom CSS to edit the internal components of an element or a child element. Use this feature sparingly to optimize performance.

            Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

            Apply classes from style sheets available to the Flexcard, such as the global SLDS and Newport style sheets. Or, apply classes that you create inside the Flexcard Designer with the Add Custom CSS feature. See Create Custom CSS Within the Flexcard Designer (Managed Package).

            example
            example

            Example Grouped Datatable Element with Alternating Background Colors

            You have a Datatable element that displays Account Cases grouped by case Type. You want to show alternating background colors for all rows and set a different background color for the group heading. There is no option in the Style panel for alternating row background colors. But you can enter a class for the group heading. Use the Add Custom CSS feature to create two classes. An alt-table-rows class for the Datatable element, and an alt-bg-group-wrapper class for the group heading.

            FlexCards Add Custom CSS feature: apply classes

            Apply the alt-table-rows class to the element and the alt-bg-group-wrapper class to the group heading.

            1. In the Flexcard Designer, select an element on the canvas.
            2. To apply a custom class to an element, click Style to open the Style panel. From the Custom CSS section, complete one or both of these tasks:

              • To append a custom class to the element's container, enter the class name in the Container Class field, such as branded-tables.

              • To append a custom class directly on the element, enter the class name in the Custom Class field, such as alt-table-rows from the example above.

            3. To apply a custom class to a specific field inside an element, in the Properties panel, enter a class in a field that supports classes.

              For example, from the previous grouped datatable example, enter alt-bg-group-wrapper in the Group Wrapper Class field in the Properties panel of a Datatable element.

            • Flexcards Custom CSS Properties (Managed Package)
              For the managed package runtime, custom CSS properties are configurable from the Style panel in the Flexcard Designer when you select an element. When the design interfaces in the Style panel do not meet your design needs, apply a class from any style sheet available to the Flexcard, or add inline styles.
             
            Loading
            Salesforce Help | Article