Using the jQuery Theme Roller with Spread

In This Topic

You can apply a Theme Roller theme to the Spread control.

The theme is applied to the following areas.

Column Header
Row Header
Corner
Footer and Footer Corner
Command Bar
Title Bar
Group Bar
Gray Header
Hierarchy Bar
Pager
Sheet Tab

The following styles are applied from the jQuery theme.

Background-Color
Background-Image
ForeColor
Font family
Font weight
Font size

If the jQuery theme is enabled, the jQuery theme style has a higher priority than the default style but a lower priority than the custom style. If the sheet skin is DefaultSkins.Default or it is not specified, the jQuery theme takes effect. If the sheet view active skin is a built-in skin (not DefaultSkins.Default) or a custom skin then the jQuery theme has no effect.

The viewport, context menu, filter menu, touch strip, dialogs, group headers, and group footers are not supported. If the SheetView.SelectionBackColor property is set, then the theme highlight is not applied.

For more information about themes, refer to the Theme Roller web site, https://jqueryui.com/themeroller/.

Using Code

Add a reference to the theme.
Set the EnablejQueryTheme property.

Example

This example displays a theme.

Script	Copy Code
<head runat="server"> <title>Demo page</title> <link href="jquery-ui-themes-1.10.4/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet" /> <link href="jquery-ui-themes-1.10.4/themes/ui-darkness/jquery.ui.theme.css" rel="stylesheet" /> </head>

Script

Copy Code

<head runat="server">
  <title>Demo page</title>
  <link href="jquery-ui-themes-1.10.4/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet" />
  <link href="jquery-ui-themes-1.10.4/themes/ui-darkness/jquery.ui.theme.css" rel="stylesheet" />
</head>

C#	Copy Code
FpSpread1.EnablejQueryTheme = true;

VB	Copy Code
FpSpread1.EnablejQueryTheme = True