1
00:00:02.01 --> 00:00:03.07
- [Chris] Hi, I'm Chris
Converse and in this episode,

2
00:00:03.07 --> 00:00:05.05
we'll replace the standard radio buttons

3
00:00:05.05 --> 00:00:07.09
in a html form with custom artwork

4
00:00:07.09 --> 00:00:10.02
and we'llmaking use of a
spreadsheet to do this.

5
00:00:10.02 --> 00:00:12.02
Allowing us to customize
the user experience

6
00:00:12.02 --> 00:00:14.03
to match the design of our webpage.

7
00:00:14.03 --> 00:00:15.06
So if you'd like to follow along,

8
00:00:15.06 --> 00:00:17.07
download the exercise
files and we'll be begin

9
00:00:17.07 --> 00:00:21.01
by opening the html file in a text editor.

10
00:00:21.01 --> 00:00:22.06
Now, once you have the html file open,

11
00:00:22.06 --> 00:00:24.05
up in the head area,
you'll see we have the link

12
00:00:24.05 --> 00:00:26.07
to style the css, we're
going to be opening

13
00:00:26.07 --> 00:00:29.02
this style sheet file in a moment.

14
00:00:29.02 --> 00:00:30.09
If we scroll down inside of the body area,

15
00:00:30.09 --> 00:00:33.06
we have an article element,
and then a form element

16
00:00:33.06 --> 00:00:35.01
and then inside of the form,

17
00:00:35.01 --> 00:00:37.03
we have each of our radio buttons.

18
00:00:37.03 --> 00:00:40.04
The input field and then a
label immediately following

19
00:00:40.04 --> 00:00:41.09
and then a break tag.

20
00:00:41.09 --> 00:00:43.02
Now I have a break tag here because I need

21
00:00:43.02 --> 00:00:46.05
to have a line break before each new input

22
00:00:46.05 --> 00:00:48.03
and since each of these
elements has a display

23
00:00:48.03 --> 00:00:50.01
type of in line, we don't have any way

24
00:00:50.01 --> 00:00:52.01
to force these on separate lines.

25
00:00:52.01 --> 00:00:54.08
However, we are going
to be removing these.

26
00:00:54.08 --> 00:00:56.08
Now inside of the radio
buttons themselves,

27
00:00:56.08 --> 00:00:59.06
each radio button has an ID and the label

28
00:00:59.06 --> 00:01:03.00
has a for attribute with
the same name as the ID.

29
00:01:03.00 --> 00:01:03.09
This gives us the ability

30
00:01:03.09 --> 00:01:06.03
to click on the labels, for example.

31
00:01:06.03 --> 00:01:07.01
So if I click on weekly,

32
00:01:07.01 --> 00:01:09.01
this will activate the radio button.

33
00:01:09.01 --> 00:01:11.07
Same thing with monthly and daily.

34
00:01:11.07 --> 00:01:13.02
So now before we go over to the css,

35
00:01:13.02 --> 00:01:16.01
let's come in here and
remove the break tags.

36
00:01:16.01 --> 00:01:18.01
We're going to be hiding the input fields

37
00:01:18.01 --> 00:01:19.06
and replacing it with our own artwork

38
00:01:19.06 --> 00:01:25.01
so we don't need to have
the break tags here.

39
00:01:25.01 --> 00:01:27.01
So once we have all of these removed,

40
00:01:27.01 --> 00:01:28.05
save your html, you'll now see

41
00:01:28.05 --> 00:01:30.07
that we no longer have the line breaks

42
00:01:30.07 --> 00:01:32.07
and then we'll go back
into exercise files.

43
00:01:32.07 --> 00:01:35.00
Let's find style that css.

44
00:01:35.00 --> 00:01:37.08
Let's open that in our text editor.

45
00:01:37.08 --> 00:01:40.07
Now let's scroll down.

46
00:01:40.07 --> 00:01:46.00
Let's find the form where
it says input type = radio.

47
00:01:46.00 --> 00:01:48.03
We have an outline set to none.

48
00:01:48.03 --> 00:01:51.01
Let's come in here and
add an additional property

49
00:01:51.01 --> 00:01:54.07
of display and let's set
that to none as well.

50
00:01:54.07 --> 00:01:57.04
Save your css, go back to
the browser and hit reload

51
00:01:57.04 --> 00:01:59.07
and you'll now see that
all of the radio buttons

52
00:01:59.07 --> 00:02:02.00
are now not displaying.

53
00:02:02.00 --> 00:02:03.06
So now let's go back to the css,

54
00:02:03.06 --> 00:02:06.04
let's go into the form space
label and let's come in here

55
00:02:06.04 --> 00:02:09.03
and change some of
properties for the labels.

56
00:02:09.03 --> 00:02:12.02
First let's come in here and
set a display type of block.

