Skip to content

Commit 6a21e41

Browse files
JekataJekata
authored
docs(textbox): fix the code snippets and images layout
1 parent d5dbe4e commit 6a21e41

File tree

1 file changed

+25
-28
lines changed

1 file changed

+25
-28
lines changed

‎controls/textbox/appearance-and-styling/creating-a-custom-skin.md‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -29,29 +29,29 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
2929
1. In the Solution Explorer, create a new "Green" directory in your project.
3030

3131
1. 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.
32-
>note The file path will typically be similar to this example: *\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins\Default.*
33-
>
32+
>note The file path will typically be similar to this example: *\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins\Default.*
3433

3534
1. In the Solution Explorer, rename "Input.Default.css" to "Input.Green.css".
36-
![Add files for custom skin](images/AddFilesForCustomSkin.png)
35+
![Add files for custom skin](images/AddFilesForCustomSkin.png)
3736
1. Open Input.Green.css and replace all instances of _Default with _Green. Then save the file:
38-
![Find and replace](images/FindAndReplace.png)
37+
![Find and replace](images/FindAndReplace.png)
3938

4039
1. 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:
41-
![Drag CSS file](images/dragcssfile.png)
40+
![Drag CSS file](images/dragcssfile.png)
4241

4342
1. Change the **Skin** property of your four **RadInput** controls to "Green".
4443

4544
1. Set the **EnableEmbeddedSkins** property of your four **RadInput** controls to "False".
4645

4746
1. Run the application. The new "Green" skin looks just like the Default skin:
48-
![Default Skin](images/DefaultSkin.png)
47+
48+
![Default Skin](images/DefaultSkin.png)
4949

5050
## Editing the CSS classes
5151

52-
1. 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:
52+
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:
5353

54-
````CSS
54+
````CSS
5555
.RadInput_Green a.riUp
5656
{
5757
background-position: 4px -98px;
@@ -60,7 +60,7 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
6060
}
6161
````
6262

63-
````CSS
63+
````CSS
6464
.RadInput_Green a.riDown
6565
{
6666
background-position: 4px -199px;
@@ -69,9 +69,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
6969
}
7070
````
7171

72-
1. 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:
72+
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:
7373

74-
````CSS
74+
````CSS
7575
.RadInput_Green a.riButton
7676
{
7777
background-color: #ddffe0;
@@ -80,9 +80,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
8080

8181

8282

83-
1. 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:
83+
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:
8484

85-
````CSS
85+
````CSS
8686
.RadInput_Green .riEnabled
8787
{
8888
color: #333;
@@ -93,9 +93,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
9393

9494

9595

96-
1. 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".
96+
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".
9797

98-
````CSS
98+
````CSS
9999
.RadInput_Green .riHover
100100
{
101101
color: #333;
@@ -105,9 +105,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
105105

106106

107107

108-
1. 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:
108+
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:
109109

110-
````CSS
110+
````CSS
111111
.RadInput_Green .riEmpty
112112
{
113113
color: Green;
@@ -116,11 +116,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
116116
}
117117
````
118118

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

120-
121-
1. The class that controls the text area when it has focus is **.riFocused**. Change the border color to "Green":
122-
123-
````CSS
121+
````CSS
124122
.RadInput_Green .riFocused
125123
{
126124
border: solid 1px Green;
@@ -129,9 +127,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
129127
````
130128

131129

132-
1. The class that controls the text area when it's value is invalid is **.riError**. Add a **background-color** of "#ddd", and change the color and border-color attributes to "#ffcc55":
130+
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":
133131

134-
````CSS
132+
````CSS
135133
.RadInput_Green .riError
136134
{
137135
background-image: url('Input/errorSign.gif');
@@ -143,10 +141,9 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
143141
````
144142

145143

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

147-
1. The class that controls the Label is **.riLabel**. Change the font color to "Green":
148-
149-
````CSS
146+
````CSS
150147
.RadInput_Green .riLabel
151148
{
152149
color: Green;
@@ -156,6 +153,6 @@ See [Understanding the Skin CSS File]({%slug radtextbox/appearance-and-styling/h
156153
````
157154

158155

159-
160-
1. Run the application. The input controls should now look as follows:
156+
Run the application. The input controls should now look as follows:
157+
161158
![Green Skin](images/GreenSkin.png)

0 commit comments

Comments
 (0)