# Customizing the Appearance of an Outline (Range Group)

Learn how to customize the appearance of an outline (range group) using properties on the SheetView class or in an interface renderer. Explore the properties that can be used to customize the appearance, including RangeGroupBackgroundColor and RangeGroupButtonStyle.

## Content

You can customize the appearance of the outline (range group) using properties on the [SheetView](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SheetView.html) class or in an interface renderer.
The two properties in the **SheetView** class that can be used to customize the appearance are:

* [RangeGroupBackgroundColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SheetView.RangeGroupBackgroundColor.html)
* [RangeGroupButtonStyle](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SheetView.RangeGroupButtonStyle.html)

You can also use an **EnhancedInterfaceRenderer** to customize the appearance. The properties include:

* [RangeGroupBackgroundColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupBackgroundColor.html)
* [RangeGroupButtonBorderColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupButtonBorderColor.html)
* [RangeGroupLineColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupLineColor.html)

The line color also sets the color of the points in the outline. The following figure shows the results of the example code below where several of these properties are set.
![Outline Custom Appearance](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/outline-customrender33.png)
Notice that the outline background is different from the gray area of the spreadsheet.

## Using Code

1. Create a new interface renderer to provide a custom look to outlines.
2. Set the [RangeGroupBackgroundColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupBackgroundColor.html) to specify the color.
3. Set the [RangeGroupButtonBorderColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupButtonBorderColor.html) to specify the color for the button border.
4. Set the [RangeGroupLineColor](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.EnhancedInterfaceRenderer.RangeGroupLineColor.html) to specify the group line color.
5. Add the range groups with the [AddRangeGroup](/spreadnet/api/latest/online-win/FarPoint.Win.Spread/FarPoint.Win.Spread.SheetView.AddRangeGroup.html) method.

## Example

This example creates an outline in the rows and in the columns and changes various colors. The result is shown in the preceding figure.

```csharp
fpSpread1.ActiveSheet.Rows.Count = 11;
fpSpread1.ActiveSheet.Columns.Count = 6;
FarPoint.Win.Spread.EnhancedInterfaceRenderer outlinelook = new FarPoint.Win.Spread.EnhancedInterfaceRenderer();
outlinelook.RangeGroupBackgroundColor = Color.LightGreen;
outlinelook.RangeGroupButtonBorderColor = Color.Red;
outlinelook.RangeGroupLineColor = Color.Blue;
fpSpread1.InterfaceRenderer = outlinelook;
fpSpread1.ActiveSheet.AddRangeGroup(0, 8, true);
fpSpread1.ActiveSheet.AddRangeGroup(0, 5, true);
fpSpread1.ActiveSheet.AddRangeGroup(1, 3, false);
fpSpread1.ActiveSheet.AddRangeGroup(1, 2, false);
```

```vbnet
fpSpread1.ActiveSheet.Rows.Count = 11
fpSpread1.ActiveSheet.Columns.Count = 6
Dim outlinelook As New FarPoint.Win.Spread.EnhancedInterfaceRenderer
outlinelook.RangeGroupBackgroundColor = Color.LightGreen
outlinelook.RangeGroupButtonBorderColor = Color.Red
outlinelook.RangeGroupLineColor = Color.Blue
fpSpread1.InterfaceRenderer = outlinelook
fpSpread1.ActiveSheet.AddRangeGroup(0, 8, True)
fpSpread1.ActiveSheet.AddRangeGroup(0, 5, True)
fpSpread1.ActiveSheet.AddRangeGroup(1, 3, False)
fpSpread1.ActiveSheet.AddRangeGroup(1, 2, False)
```

## See Also

[Using an Outline (Range Group) of Rows or Columns](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-interact-rowcol/spwin-outline/spwin-outline-using)
[Interoperability of Outlines with Other Features](/spreadnet/docs/latest/online-win/overview/spwin-devguide/spwin-interact-rowcol/spwin-outline/spwin-outline-interop)