One of the things that as been driving me crazy is the inability to selectively style webparts. On the home page of my company’s intranet, I have several webparts pulling content in, and they all look the same. I primarily wanted to make the announcements web part look different. I tried every hack I could think of to find some kind of unique hook to attach some styling to. I would change the title style and then watch it change ever title on the page. I have been trying to find uses for the data view web part and so I thought, maybe I can use that to pull in the announcements and then style them…
Long story short, it worked. Using the dvwp I was able to pull in the announcements list, set what fields to display, and then individually style the display of those fields.
First, I created a page layout. You can’t add the dvwp to pages directly unless you create a page based off a page layout and then detach that page from the page layout in SPD before you work on it. On the page layout in Sharepoint Designer, I selected a web part zone, clicked on Data View in the toolbar, and then selected Insert Data View. I then pulled the announcements list onto the dvwp area. I clicked on the arrow to the right of the DVWP and the Common Data View Tasks box displayed.
First, I edited the columns. I removed all but Title and Body. Then I changed the layout to Repeating Form Style. I then set the paging to display items in sets of 4. Under Sort and Groups, I set it to sort by Created, descending.
Now it was time to style the content. First, I removed the word Body that displayed right over the body content. Then I moved the title xsl code to right above the body code. I created two styles, one to handle the title and one for the body. I wrapped the styles around the fields and then cleaned up the display a bit by removing the extra row, hr and br tags.
Once that was done, I saved the layout, checked it in and then created a new page based off that layout. The dvwp displayed on the page as a webpart. I exported the webpart and then added it to the Web Part Gallery. I went to the intranet home page, put it in edit mode, and then added the webpart to the page.
One note, I tested this on my dev server first and made sure it worked before I tried it on production 😉