Configure a custom sign-in carousel

  • Applies to: All Board Cloud subscriptions

HOW: Set up a custom sign-in carousel

The following steps will guide you through the sign-in page customization process.

 

To add a slide:

  1. Use the “+SLIDE” button to start the configuration process
  2. Choose one from the available templates
  3. Follow the steps outlined in the creation menu: upload your content (images, text or both, depending on the selected template) and select a background color, if applicable.
    Every change will be displayed immediately in the right-hand side preview area

    Slide configuration for BOARD's Sign-in Page
    Click the save icon  on the right to save your slide.
  4. Repeat the process to add new slides as needed, up to 6.

 

By dragging and dropping each row, you can rearrange the slides order except for the first one, which is fixed and cannot be modified.
You can edit or delete existing slides and define the slides transition time (from 2 to 15 seconds).
Click the “PREVIEW” button to see how your custom sign-in carousel looks at any time.
Please note that the carousel is visible before users log-in, so don't upload any sensitive or confidential information.

 

WHAT: Fields formats and information

Depending on which slide template you choose, you will have the following configuration fields available (or a combination of them).

 

User details field name Description Examples
Title
  • Function: sets a title for the slide, shown as per the chosen template
  • Optional
 ACME CORP. PLANNING

Text
  • Function: sets a small description for the slide, shown as per the chosen template
  • Optional
 The planning has been officially release for all managers
Image
  • Function: sets a custom image for the slide, shown as per the chosen template
  • Optional
  • Supported formats: jpg, png, gif files
  • Image guidelines
    • Maximum file size: 600 KB
    • Suggested resolution: 1920x1080 pixels
 -
Background color
  • Function: sets a solid background color for the slide
  • Default value: rgba(196, 196, 196, 1)
  • Default format: RGBA
    Any other supported color code/name will be converted into RGBA format
  • Supported color codes/names:
    • RGB
      Syntax: rgba(r,g,b)
      "r", "g", "b" are the decimal values for the red, green, and blue values of the color on the range 0 to 255
    • RGBA
      Syntax: rgba(r,g,b,a)
      "r", "g", "b" are the decimal values for the red, green, and blue values of the color on the range 0 to 255
      "a" is the opacity of the color (a = 0 = transparent; a = 1 = opaque)
    • Hex
      Syntax: #RRGGBB
      "RR", "GG", "BB" represent the colors red, green, and blue, in hexadecimal format (accepted values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and letters A through F)
    • CSS color names: 140 color names supported by modern browsers. The full list can be found here

RGB: rgb(145, 196, 182)
RGBA: rgba(145, 58, 124, 1)
Hex: #ed0909
CSS color name: DarkGreen