Introduction
Creating page styles for dynamic pages (how do you like the Brown Frog theme from AIM pages?) presents some unique challenges for designers. You can never be sure how many columns or modules might be on the page, what order those modules might appear in, and what styles the user may have chosen. This makes it difficult to create a truly integrated and unique design. But, it doesn't make it impossible, and really, who doesn't want a challenge?
Just a note, we won't have user-created page styles ready for our first launch. This document is just to introduce the concept and get you ready, so when we open AIM Pages for user-created themes uploading, you'll have some ideas percolating, and maybe some trial code.
Pieces Of A Page
There are several distinct pieces of a page, and each should be treated differently. They each live in distinct containers, all with unique IDs (because IDs have to be unique, ya know). Here's a mockup of what those pieces are:
There will, of course, be modules in each column, and there could be any number of columns (we're not going to stop people from creating 100 columns if they want to). We're not entirely sure about what will be contained in the header and footer containers, but do expect them to be there. The body element will have an ID of page in the regular view mode, and that ID will be on some other element in edit mode. That means that styling the body element isn't wise. You should start all of your selectors with #page, so you can be sure you're selecting from the right descendant. For more information about specificity, see our CSS overview. For more information about how we recommend you use specificity, see our specificity table.
If you'd like to start playing, check out our example page. You can save it to your hard drive and start developing styles. Or, if you have Firefox, you could use the Web Developer Toolbar and edit the CSS right in the browser. Of course, don't change the existing styles, but you can add your own and see what happens.
Style Suggestions
This section contains suggestions we think will make your lives easier when creating page templates.
Styling Columns
We're looking forward to a day when all browsers support display: table. Unfortunately, no version of Internet Explorer supports it, so we're stuck using floats and fixed widths to get the columns to do the "right" thing. It also means that we've been downright byzantine in setting the widths, margins, and padding on columns.
Why tell you this? It's a warning to leave column positioning to us. Feel free to add backgrounds, text color, and so forth. Just please don't specify float, margin, padding, position, top or left. Thanks!
CSS Hacks
We know that CSS isn't perfect... or more appropriately, CSS support among the leading browsers isn't perfect. That means we sometimes need to use "hacks" to get what we want. We highly recommend using just a couple of them, including the underscore hack, and using child selectors. The underscore hack gives us a way to set properties that only Internet Explorer for Windows will apply. The child selector isn't understood by Internet Explorer, so it works for setting properties for browsers like Safari, Firefox, and Opera.
So, unless you can't help it, we recommend using just those two styles. If you need to use others, well, we'll live. But, if you could try to avoid using the other CSS hacks, we'd appreciate it.
Overly Generic Styles
As you read in the CSS overview, we're going to be dealing with a lot of CSS files trying to style different pieces of the page. In order to make this work, everyone has to keep to their part of the play area. Using overly generic styles (like styling just a, for example) could have devastating effects on the page's usability.
As we said above, if you keep all your page style descending from #page, you should be alright.
Designing For One Browser
The Web is not a one browser place. There are several browsers out there that provide good standards support and have enough usage to pay attention to. That means we shouldn't be designing for just one browser. You should test your template in at least Firefox, Internet Explorer, and Safari. If you don't own a Macintosh for the Safari test, please post a message to the message board and ask someone to test it for you.
Describing Your Template
Now that you've created your template, you need to tell us a little bit about it. When we open up AIM Pages for user-created themes uploading (not sure when that will happen), you'll need to provide the following information:
- Title of your theme design
- Description of your theme: This should include any caveats, for example, if your template is optimized for three columns, or is limited to a certain set of browsers.
- Theme thumbnail: A thumbnail (90 x 60 pixels) of your design, so people know what they're going to get.
- Your home page: You want credit, right?
- The license your theme is released under. The URL to that license is preferred, or just "copyright".
- Any other authors that helped create your theme.
There you go! Hopefully, you're all set to get creative and come up with a killer theme! Check out the ones below, or go back to AIM Pages themes gallery to get inspired.
Blue Clouds Theme
Flowers Theme
