Look and Feel Preferences

Look and Feel Preferences

Configuration Infographic Overview of Configuration Screens

Icon Use Data-Viewer’s Look and Feel Settings configuration screen to modify the default appearance of the Web Part.

You can change:

  • the color scheme and style
  • the size of the web part
  • the font of the text in the header row
  • or, hide the column headers

NOTE: Look and Feel Settings are optional. If you don’t configure anything your Data-Viewer will have the default Look and Feel.

To change Data-Viewer’s look and feel:

Look and Feel in navigation pane1. Click the Look and Feel Settings button under the Preferences header in the Data-Viewer configuration screen.

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. Select from the configuration options below:

Option Description
Select Skin or Define Custom CSS


  • Select Skin: Select from several preconfigured skins, each with different color and style themes. The default choice is to Inherit Site Theme, so the Data-Viewer uses the same colors and fonts as the rest of the site.
    The Inherit Site theme feature became available in Data-Viewer 3.6
  • Define Custom CSS: If you don’t want to inherit the theme from the site and you don’t like any of the available skins, you can customize the Cascading Style Sheet (CSS) for the Web Part directly.
    • Click the Edit CSS button to display a window where you can edit the CSS. See CSS for Data Viewer for more information.
Define Custom Height and Width

Define Height and WidthBy default, the Data-Viewer will fill the available space in the web part zone or the wiki page where you put it.

Using a custom height and width for the web part lets you control the space that the web part will consume on the page.

  • Icon-Warning Important: This option is only available when the Set Column Width check box in the Column Display pop up screen is selected.

    Select boxes for column size

  • Click Specify Custom Height and Width in the Define Custom Height and Width section of the configuration page. If you enter fewer pixels than are needed to display a whole page, vertical and/or horizontal scroll bars will be displayed.

    Icon-TipIf you specify a height (in pixels) that is less than needed to display a whole Data-Viewer page, a vertical scroll bar will be displayed. As end users scroll, the header bar remains stationary.

    DVWP with custom width and height2.png
Define Column Header

DataViewerLF_Header.pngDetermine whether the column headers will be visible in the display, or define special formatting for the column headers.

  • Check Allow Hide Header to remove column headers from the display
  • To modify the column headers, select the Header Format checkbox and click the box below it to open the formatting dialog.
    • In the formatting dialog, select a desired Font (use the arrows for selection), Style, and/or Size.
    • Select the following format, click Apply and then ok.

      text formatting pop-up

Configuration Infographic Overview of Configuration Screens