Apply a Style to the XML Viewer Web Part
So, let’s start with adding the web part to the page. Click on Site Action and then select Edit Page.
So, let’s start with adding the web part to the page. Click on Site Action and then select Edit Page.

Pick a side where the new XML Viewer will be displayed on the page. For this example I used the right panel. Click on the “Add a Web Part” link and then under the top ribbon make sure you’re under Browse tab.

Select Content Rollup and then XML Viewer and click on the Add button.

Under the newly added web part click on the “open the tool pane” link to customize it.

On the XML Viewer web part settings panel, under XML Link plug in your RSS feed and then click on XSL Editor button to get to the Text Editor webpage dialog window.


Copy & Paste the code below and then click OK.
Pick a side where the new XML Viewer will be displayed on the page. For this example I used the right panel. Click on the “Add a Web Part” link and then under the top ribbon make sure you’re under Browse tab.
Select Content Rollup and then XML Viewer and click on the Add button.
Under the newly added web part click on the “open the tool pane” link to customize it.
On the XML Viewer web part settings panel, under XML Link plug in your RSS feed and then click on XSL Editor button to get to the Text Editor webpage dialog window.
Copy & Paste the code below and then click OK.
Make the necessary aesthetics changes: web part Title, Width, Height and Chrome Type and click OK.

Of course the XSL style sheet provided can be customized farther, like referencing an external CSS by adding a class attribute to the div tag instead of using inline styling. And, here is the outcome:

Of course the XSL style sheet provided can be customized farther, like referencing an external CSS by adding a class attribute to the div tag instead of using inline styling. And, here is the outcome:
No comments:
Post a Comment