Links

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.