When viewing a SharePoint list such as, announcements, the display form presents with two column table format and default colour style (see below). Whilst this looks ok and provides us with the right information but it looks like a record.

This post will show and explain how you can transform a default announcement display form into a news article page layout style and look more appealing to end user.
In order to create a new display form and little customisation we will need to work with SharePoint Designer 2010 (free download).
So let’s begin with the task. Open your SharePoint site in the SharePoint Designer and navigate through Site Objects to the Announcement list.

From the ribbon, click List Form. You will be presented with Create New List Form dialog box.
Fill out the File Name (I called it NewsArticle), select Display item form, tick the checkbox to set the default form and make sure the content type to use option selected is Announcement and click OK.

We will now open our newly created NewsArticle form and start customising within SharePoint Designer 2010. In particular, we will work within the DataForm webpart and in Split mode window.

You will notice that the data items are contained within a table. Select the first column containing labels Title, Body and Expires and delete this column.

Increase the font size of the title text to Large (18 pt).

The Expiry date needs to be in en-gb date format. So we replace select=”@Expiry” with  select="ddwrt:FormatDate(string(@Expires), 2057, 1)"

Within each table data (view the code) there is a class associated called ms-formbody which provides the style properties like background colour. So we will delete class=ms-formbody to have a white background.

That’s it! You can of course add picture(s) column to the Announcement list and the ability to display picture.

Whilst the page layout templates are available through publishing features to achieve a similar look and feel, the publishing feature is only available in standard edition or higher. So you can see how this important technique can be applied and for that matter to any SharePoint lists on any SharePoint product versions.

Hope you have found this post useful.

Published by Chirag Patel @techChirag

Chirag is an independent Microsoft 365 consultant at Patel Consulting, and Microsoft MVP (Office & Apps Services), based in UK with more than 20 years of industry experience. He is also a BCS (British Computer Society) Member & Chartered IT Professional, Microsoft 365 Certified Enterprise Administrator Expert, MCT (Microsoft Certified Trainer) and TOGAF9 Certified Architect. He works with a wide variety of clients in many sectors, designing and implementing business collaboration, data and information management solutions and services based on Microsoft Teams, SharePoint and Microsoft 365 technologies, Power Platform to create business value for both themselves and their customers, including UK Microsoft Gold Partners with deployment, upgrade and migration services delivery. Chirag is an active Microsoft 365 community participant, frequent speaker at local and international events including Microsoft 365 Saturdays, Power Saturdays, SharePoint Saturdays, Collab365, TeamsFest, Modern Workplace Summit and Scottish Summit. You can follow Chirag on twitter at @techChirag. View all posts by Chirag Patel @techChirag