57
00:02:12.02 --> 00:02:15.03
This will force each label
to be on it's own line.

58
00:02:15.03 --> 00:02:16.09
If your save your css and
go back to the browser,

59
00:02:16.09 --> 00:02:18.08
you'll now see that
daily, weekly, and monthly

60
00:02:18.08 --> 00:02:22.00
now show on their own lines.

61
00:02:22.00 --> 00:02:25.09
Back into css, let's add
another property, padding.

62
00:02:25.09 --> 00:02:29.04
Let's set nine pixels on the
top, zero pixels on the right.

63
00:02:29.04 --> 00:02:32.09
10 pixels on the bottom
and 45 pixels on the left.

64
00:02:32.09 --> 00:02:35.06
This will give us room to
place our custom art work.

65
00:02:35.06 --> 00:02:39.01
Save your css, you can see
the changes in the browser.

66
00:02:39.01 --> 00:02:40.00
And then finally, let's come in here

67
00:02:40.00 --> 00:02:43.05
and set a position property of relative.

68
00:02:43.05 --> 00:02:46.01
This way when we position the
art work inside of the label,

69
00:02:46.01 --> 00:02:52.05
it will be positioned in
relation to the label itself.

70
00:02:52.05 --> 00:02:54.05
So now with that in
place, let's come in here

71
00:02:54.05 --> 00:02:59.02
and let's add a pseudo element
so we can hold our graphic.

72
00:02:59.02 --> 00:03:05.06
So type form space label, two colons.

73
00:03:05.06 --> 00:03:11.01
Type in the word before,
then add our brackets.

74
00:03:11.01 --> 00:03:12.04
First property inside
of our pseudo element

75
00:03:12.04 --> 00:03:15.08
is going to be content, colon space.

76
00:03:15.08 --> 00:03:20.03
Two ticks for a string
and then a semi colon.

77
00:03:20.03 --> 00:03:22.06
Next let's set a display type.

78
00:03:22.06 --> 00:03:27.08
We're going to set this to in line block.

79
00:03:27.08 --> 00:03:30.07
Next we'll set a width property.

80
00:03:30.07 --> 00:03:36.00
We're going to set the width to 40 pixels.

81
00:03:36.00 --> 00:03:37.05
Next we'll set a height property.

82
00:03:37.05 --> 00:03:41.02
We're going to set this
to 40 pixels as well.

83
00:03:41.02 --> 00:03:42.00
Now let's come in here

84
00:03:42.00 --> 00:03:45.03
and let's point to our
spreadsheet graphic.

85
00:03:45.03 --> 00:03:47.05
So we'll use the background property

86
00:03:47.05 --> 00:03:50.03
and then for the first value,
we're going to type URL

87
00:03:50.03 --> 00:03:52.06
to bring in a background image.

88
00:03:52.06 --> 00:03:58.02
So URL, parenthesis,
then we'll put in images/

89
00:03:58.02 --> 00:04:04.03
radio_button_art.svg.

90
00:04:04.03 --> 00:04:07.03
Then outside of the parenthesis,
we'll set a no repeat

91
00:04:07.03 --> 00:04:08.09
and then we'll set a position x

92
00:04:08.09 --> 00:04:11.05
of zero and a position y of zero.

93
00:04:11.05 --> 00:04:13.09
Then a semi colon.

94
00:04:13.09 --> 00:04:16.03
Next we'll come in here and
set a background size property

95
00:04:16.03 --> 00:04:18.00
and we need to set the background size

96
00:04:18.00 --> 00:04:20.05
to be in proportion to
the original spreadsheet.

97
00:04:20.05 --> 00:04:22.03
So the spreadsheet that we have set up

98
00:04:22.03 --> 00:04:25.08
is 100 pixels across by 300 pixels tall.

99
00:04:25.08 --> 00:04:27.03
So the scale is down, I need to make sure

100
00:04:27.03 --> 00:04:31.02
that the scale x is 1/3 of the scale y.

101
00:04:31.02 --> 00:04:33.06
So for the width, we're going
to set this to 40 pixels,

102
00:04:33.06 --> 00:04:40.04
then a space, we'll set
the height to 120 pixels.

103
00:04:40.04 --> 00:04:42.02
Next we'll set a position property.

104
00:04:42.02 --> 00:04:43.09
We'll set this to absolute to position

105
00:04:43.09 --> 00:04:47.07
this inside of the labels.

106
00:04:47.07 --> 00:04:53.06
Next we'll set a top property,
set this to -1 pixels,

107
00:04:53.06 --> 00:04:56.04
and then we'll set the left
property to zero pixels.

108
00:04:56.04 --> 00:04:57.08
So now with these properties
in place, save your

109
00:04:57.08 --> 00:05:00.00
css, let's go back to the browser.

110
00:05:00.00 --> 00:05:02.05
We'll now see the first piece of art work

