Skip to content

Commit 9680e59

Browse files
JekataJekata
authored
docs(maskettextbox): fix code snippets and images layout
1 parent 9ce6d14 commit 9680e59

File tree

1 file changed

+32
-29
lines changed

1 file changed

+32
-29
lines changed

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ position: 3
1313

1414

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

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

2123
See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-styling/html-output-and-css-styling%}) for more information on specific CSS file properties.
2224

@@ -29,29 +31,29 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
2931
1. In the Solution Explorer, create a new "Green" directory in your project.
3032

3133
1. Copy the default **RadMaskedTextBox** 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-
34+
>note The file path will typically be similar to this example: *\Program Files\Progress\UI for ASP.NET AJAX RX YYYY\Skins\Default.*
3535
1. In the Solution Explorer, rename "Input.Default.css" to "Input.Green.css".
3636
![Add files for custom skin](images/AddFilesForCustomSkin.png)
3737
1. Open Input.Green.css and replace all instances of _Default with _Green. Then save the file:
38-
![Find and replace](images/FindAndReplace.png)
38+
![Find and replace](images/FindAndReplace.png)
3939

4040
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)
41+
42+
![Drag CSS file](images/dragcssfile.png)
4243

4344
1. Change the **Skin** property of your four **RadInput** controls to "Green".
4445

4546
1. Set the **EnableEmbeddedSkins** property of your four **RadInput** controls to "False".
4647

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

5052
## Editing the CSS classes
5153

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:
54+
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:
5355

54-
````CSS
56+
````CSS
5557
.RadInput_Green a.riUp
5658
{
5759
background-position: 4px -98px;
@@ -60,7 +62,7 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
6062
}
6163
````
6264

63-
````CSS
65+
````CSS
6466
.RadInput_Green a.riDown
6567
{
6668
background-position: 4px -199px;
@@ -69,9 +71,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
6971
}
7072
````
7173

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:
74+
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:
7375

74-
````CSS
76+
````CSS
7577
.RadInput_Green a.riButton
7678
{
7779
background-color: #ddffe0;
@@ -80,9 +82,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
8082

8183

8284

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:
85+
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:
8486

85-
````CSS
87+
````CSS
8688
.RadInput_Green .riEnabled
8789
{
8890
color: #333;
@@ -92,10 +94,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
9294
````
9395

9496

97+
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".
9598

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".
97-
98-
````CSS
99+
````CSS
99100
.RadInput_Green .riHover
100101
{
101102
color: #333;
@@ -105,9 +106,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
105106

106107

107108

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:
109+
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:
109110

110-
````CSS
111+
````CSS
111112
.RadInput_Green .riEmpty
112113
{
113114
color: Green;
@@ -118,9 +119,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
118119

119120

120121

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

123-
````CSS
124+
````CSS
124125
.RadInput_Green .riFocused
125126
{
126127
border: solid 1px Green;
@@ -130,9 +131,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
130131

131132

132133

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

135-
````CSS
136+
````CSS
136137
.RadInput_Green .riNegative
137138
{
138139
border: solid 1px Green;
@@ -142,9 +143,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
142143

143144

144145

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":
146+
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":
146147

147-
````CSS
148+
````CSS
148149
.RadInput_Green .riError
149150
{
150151
background-image: url('Input/errorSign.gif');
@@ -157,9 +158,9 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
157158

158159

159160

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

162-
````CSS
163+
````CSS
163164
.RadInput_Green .riLabel
164165
{
165166
color: Green;
@@ -170,5 +171,7 @@ See [Understanding the Skin CSS File]({%slug radmaskedtextbox/appearance-and-sty
170171

171172

172173

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

0 commit comments

Comments
 (0)