The template package includes all the graphics and artwork source files you will need to use and adapt the various components.
- Source files are provided in Adobe Illustrator CS5 and Adobe Fireworks CS5 formats. Using the Adobe Fireworks CS5 format is recommended because these are prenamed and sliced for easy export.
- CSS sprites are used for certain elements. Use of sprites reduces HTTP requests and the flickering that can occur as hover states load on slow connections. For a thorough introduction to CSS sprites, see The Mystery of CSS Sprites.
Figure: One sprite sheet is repositioned as needed to create all six states of the 5-star rating component.
Note: The styling of the 5-star component sprite varies between the Adobe Illustrator and Fireworks templates.
Customising the colour scheme
Tip: To easily customise the component colour schemes, simply search and replace within the style sheets and Adobe graphics files. The majority of the template graphics can be restyled by changing the following colours:
- #ECECEC: The bottom (dark) portion of the gradient used for boxes and the branding area.
- #C0DA07: The bottom (light) portion of the green hover state.
- #82CB20: The top (dark) portion of the green hover state.
- #D8D8D8: All borders, except those surrounding the toggle switches.
- #333333: Body copy.
- #555555: Arrows.
- #666666: Footer background colour.
Tip: To search and replace in Adobe Illustrator, select a colour and then choose Select -> Same fill or stroke. In Adobe Fireworks, choose Edit -> Find, and then choose Fill Color and specify the chosen colour.
See Using SASS for additional information about changing colour schemes within CSS.