111
00:05:02.05 --> 00:05:03.08
in our spreadsheet showing up here.

112
00:05:03.08 --> 00:05:06.02
Which is the open pink circle

113
00:05:06.02 --> 00:05:08.09
and it shows up inside of each
one of the label elements.

114
00:05:08.09 --> 00:05:10.09
So now let's go back to our css.

115
00:05:10.09 --> 00:05:14.04
Let's add a hover state for our labels.

116
00:05:14.04 --> 00:05:20.09
So form space label, colon hover.

117
00:05:20.09 --> 00:05:23.04
Then we'll target the pseudo
class inside of the label

118
00:05:23.04 --> 00:05:27.00
so two colons.

119
00:05:27.00 --> 00:05:30.08
Then type before, put it in our brackets.

120
00:05:30.08 --> 00:05:32.05
And now let's come in here
and let's set the background

121
00:05:32.05 --> 00:05:37.00
position to zero for the position x

122
00:05:37.00 --> 00:05:40.08
and -40 pixels for the y position.

123
00:05:40.08 --> 00:05:43.03
Let's hit save, go back to the browser

124
00:05:43.03 --> 00:05:44.04
and now when we hover over these,

125
00:05:44.04 --> 00:05:46.08
we'll see the second piece of
art work in the spread sheet.

126
00:05:46.08 --> 00:05:47.06
Since we're shifting that

127
00:05:47.06 --> 00:05:50.07
background graphic 40 pixels vertically

128
00:05:50.07 --> 00:05:52.00
and now the last thing we need to do

129
00:05:52.00 --> 00:05:53.06
is make this art work sensitive to

130
00:05:53.06 --> 00:05:55.06
the checked state of the radio buttons.

131
00:05:55.06 --> 00:05:59.00
Even though we have the
display type set to none.

132
00:05:59.00 --> 00:06:02.09
So back to our css,
let's hit a few returns.

133
00:06:02.09 --> 00:06:06.00
We'll start by typing form, then a space.

134
00:06:06.00 --> 00:06:09.02
Then we'll type input.

135
00:06:09.02 --> 00:06:12.03
Beginning and ending square bracket.

136
00:06:12.03 --> 00:06:16.06
Then we'll set type equals two quotes.

137
00:06:16.06 --> 00:06:18.08
Type in the word radio.

138
00:06:18.08 --> 00:06:19.09
Then outside of the square brackets,

139
00:06:19.09 --> 00:06:22.09
without a space, hit a colon.

140
00:06:22.09 --> 00:06:26.00
Then type checked, then a space,

141
00:06:26.00 --> 00:06:31.00
then we use a plus sign, then
we'll add the label element.

142
00:06:31.00 --> 00:06:34.06
Two colons and then we'll
target the pseudo element.

143
00:06:34.06 --> 00:06:38.01
So what the plus sign does
is it selects the label

144
00:06:38.01 --> 00:06:41.01
if it immediately follows the form

145
00:06:41.01 --> 00:06:46.02
with an input type of radio
in it's checked state.

146
00:06:46.02 --> 00:06:47.09
And so if these conditions are true,

147
00:06:47.09 --> 00:06:49.04
we're going to come in here
and set the background position

148
00:06:49.04 --> 00:06:54.06
to zero on the x and
negative 80 pixels for the y.

149
00:06:54.06 --> 00:06:55.09
And now before we test this,

150
00:06:55.09 --> 00:06:58.03
I'm going to come over
here and fix my typo.

151
00:06:58.03 --> 00:07:01.04
This should be input,
so with that in place,

152
00:07:01.04 --> 00:07:03.08
hit save, go back to the browser.

153
00:07:03.08 --> 00:07:05.06
When I hover over these,
I see the second state

154
00:07:05.06 --> 00:07:07.04
of the art work in the spread sheet

155
00:07:07.04 --> 00:07:08.09
and then when I click on one of these,

156
00:07:08.09 --> 00:07:11.05
we are now checking
the hidden radio button

157
00:07:11.05 --> 00:07:14.09
and because the label immediately
follows that checked item,

158
00:07:14.09 --> 00:07:17.05
we're now shifting the graphic -80 pixels.

159
00:07:17.05 --> 00:07:20.00
So now we get the effect
of our custom art work

160
00:07:20.00 --> 00:07:24.00
representing the checked
state of each radio button

161
00:07:24.00 --> 00:07:25.03
and so now, if you'd like to learn more

162
00:07:25.03 --> 00:07:27.01
about styling form elements,

163
00:07:27.01 --> 00:07:29.06
check out this course entitled
Styling Form Elements.

164
00:07:29.06 --> 00:07:31.09
Which is also available
here in the library

165
00:07:31.09 --> 00:07:33.07
and so with that, I'll
conclude this episode

166
00:07:33.07 --> 00:07:36.06
and as always, thanks for watching.