# Creating a Custom Skin

The following tutorial demonstrates creating a custom **RadInput** skin, using the default skin as a base. This new skin will take the appearance of the input controls from their default look:
![Default Skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/da593836a9f46babe4806229a4c61271/defaultskin.png)

to the following:
![Green Skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c9d47b5b7350e80a3bcdc15b57fef7dc/greenskin.png)

See [Understanding the Skin CSS File](https://www.telerik.com/products/aspnet-ajax/documentation/controls/textbox/appearance-and-styling/html-output-and-css-styling) for more information on specific CSS file properties.

## Prepare the Project

1. Drag a \**RadTextBox* control from the toolbox onto a new AJAX-enabled application Web form.

2. Set the properties of these input controls so that they each show a label and a button:

3. In the Solution Explorer, create a new "Green" directory in your project.

4. Copy the default **RadInput** skin files from the installation directory to the "Green" directory; copy both the \Input directory that contains the images for this skin and the Input.Default.css file that defines the skin styles.
   > note The file path will typically be similar to this example: *\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins\Default.*

5. In the Solution Explorer, rename "Input.Default.css" to "Input.Green.css".
   ![Add files for custom skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/06545725d117810c25bfdf8de3650d7f/addfilesforcustomskin.png)

6. Open Input.Green.css and replace all instances of \_Default with \_Green. Then save the file:
   ![Find and replace](https://www.telerik.com/products/aspnet-ajax/documentation/assets/58652d5e9559571fe30204cccb77ef02/findandreplace.png)

7. Drag the "Input.Green.Css" file from the Solution Explorer onto your Web page. This automatically adds a reference to the page "<head>" tag as a "<link>" to the new stylesheet:
   ![Drag CSS file](https://www.telerik.com/products/aspnet-ajax/documentation/assets/e40bbf66cea7be0494642ce531f23eaf/dragcssfile.png)

8. Change the **Skin** property of your four **RadInput** controls to "Green".

9. Set the **EnableEmbeddedSkins** property of your four **RadInput** controls to "False".

10. Run the application. The new "Green" skin looks just like the Default skin:

![Default Skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/da593836a9f46babe4806229a4c61271/defaultskin.png)

## Editing the CSS classes

The classes that control the background for spin buttons are **.riUp** and **.riDown**. Locate the mentioned selectors. The class definitions are qualified by the **.RadInput_Green** class, which is the class definition for the entire control. Add a property to the selectors, setting the background color for the spin buttons:

```CSS
	.RadInput_Green a.riUp
	{
		background-position: 4px -98px;
		vertical-align: top;
		background-color: #ddffe0;
	}
```

```CSS
	.RadInput_Green a.riDown
	{
		background-position: 4px -199px;
		vertical-align: top;
		background-color: #ddffe0;
	}
```

The class that controls the background of the button is **.riButton**. There is currently no definition for this class in the skin file. Add one, setting a background for the button:

```CSS
	.RadInput_Green a.riButton
	{
		background-color: #ddffe0;
	}
```

The text area when the control is enabled has the **.riEnabled** class applied. Locate this selector. Change the border color to Green and add a background color:

```CSS
	.RadInput_Green .riEnabled
	{
		color: #333;
		border: solid 1px Green;
		background:#eeffee;
	}
```

The class that controls the text area when the mouse hovers over the control is **.riHover**. Locate this selector, and change the border color from "#000" to "Green".

```CSS
	.RadInput_Green .riHover
	{
		color: #333;
		border: solid 1px Green;
	}
```

The class that controls the text area when it is displaying the empty message is **.riEmpty**. Locate this selector and change the color and border colors to "Green". Add in a background color as well:

```CSS
	.RadInput_Green .riEmpty
	{
		color: Green;
		border: solid 1px Green;
		background:#ddeedd;
	}
```

The class that controls the text area when it has focus is **.riFocused**. Change the border color to "Green":

```CSS
	.RadInput_Green .riFocused
	{
		border: solid 1px Green;
		color: #000;
	}
```

The class that controls the text area when its value is invalid is **.riError**. Add a **background-color** of "#ddd", and change the color and border-color attributes to "#ffcc55":

```CSS
	.RadInput_Green .riError
	{
		background-image: url('Input/errorSign.gif');
		background-position: center right;
		background-repeat: no-repeat;
		background-color:#ddd;
		border: solid 1px #ffcc55; color: #ffcc55;
	}
```

The class that controls the Label is **.riLabel**. Change the font color to "Green":

```CSS
	.RadInput_Green .riLabel
	{
		color: Green;
		font-size: small;
		white-space:nowrap;
	}
```

Run the application. The input controls should now look as follows:

![Green Skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c9d47b5b7350e80a3bcdc15b57fef7dc/greenskin.png)