How Can We Help?

Applying a theme and adding icons or graphics

You are here:
  • Main
  • Layout
  • Applying a theme and adding icons or graphics
< All Topics

 

You have 3 options for styling and adding graphical elements to your forms. You can choose one or a combination of all of them to achieve the design you need.

  • Theme

    Within the Setting screen of the Sintel Forms Designer you can define a custom theme to apply to your form that matches your organisations branding guidelines.

  • Custom Icons

    You can use the built-in FontAwesome support to add an icon to any sections from the thousands of icons available.

  • Custom Graphics

    You can use the “Custom HTML” property of a section to embed images or your company logo.

 

Applying a theme

The effective way to improve the visuals of your Form is by applying the theme. The global Theme settings can be found in the Settings screen. Once you have defined a Theme it’s settings are applied for every new section and field placed on the layout.

 

Theme

 

Notice that the option ‘Inherited’ is enabled. That means that every change made to the global Theme settings will be automatically applied for this section/field. You can always disable this if necessary or manually override it by simply making changes to the typography/colors directly on the layout screen.

 

Adding Icons

  1. Launch the Sintel Forms Designer and click on the section in which you want to add an icon.
  2. Within the “Icon” property type the name of an icon to start seeing suggestions or browse the FontAwesome website to find the one you wish to use.
  3. Once you have chosen the icon you can optionally set its alignment and size, you can also set its color from within the “Theme” group near the bottom of the properties panel.

 

2019-12-19_1220_001.png

 

Adding Graphics

  1. Launch the Sintel Forms Designer and click on the section in which you want to add the graphic.
  2. Within the “Custom HTML” property insert HTML such as the following example, replacing the path with the path to your graphic.
<img src="https://s3.eu-west-1.amazonaws.com/sintel.workspace/DemoFormLogos/sfs-logo.svg" height=50>

 

2019-12-19_1223.png

 

  Note

While you can use graphics that are stored on your SharePoint site/tenant it’s important to note that if you intend to use the “Export to PDF” feature of Sintel Forms that all graphics used need to be publicly accessible without requiring a login. If you use graphics that are not publicly accessible they will not appear on the exported pdf.

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Table of Contents