Apply custom look and feel to your SharePoint forms

Hi,

Good news!

We've just released a new version of Smart List Pro (a component of Ultimate Forms). It now supports applying your own custom look & feel to every list, so you can effortlessly create great looking forms.

Just see how easy it is to turn this:

into this:

Some technologies, such as InfoPath, SharePoint Designer or 3rd party solutions implement this by replacing the whole form with a custom form, breaking certain functionality and creating that "out-of-place" feeling. Smart List Pro does not do that, it actually applies layout changes and stylings directly to the original form, no changes required.

Let me show how it is done, it should not take you more than 1 minute flat:

1. Make sure Smart List Pro version 1.23.0 or up is installed
2. On any list view, go to List (or Document Library) ribbon and click on Design button
3. Click on Tabs and tab permissions (the first option there)
4. Close all sections but General Settings

Under Title I put in [Full Name], it will show this nice looking title above the form itself with the full name of the contact. You don't have to put it there or you can use any other value, the value picker is right there to help you.

Label location: Above field - will place column names above the column values, intsead of being beside them.

And I also selected to render the form in a 2 side-by-side columns.

Done with General Settings, collapse it and open up the new Style section:

Let me explain to you what I did here. I was using IE Developer Pane (F12, the same works in Chrome and, a bit differently, in FireFox) to find out the names of the CSS classes I wanted to override. You don't need to do that, you can simply enter the values for background and borders if you don't feel like honing your CSS skills just yet. So here we go:

• Background color: I used a picker and selected a nice yellowish hue
• Border radius: I gave rounded edges to the background (attention IE users on SharePoint 2007/2010, this option will not work for you)
• Box shadow: I added a drop shadow to the form (again, IE users in earlier versions are out of luck).

I then added some direct CSS overrides to fine-tune my form. I changed the look of the submit buttons, changed the colors of field names and values, added some padding and enlarged the form title (remember that?) font.

Add the style (I added one for all forms, but you can actually enter a separate one for each). Save. You are done.

And it looks great in the Edit form too!