Modify the Data-Viewer CSS file

Modify the Data-Viewer CSS file

Configuration Infographic Overview of Configuration Screens

LookFeel-CSS.pngBy default, the Data-Viewer web part renders the user interface using the default CSS styles that are selected in your SharePoint sites, assuming you are inheriting the site theme. The look and feel of the web part can further customized by editing the custom cascading style sheet (CSS) file from the tool pane of the web part.

To customize the style of the Data-Viewer web part:

Step Description
1.

Look and Feel Settingsbutton in navigation paneClick the Look and Feel Settings button under Preferences.

NOTE: This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. CSS radio button Click the Define Custom CSS radio button to enable the Edit CSS button
3.

HW37_CSS.pngClick Edit CSS.

  • The default Data-Viewer CSS file is displayed in a new window.

  • Edit the file in this window or copy the contents to your favorite text editor.

Icon-Tip Download the default CSS here.

NOTE: The default CSS is not related to the skin/site theme you had enabled when you chose to edit the CSS. The default CSS is a standard file that doesn’t change unless you change it. A Data-Viewer Web Part displayed with the default CSS looks like this:

DVWP with default CSS.png

4.

Edit the CSS file as needed.

Icon-Tip 1. Always save the original content of the file in Notepad (or something similar) in case you need to go back to it. You can also download the default CSS here.
2. You may choose to remove some of the formatting included in the default file.

Sample modifications:

The Data-Viewer Web Part uses the following class selectors to define each element of the Web Part:

Data Grid (the entire grid)
class selector - data grid.jpg

Table of Contents and Border
class selector - TOC and border.jpg

Rows and Alternating Rows
class selector - rows and alt rows.jpg

Selected Row
class selector - selected editing row.jpg

Group Header
class selector - group header.jpg

Footer bar
class selector - footer.jpg

Filter bar
class selector - filter row.jpg

For additional information and CSS examples, visit the site W3schools.

5. Click Save to save changes and close the window or click Cancel to close the window without saving any changes.

Configuration Infographic Overview of Configuration Screens