This blogpost will cover the basics of customizing your search results-page using XSLT.
I will in a later blogpost also show you how you can use SharePoint Designer as a tool to create the actual XSLT for you in combination with the DataViewer Web Part, and then how you can modify the created XSLT to match whatever specifications you’ve got in your designs.
I would recommend creating a new Search Page and Search Results Page to use, but for this little demo I’ll just use the default search page and search results page.
Let’s get started then..
First of, take a look at the search results page (the page you see when you’ve made a search):
From here, take the following actions:
- Choose Site Actions -> Edit Page
- Locate the "Search Core Results" web part, and choose "Edit" -> "Modify Shared WebPart"
- Locate "Data View Properties" and choose the huge "XSL Editor…" button :)
You should now see something like this:
Now all you need to do (if you wish to use the existing properties) is to add your custom xhtml (I tend to say xhtml instead of html to mark the importance of web standards and cross-browser compatability).
I just added some style-attributes to the body div and the results template span-tag to mark my point. I did by no means put any energy into making this look nice. Please believe me ;)
And this is the final "stylish" outcome:
What have we accomplished today then? Well, nothing big at all. Just a little tip on how you can customize the Search Result presentation with minimum knowledge or efforts. I however will in one of my next blogposts let you in on a little tip on how to use SharePoint Designer and the Data View Web Part to create the custom XSLT for you fully automatically instead of customizing the existing XSLT with your own xhtml. That basically means that it’s dead-easy to change the looks, layout and appearance of the search results in a much more extensive!
That’s a wrap!
By the way; I love comments and try to answer them, feel free to add one while you’re here :)