Managing Stylesheets

Stylesheets allow you to customize the look of the User Application to make it conform with your company brand.

This article discusses how to use stylesheets with your workflows.

Table of Contents

• Introduction
• The Stylesheet Editor
• Creating a Stylesheet
  • To Add a Logo
  • To Change the Default Settings for the Headline, Body, Footer, and Buttons
• Editing a Stylesheet
• Duplicating a Stylesheet
• Setting a Default Stylesheet for the User Dashboard

Introduction

This article covers managing Stylesheets, e.g. creating and editing Stylesheets, in Autto.

If you are looking for information on using stylesheets in Autto, including applying stylesheets to your workflows, see Using Stylesheets.

Although not required, a basic understanding of web design concepts may prove useful when working with stylesheets in Autto.

The Stylesheet Editor

The Stylesheet Editor is where you set up stylesheets. It is displayed once you create a new stylesheet (see Creating a Stylesheet).

When you run the Editor for the first time, the default look of the User Application is shown on the right side. On the left side, the stylesheet name is displayed, together with the five (5) sections corresponding to the different areas of the User Application that can be customized: the logo, headline, body, footer, and buttons.

Creating a Stylesheet

To create a new stylesheet:

1. On your Dashboard, click the Main Menu, then Stylesheet Manager.
   
   
   
   
2. Enter a name for the stylesheet, then click New.
   
3. On the Stylesheet editor, the default stylesheet that comes with your Autto account is displayed. You can then start creating your stylesheet.

To Add a Logo

The logo is displayed on the top right of the User Application.

To add a logo to a stylesheet:

1. Under the Logo section of the Stylesheet Editor, click the Upload logo icon.
   
   
   
   
2. On the Logo uploader window, click Choose file, then select the file and upload it.
   
   
3. Click Done. Back on the Stylesheet editor, the logo is displayed on the top right.

NOTE: Supported image formats are .PNG, .JPG, and .JPEG. Logos should be 350x150 pixels (they will be scaled to fit if they do not meet these requirements) and 200kb or less in size. Ideally, they should have a transparent background.

To Change the Default Settings for the Headline, Body, Footer, and Buttons

You can change the default font type, colour, and size as well as the background and border colours on the headline, footer, and buttons. The same goes for the body, except for the border colour.

To customize the default stylesheet, click the corresponding setting and change it accordingly.

1. To change a background or border colour, click the current colour and select a different one from the palette.
2. To set a different font type, select a different one from the list.
3. To set a different font size, drag the button to the new size accordingly.
4. Once you finish customising the stylesheet, click the Update button on the bottom right.

Editing a Stylesheet

To edit a stylesheet:

1. Open the Stylesheet manager, then click the Edit icon to the right of the stylesheet.
2. On the Stylesheet editor, make your changes to the stylesheet, then click the Update button on the bottom right.

Duplicating a Stylesheet

You can create a new stylesheet by duplicating an existing stylesheet. This will carry over the existing stylesheet's customised settings to the new stylesheet.

To duplicate a stylesheet, open the Stylesheet manager, then click the Duplicate icon to the right of the stylesheet. You can then customise the stylesheet.

Setting a Default Stylesheet for the User Dashboard

From the Stylesheet Manager, you can also set a default stylesheet for the User Dashboard to ensure a better and more flexible visual experience for your users. For more information, see The User Dashboard.

To set a default stylesheet for the User Dashboard, open the Stylesheet Manager, then mark the Dashboard & Default checkbox to the right of the stylesheet that will be set as the default.  This will also set this stylesheet for any workflows that do not have a stylesheet set.

In the example below, Basic Style has been set as the default stylesheet.