FAQ content

Tutorials: Customize a tutorial's page header

In this article

By default, each tutorial will display the current page header from your system settings. However, you can choose to display your own custom page header instead. Custom headers can include a banner image and/or text, as well as custom CSS code.

When enabled, the header will display at the top of your tutorial, above the tutorial title and slide heading.


To adjust the page header for a tutorial:

  1. While editing your tutorial, click on the Tutorial Options tab.
  2. Click on the Page Header panel to expand it.
  3. For the Page Header Type‚Äč, select the Use the System Settings option to use the default page header from your LibWizard system settings. Otherwise, select Use a custom page header for this form and configure the following options:
    1. To include a banner image, enter its URL in the Image URL field. This can be the URL to an image uploaded to your LibApps Image Manager library, or from some other location on the Web.
    2. To add text by entering it into the Survey Header Text field. If you also added an Image URL, please note that this text will display below that image.
    3. You can also use CSS code style the header text by adding it to the CSS text box.
      • Only include the CSS properties (e.g. color: red;) -- do not include selectors or <style></style> tags.
      • Please note that these properties will be applied as inline styles to the <div> element that contains your page header content.
  4. Click the Save Changes button.
Options under the Page Header panel