Associated Items
List Search

Creating a Dynamic Header (2/2)

There are many options on what can be done with the header. One problem that often occurs in SharePoint is that each page looks very much like other pages. It is not a good user experience if all of the pages and forms look very similar. It is helpful to create a distinct visual anchor point that helps users immediately know where they are located in the SharePoint environment. With Infowise forms, there is the potential to do many things to customize the forms. Perhaps the first thing that should be leveraged is better using a customized header configured through the Tabs and Tab Permissions area. In this example you can see how to change the headers to make each list have a distinct look that distinguishes it from each of the many Infowise related lists that you will be creating throughout your SharePoint environment.


  • The Infowise Form Title is a key element of the form interface.
  • This title shows immediately above the tabbed sections set up using the Infowise form configuration.
  • The title needs some additional CSS in order to make it look attractive and stand out in the interface.
  • Here are some examples of how three similar list forms can be made to look distinct from each other:

  • In order to improve the look of the header it needs to have a larger font, centering, padding, color / background color and a background image as an icon to show in the upper left.
  • The first thing to do is to build a meaningful title by including dynamic fielded information from the list record.
  • This can be done in the tab settings area:

  • Click on the configuration icon to the right of the Title field to pick fields from your list to be included in the Title.
  • You should consider fields such as Title, Status, Item ID, Assigned User, Due Date or any other critical or unique identify information.
  • The styling is a little bit more tricky. Some knowledge of CSS is helpful when working with this part of the configuration.
  • Here is an example of how to set up a title like those shown in the screen above:

  • Note that .iw-formtitle is the class that must be referenced in order to control the styles for the header.
  • The references shown can be copied and used repeatedly for different lists.
  • The key aspects of this configuration are the hex color codes used to control the foreground and background colors and also the background image which is used to show a 32px icon in the upper left.
  • Note that you should pre-load any icons that you would like to use to your SharePoint site then copy and paste the image path to this configuration replacing the shown URL.
  • Here are the entries for the CSS:
.iw-formtitle     font-size: 18px; text-align: center; padding: 5px; background-color: #800080; color: #FFFFFF;
.iw-formtitle     background-image: url('ENTER THE PATH TO THE IMAGE HERE');
.iw-formtitle     background-repeat: no-repeat;
.iw-formtitle     background-position: 5px center; 


The header area should be treated as a priority when customizing your forms. Configuring a distinct and attractive visual style usually requires a little bit of work during the first set up, but once you have a style established, you can use your CSS entries and configuration as a template for other list forms as you create more tools. Experiment with some different options to significantly improve the look and feel of your Infowise forms.

Last modified: 9/1/2017 7:29 PM

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.
Infowise logo
© 2005-2021 Infowise Solutions Ltd
Microsoft partner logo
GSA Schedule
Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.