Customizing Uploader Styling

Custom Button Styling

Osmos supports setting custom styling on the button element of an uploader. This can be done either by setting a style property on the element itself or via css with the .ftl-button class.

Themes

You can change the theme of Osmos Uploaders. To configure the theme, please add this section into your code snippet embedded in your HTML:

 <script>
  Osmos.configure({
    theme: {
      colors: {
        primary: "#1888e2",
        secondary: "#ffd626",
        success: "#38d800",
        warning: "#fba21d",
        error: "#ef2929",
  },
  fonts: {
    body: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
    },
    h1: {
      fontFamily: "'Beatrice', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
      fontSize: 24,
      lineHeight: '36px',
      marginBottom: '16px',
    },
    h2: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
    },
    h3: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
    },
  },
  buttons: {
    borderRadius: '4px',
  },
},
   schema: {
     // continue with Uploader snippet
    }
  })
</script>

Theme Notes

• Each of the styling fields are optional

• For the font body and headers, any CSS property can be used to customize them such as fontFamily, marginTop, marginBottom, padding, lineHeight, fontSize, and fontWeight.

• The colors must be a valid CSS color Hex, HSL or RGB in the following formats: "#nnn", "#nnnnnn", "rgb()", "rgba()", "hsl()", or "hsla()". For example, "#32A852" or "hsl(46, 100%, 50%)".

• Spinner colors are tied to the primary color.