Customizing the project style

    Description

    Each asset and collection has one or more associated buttons. Some are universal - like Close, Maximize and Pin - while others are specific to a given element - like Play for a video or Reset for a 3D model. The visual appearance of these buttons can be customized.

    IntuiFace users can either select prebuilt styles or create one of their own.

    Using a prebuilt style

    IntuiFace is preloaded with three project styles. They are:

    • IntuiFace White

    • IntuiFace Black

    • IntuiFace Legacy

    To select one of these styles, do the following in Composer:

    1. Select the menu item Project -> Show Experience Properties
    2. The Properties panel will now be displayed, choose the prebuilt style of your choice.

    ExperienceStyleicons.png

    Creating your own style

    The icons used for each button, the colors and shading used for each button, and assorted other design elements can be customized.

    1. Select the menu item Project -> Show Experience Properties
    2. In the Experience style dropdown list, choose the prebuilt style you would like to be your starting point.

      ExperienceStyleiconschosen.png
    3. In the same Experience style dropdown list, choose the last option, "Create my style"

      ExperienceStyleiconsCreate.png
    4. In the left column, select the button category you would like to customize
      • Display buttons: Close, Minimize, Maximize, Unmaximize, Pin and Unpin
      • Control buttons:
        • Video, Audio and Flash: Rewind, Play, Pause, Mute, Sound 0%-33%, Sound 33%-66%, Sound 66%-100%
        • Scrollable asset controls: Next, Previous
          • For the icon, use an image pointing to the right. This image will be reproduced after rotation by 180 degrees to represent movement to the left. This image will also be used to represent up and down for vertically oriented collections.
        • 3D Model controls: Reset
        • Web Browser controls: Refresh, Stop Loading, Keyboard
      • Tools buttons: All Drawing Tool buttons, Sharing buttons
    5. Customize as required

    Note: Custom styles, once created, cannot be deleted. Deletion will be added in a future release.

    Button Properties

    In addition to the icon itself, you can configure the look of the area surrounding the icon

    • Fill color   color of space surrounding your icon(s)
    • Outline color &nbsp: color of outline around the space surrounding your icon(s)
    • Pressed color   color of a semi-transparent overlay that appears on top of your icons when pressed
    • Checked color   replaces the Fill color for any button with a checked state such as Refresh/Stop Loading for the Web Browser asset.
    • Radius   curvature of the space surrounding your icon(s). A value of 0 results in a box with curved corners. A value of 20 results in a perfect circle.
    • Flat   when deselected, the overall button has a slight three dimensional effect
    • Shadow   when selected, the overall button casts a shadow.

    Overriding a project style

    By default, all assets and collections inherit the style selected at the project level. To override this project-wide style:

    1. Open the All Properties panel for a given asset or collection
    2. In the Appearance, Tools and/or Display buttons categories
      • Make sure one or more of the "Show controls" or "Show buttons" checkboxes are selected
      • Deselect the "Use experience style" checkbox"
        useXpStyle.jpg
    3. A list of button properties appears. Customize the buttons as needed.