You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: controls/dateinput/appearance-and-styling/creating-a-custom-skin.md
+44-46Lines changed: 44 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,7 @@ See [Understanding the Skin CSS File]({%slug raddateinput/appearance-and-styling
37
37
1. Open Input.Green.css and replace all instances of _Default with _Green. Then save the file:
38
38
39
39
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:
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
41
42
42
43
43
1. Change the **Skin** property of your four **RadInput** controls to "Green".
@@ -51,76 +51,75 @@ See [Understanding the Skin CSS File]({%slug raddateinput/appearance-and-styling
51
51
52
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:
53
53
54
-
````CSS
55
-
.RadInput_Green a.riUp
56
-
{
57
-
background-position: 4px -98px;
58
-
vertical-align: top;
59
-
background-color: #ddffe0;
60
-
}
54
+
````CSS
55
+
.RadInput_Greena.riUp
56
+
{
57
+
background-position: 4px-98px;
58
+
vertical-align: top;
59
+
background-color: #ddffe0;
60
+
}
61
61
````
62
62
63
-
````CSS
64
-
.RadInput_Green a.riDown
65
-
{
66
-
background-position: 4px -199px;
67
-
vertical-align: top;
68
-
background-color: #ddffe0;
69
-
}
63
+
````CSS
64
+
.RadInput_Greena.riDown
65
+
{
66
+
background-position: 4px-199px;
67
+
vertical-align: top;
68
+
background-color: #ddffe0;
69
+
}
70
70
````
71
71
72
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:
73
73
74
-
````CSS
75
-
.RadInput_Green a.riButton
76
-
{
77
-
background-color: #ddffe0;
78
-
}
74
+
````CSS
75
+
.RadInput_Greena.riButton
76
+
{
77
+
background-color: #ddffe0;
78
+
}
79
79
````
80
80
81
81
82
82
83
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:
84
84
85
-
````CSS
86
-
.RadInput_Green .riEnabled
87
-
{
88
-
color: #333;
89
-
border: solid 1px Green;
90
-
background:#eeffee;
91
-
}
85
+
````CSS
86
+
.RadInput_Green.riEnabled
87
+
{
88
+
color: #333;
89
+
border: solid1pxGreen;
90
+
background:#eeffee;
91
+
}
92
92
````
93
93
94
94
95
95
96
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
97
98
-
````CSS
99
-
.RadInput_Green .riHover
100
-
{
101
-
color: #333;
102
-
border: solid 1px Green;
103
-
}
98
+
````CSS
99
+
.RadInput_Green.riHover
100
+
{
101
+
color: #333;
102
+
border: solid1pxGreen;
103
+
}
104
104
````
105
105
106
106
107
107
108
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
109
110
-
````CSS
111
-
.RadInput_Green .riEmpty
112
-
{
113
-
color: Green;
114
-
border: solid 1px Green;
115
-
background:#ddeedd;
116
-
}
110
+
````CSS
111
+
.RadInput_Green.riEmpty
112
+
{
113
+
color: Green;
114
+
border: solid1pxGreen;
115
+
background:#ddeedd;
116
+
}
117
117
````
118
118
119
119
120
-
121
120
1. The class that controls the text area when it has focus is **.riFocused**. Change the border color to "Green":
122
121
123
-
````CSS
122
+
````CSS
124
123
.RadInput_Green.riFocused
125
124
{
126
125
border: solid1pxGreen;
@@ -131,9 +130,9 @@ See [Understanding the Skin CSS File]({%slug raddateinput/appearance-and-styling
131
130
132
131
133
132
134
-
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":
133
+
1. 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":
135
134
136
-
````CSS
135
+
````CSS
137
136
.RadInput_Green.riError
138
137
{
139
138
background-image: url('Input/errorSign.gif');
@@ -148,7 +147,7 @@ See [Understanding the Skin CSS File]({%slug raddateinput/appearance-and-styling
148
147
149
148
1. The class that controls the Label is **.riLabel**. Change the font color to "Green":
150
149
151
-
````CSS
150
+
````CSS
152
151
.RadInput_Green.riLabel
153
152
{
154
153
color: Green;
@@ -158,5 +157,4 @@ See [Understanding the Skin CSS File]({%slug raddateinput/appearance-and-styling
0 commit comments