Eco Matt

Picture 33

Matthew Graves has kindly shared one really fine example of an accordion. Matt is known on the RapidWeaver forums as the guy who found a way to put accordions inside accordions. This example won't show you how to set up something as wild as that, but it will show you how to replicate is simple, classic, contemporary design. It's beautifully understated and highly useful. Enjoy.

Custom CSS
Picture 25
To make your Accordion look like Matt's you'll need to start by adding a little bit of custom CSS. Don't be afraid, it's really not that bad. Just type this stuff into the Custom CSS area of the page inspector:
.acToggle {text-align:center;}
Title Style
Picture 26
Matt is really going for a minimalist's style here. The only property he's going to override is the CSS Tag. This allows the Custom CSS that we set up earlier to have a clean place to connect to. The only changed setting to change the tag to "DIV"
Title Structure
Picture 27
The height and width are set to match the title images. Also a little bit of padding and a huge left margin. I don't know the reason for the margin -- but this is what Matt did so I'm just repeating. Maybe can someone can fill me in.
Title Image
Picture 28
Matt uses a couple very nice images here. I think you should probably go find your own images -- but there are some good lessons to be learned. Notice how he uses the same images here turned over -- with some extra padding to make them look like they've flipped. Repetition is one of the tenets of aesthetic. Matt is clearly a master. Soak in his creativity. Digg it!
Title Effect
Picture 29
Just as you'd expect. It's a standard accordion, centered on the page. The only really unique parts here are that everything starts closed. This works well with the Content settings. The Content is very wide, which is quite functional, but would corrupt the clean style of the page if it was always visible.
Content Style
Picture 30
Nothing to see here, move along. Not one setting turned on. He's going for straight functional text.
Content Structure
Picture 31
I hope you have a wide theme because this accordion is wide wide wide! I didn't so I've had to go to a different theme to display this accordion in all its glory. I think this accordion would still look great even on some narrower content, but I wanted to be faithful to Matt's design -- so I sacrificed my theme to it!
Content Image
Picture 32
No content images. Not exactly a surprise. We're just keeping it clean.