Skip to content

Commit 43bf55c

Browse files
JekataJekata
authored
docs(numerictextbox): fix the snippets and images layout
1 parent 9680e59 commit 43bf55c

File tree

1 file changed

+29
-25
lines changed

1 file changed

+29
-25
lines changed

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

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ position: 3
1313

1414

1515
The following tutorial demonstrates creating a custom **RadNumericTextBox** skin, using the default skin as a base. This new skin will take the appearance of the input controls from their default look:
16+
1617
![Default Skin](images/DefaultSkin.png)
1718

1819
to the following:
20+
1921
![Green Skin](images/GreenSkin.png)
2022

2123
See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styling/html-output-and-css-styling%}) for more information on specific CSS file properties.
@@ -29,29 +31,31 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
2931
1. In the Solution Explorer, create a new "Green" directory in your project.
3032

3133
1. Copy the default **RadNumericTextBox** 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-
>
34+
>note The file path will typically be similar to this example: *\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins\Default.*
3435

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

40-
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+
![Find and replace](images/FindAndReplace.png)
42+
43+
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:
4144
![Drag CSS file](images/dragcssfile.png)
4245

4346
1. Change the **Skin** property of your four **RadInput** controls to "Green".
4447

4548
1. Set the **EnableEmbeddedSkins** property of your four **RadInput** controls to "False".
4649

4750
1. Run the application. The new "Green" skin looks just like the Default skin:
51+
4852
![Default Skin](images/DefaultSkin.png)
4953

5054
## Editing the CSS classes
5155

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:
56+
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:
5357

54-
````CSS
58+
````CSS
5559
.RadInput_Green a.riUp
5660
{
5761
background-position: 4px -98px;
@@ -60,7 +64,7 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
6064
}
6165
````
6266

63-
````CSS
67+
````CSS
6468
.RadInput_Green a.riDown
6569
{
6670
background-position: 4px -199px;
@@ -69,9 +73,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
6973
}
7074
````
7175

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:
76+
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:
7377

74-
````CSS
78+
````CSS
7579
.RadInput_Green a.riButton
7680
{
7781
background-color: #ddffe0;
@@ -80,9 +84,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
8084

8185

8286

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:
87+
The textarea when the control is enabled has the **.riEnabled** class applied. Locate this selector. Change the border color to Green and add a background color:
8488

85-
````CSS
89+
````CSS
8690
.RadInput_Green .riEnabled
8791
{
8892
color: #333;
@@ -93,9 +97,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
9397

9498

9599

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".
100+
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".
97101

98-
````CSS
102+
````CSS
99103
.RadInput_Green .riHover
100104
{
101105
color: #333;
@@ -105,9 +109,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
105109

106110

107111

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:
112+
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:
109113

110-
````CSS
114+
````CSS
111115
.RadInput_Green .riEmpty
112116
{
113117
color: Green;
@@ -118,9 +122,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
118122

119123

120124

121-
1. The class that controls the text area when it has focus is **.riFocused**. Change the border color to "Green":
125+
The class that controls the text area when it has focus is **.riFocused**. Change the border color to "Green":
122126

123-
````CSS
127+
````CSS
124128
.RadInput_Green .riFocused
125129
{
126130
border: solid 1px Green;
@@ -130,9 +134,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
130134

131135

132136

133-
1. The class that controls the text area of **RadNumericTextBox** when it's value is negative is **.riNegative**. Change the border color to "Green":
137+
The class that controls the text area of **RadNumericTextBox** when it's value is negative is **.riNegative**. Change the border color to "Green":
134138

135-
````CSS
139+
````CSS
136140
.RadInput_Green .riNegative
137141
{
138142
border: solid 1px Green;
@@ -142,9 +146,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
142146

143147

144148

145-
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":
149+
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":
146150

147-
````CSS
151+
````CSS
148152
.RadInput_Green .riError
149153
{
150154
background-image: url('Input/errorSign.gif');
@@ -157,9 +161,9 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
157161

158162

159163

160-
1. The class that controls the Label is **.riLabel**. Change the font color to "Green":
164+
The class that controls the Label is **.riLabel**. Change the font color to "Green":
161165

162-
````CSS
166+
````CSS
163167
.RadInput_Green .riLabel
164168
{
165169
color: Green;
@@ -169,6 +173,6 @@ See [Understanding the Skin CSS File]({%slug numerictextbox/appearance-and-styli
169173
````
170174

171175

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

173-
1. Run the application. The input controls should now look as follows:
174178
![Green Skin](images/GreenSkin.png)

0 commit comments

Comments
 (0)