# Creating a Custom Skin for a Component

Customize the appearance of the spreadsheet component by creating and applying your own cell-level styles using SpreadSkin.

## Content

You can quickly customize the appearance of the spreadsheet component by applying a "skin" to it. Some built-in skins are provided with Spread to create common formats. You can create your own custom skin and save it to use again, similar to a template.

| **For more information and instructions about** | **See** |
| ------------------------------------------- | --- |
| Applying the built-in skins | [Applying a Skin to the Component](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-spreadskinapply) |
| Creating and applying your own cell-level styles | [Creating and Applying a Style for Cells](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-cellstyle) |
| Saving the skin to a file or stream | [Saving and Loading a Skin](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-sheetskinsaveload) |
| Underlying model for skins | [Understanding the Style Model](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-usemodels/spwin-model-types/spwin-model-stylestuff) |
| Customizing a skin in the Spread Designer | [SpreadSkin Editor](/spreadnet/docs/latest/online-win/overview/spwin-designerguide/spwin-spd-editors/SDSpreadSkinEditor) |
| Spread skins | [SpreadSkin](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SpreadSkin.html) class |

## Using the SpreadSkin Editor

1. In the **Form** window, click the Spread component for which you want to create the skin.
2. At the bottom of the **Properties** window, click the **Edit Skins** verb.
3. In the **SpreadSkin Editor**, select the **Custom** tab.
4. Set the properties in the **Custom** tab to create the skin you want.
5. Set the Name property to specify the name for your custom skin.
6. Click the **Save Skin** button to save the skin.
    A dialog appears saying the skin has been saved.
7. Click **OK** to close the editor and apply the skin you created to the sheet, or click **Cancel** to close the editor and not apply the skin you created.

## Using a Shortcut

1. Use the SpreadSkin object constructor, and set its parameters to specify the settings for the skin.
2. Use the [Apply](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SheetSkin.Apply.html) method of the SpreadSkin object to apply it to the component.

## Example

This example code creates and uses a custom skin.

```csharp
fpSpread1.Sheets.Count = 3;
FarPoint.Win.Spread.StyleInfo chd = new FarPoint.Win.Spread.StyleInfo();
chd.BackColor = Color.LightGreen;
FarPoint.Win.Spread.StyleInfo cds = new FarPoint.Win.Spread.StyleInfo();
cds.BackColor = Color.LightGreen;
FarPoint.Win.Spread.StyleInfo rhd = new FarPoint.Win.Spread.StyleInfo();
rhd.BackColor = Color.LightGreen;
FarPoint.Win.Spread.StyleInfo def = new FarPoint.Win.Spread.StyleInfo();
FarPoint.Win.Spread.GradientSelectionRenderer gsr = new FarPoint.Win.Spread.GradientSelectionRenderer();
gsr.Color1 = Color.Green;
gsr.Color2 = Color.LightGreen;
gsr.Opacity = 50;
def.BackColor = Color.Honeydew;
FarPoint.Win.Spread.EnhancedInterfaceRenderer int1 = new FarPoint.Win.Spread.EnhancedInterfaceRenderer();
int1.ArrowColorDisabled = Color.Green;
int1.ArrowColorEnabled = Color.LightSeaGreen;
int1.ScrollBoxBackgroundColor = Color.Aqua;
int1.TabShape = FarPoint.Win.Spread.EnhancedInterfaceRenderer.SheetTabShape.RoundedRectangle;
int1.TabStripButtonStyle = FarPoint.Win.Spread.EnhancedInterfaceRenderer.ButtonStyles.Enhanced;
int1.TabStripButtonFlatStyle = FlatStyle.Popup;
int1.SheetTabBorderColor = Color.Aquamarine;
int1.SheetTabLowerActiveColor = Color.DarkSeaGreen;
int1.SheetTabLowerNormalColor = Color.DarkOliveGreen;
int1.SheetTabUpperActiveColor = Color.ForestGreen;
int1.SheetTabUpperNormalColor = Color.LightSeaGreen;
int1.SplitBarBackgroundColor = Color.Aquamarine;
int1.SplitBarDarkColor = Color.DarkGreen;
int1.SplitBarLightColor = Color.LightGreen;
int1.SplitBoxBackgroundColor = Color.Green;
int1.SplitBoxBorderColor = Color.LimeGreen;
int1.TabStripBackgroundColor = Color.Aquamarine;
FarPoint.Win.Spread.NamedStyle chstyle = new FarPoint.Win.Spread.NamedStyle("ColumnHeaders", "HeaderDefault", chd);
FarPoint.Win.Spread.NamedStyle corner = new FarPoint.Win.Spread.NamedStyle("CornerHeaders", "HeaderDefault", cds);
FarPoint.Win.Spread.NamedStyle rowhstyle = new FarPoint.Win.Spread.NamedStyle("RowHeaders", "HeaderDefault", rhd);
FarPoint.Win.Spread.NamedStyle ds = new FarPoint.Win.Spread.NamedStyle("Default", "DataAreaDefault", def);

FarPoint.Win.Spread.MarqueeFocusIndicatorRenderer focusrend = new FarPoint.Win.Spread.MarqueeFocusIndicatorRenderer(Color.LightSeaGreen, 2);
FarPoint.Win.Spread.EnhancedScrollBarRenderer ScrollBarR = new FarPoint.Win.Spread.EnhancedScrollBarRenderer(Color.Green, Color.LightGreen,
Color.Green, Color.Aqua,Color.DarkGreen, Color.DarkSeaGreen, Color.Turquoise, Color.SpringGreen, Color.Teal, Color.PaleGreen, Color.ForestGreen);

FarPoint.Win.Spread.SpreadSkin skin = new FarPoint.Win.Spread.SpreadSkin("MySkin", int1, ScrollBarR, focusrend, gsr, ds, chstyle, rowhstyle, corner);
skin.Apply(fpSpread1);
```

