We do this by creating substyles,
which involves changing the second panel??™s CSS to start with a dot and the name for the style??”in this
63
WORKING WITH STATES
case, .mainPanel. We can also remove the second border color to avoid repetition so that we end up
with the CSS in Figure 3-32.
Figure 3-32. Our styling CSS with style and substyles
Have a look at what happens when you modify the title styles for the panel (in the Title Styles tab), as
shown in Figure 3-33.
Figure 3-33. Modified title styles in the Style Explorer
Modifying the title styles provides the CSS for the title as a separate piece of CSS under the heading
.mypanelTitle that will need to be connected to the panel you want to associate it with. We need to
copy this CSS into our CSS file and then modify it. We also have to change the name so that it shows
which panel it is associated with; in this case, we can use .mainPanelTitle. We then have to be
explicit that this connects with our mainPanel. The code for this step looks like this:
titleStyleName: "mainPanelTitle";
and should be placed in the .mainPanel CSS.
64
CHAPTER 3
31. Change your CSS file so that it looks like Figure 3-34.
Let??™s continue to do the same for the right-side
panels. Your CSS file should end up as shown in
Figure 3-35.
32. While we are here, let??™s also set the
backgroundColor to black.
Just as we did in Chapter 2, we now need to
enter the code into the MXML file that calls
on the CSS file.
Figure 3-35.
Pages:
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67