Below is a table describing the graphic elements that need to be considered when designing your application:
| Creative element | Dimensions | Description |
|---|---|---|
| tout-1.png tout.psd | width:930px | The first big graphic people will see on the homepage telling them the contest is open. Touts are the big call-to-action graphics at the top of the home page, below the navigation. You can set a different tout for each phase, so that the users landing on the home page know the current phase. Change the path in the /home template. |
| tout-2.png | width:930px | The tout for the second phase: Entries are closed, come back to vote when we pick some finalists. Change the path in the /home template. |
| tout-3.png | width:930px | The tout for the third phase: Vote for the finalists! Change the path in the /home template. |
| tout-4.png | width:930px | The tout for the fourth phase: Voting is closed, come back later to see the winners! Change the path in the /home template. |
| tout-5.png | width:930px | The tout for the final phase: Check out the contest winner! Change the path in the /home template. |
| buttons.png | This sprite is used for the next and previous buttons on the /entry page, gallery pagers, the vote button and most of the clickable elements on the website. Change the path in base.css. |
|
| corners.png | This sprite image is used for the navigation bar background, tab contents background, and the top and bottom of the various boxes. For boxlarge, boxmedium and boxsmall the corners.png has the same bottom and top height, it is the width that will change per column. Change the path in base.css. |
|
| backgrounds.png | This sprite image contains the small, medium and large content box backgrounds that will tile vertically. Change the path in base.css. |
|
| logo.png | width:207px | By default, this image is in the top left of every page. If you don't include an ad, you have 930px width to play with. |
| header.png | width:930px | If you wish to remove the logo, and take the whole header area, create a header image. |
| footer.png | width:930px | Extend the page look and branding with a footer image. |
Now, put all these images into Asset Manager and update the paths in base.css and /home.