```vbnet
' Create a custom skin.
fpSpread1.Sheets.Count = 3
Dim chd As New FarPoint.Win.Spread.StyleInfo
chd.BackColor = Color.LightGreen
Dim cds As New FarPoint.Win.Spread.StyleInfo
cds.BackColor = Color.LightGreen
Dim rhd As New FarPoint.Win.Spread.StyleInfo
rhd.BackColor = Color.LightGreen
Dim def As New FarPoint.Win.Spread.StyleInfo
Dim gsr As New FarPoint.Win.Spread.GradientSelectionRenderer
gsr.Color1 = Color.Green
gsr.Color2 = Color.LightGreen
gsr.LinearGradientMode = Drawing2D.LinearGradientMode.BackwardDiagonal
gsr.Opacity = 50
def.BackColor = Color.Honeydew
Dim int As New FarPoint.Win.Spread.EnhancedInterfaceRenderer
int.ArrowColorDisabled = Color.Green
int.ArrowColorEnabled = Color.LightSeaGreen
int.ScrollBoxBackgroundColor = Color.Aqua
int.TabShape = FarPoint.Win.Spread.EnhancedInterfaceRenderer.SheetTabShape.RoundedRectangle
int.TabStripButtonStyle = FarPoint.Win.Spread.EnhancedInterfaceRenderer.ButtonStyles.Enhanced
int.TabStripButtonFlatStyle = FlatStyle.Popup
int.SheetTabBorderColor = Color.Aquamarine
int.SheetTabLowerActiveColor = Color.DarkSeaGreen
int.SheetTabLowerNormalColor = Color.DarkOliveGreen
int.SheetTabUpperActiveColor = Color.ForestGreen
int.SheetTabUpperNormalColor = Color.LightSeaGreen
int.SplitBarBackgroundColor = Color.Aquamarine
int.SplitBarDarkColor = Color.DarkGreen
int.SplitBarLightColor = Color.LightGreen
int.SplitBoxBackgroundColor = Color.Green
int.SplitBoxBorderColor = Color.LimeGreen
int.TabStripBackgroundColor = Color.Aquamarine
Dim chstyle As New FarPoint.Win.Spread.NamedStyle("ColumnHeaders", "HeaderDefault", chd)
Dim corner As New FarPoint.Win.Spread.NamedStyle("CornerHeaders", "HeaderDefault", cds)
Dim rowhstyle As New FarPoint.Win.Spread.NamedStyle("RowHeaders", "HeaderDefault", rhd)
Dim ds As New FarPoint.Win.Spread.NamedStyle("Default", "DataAreaDefault", def)
Dim focusrend As New FarPoint.Win.Spread.MarqueeFocusIndicatorRenderer(Color.LightSeaGreen, 2)

Dim ScrollBarR As New FarPoint.Win.Spread.EnhancedScrollBarRenderer(Color.Green, Color.LightGreen, Color.Green, Color.Aqua, Color.DarkGreen,
Color.DarkSeaGreen, Color.Turquoise, Color.SpringGreen, Color.Teal, Color.PaleGreen, Color.ForestGreen)

Dim skin As New FarPoint.Win.Spread.SpreadSkin("MySkin", int, ScrollBarR, focusrend, gsr, ds, chstyle, rowhstyle, corner)
skin.Apply(fpSpread1)
```

## Using the Spread Designer

1. From the **Settings** menu, choose the **SpreadSkin** icon.
2. In the **Spread Skin Editor**, select the **Custom** tab.
3. Set the properties for the new custom skin, including the **Name** property to name your skin.
4. Select the **Save Skin** button.
    A message box appears telling you your custom skin has been saved.
5. Click **OK** to close the **Spread Skin Editor**.
6. From the **File** menu choose **Apply and Exit** to apply your changes to the component and exit Spread Designer.

## See Also

[Setting the Component to the Original Appearance](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-olddefaultappear)
[Applying a Skin to the Component](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-spreadskinapply)
[Applying a Skin to a Sheet](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-sheetskinapply)
[Creating a Custom Skin for a Sheet](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-sheetskincreate)
[Saving and Loading a Skin](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-setappearance/spwin-appearcontrol/spwin-sheetskinsaveload)