We??™ll continue to
use CSS for defining the visual styles of our presentation. While CSS is very powerful, learning
the basics of its use is straightforward and easy??”and even fun!
CHAPTER 4 ?– CREATING THE PRODUCT CATALOG: PART 1 100
Exercise: Creating the departments_list Componentized Template
1. Open the tshirtshop.css file in the tshirtshop/styles folder, and add the following code listing.
These styles refer to the way department names should look inside the departments list when they are
unselected, unselected but with the mouse hovering over them, or selected.
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec;
margin-top: 15px;
}
div.yui-b div p.box-title {
background: #0590C7;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
a {
color: #0590C7;
}
a:hover {
color: #ff0000;
}
a.selected {
font-weight: bold;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 1px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
CHAPTER 4 ?– CREATING THE PRODUCT CATALOG: PART 1 101
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
2. Edit the presentation/application.php file, and add the following two lines to the constructor of the
Application class.
Pages:
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186