First off, let me be clear: we're not asking you to create CSS -- at least, not yet, anyway. What you do need to be aware of is how our pages use CSS, and that will influence your designs somewhat. For example, our profile pages don't really use tables; instead they use DIVs and SPANs for major layout elements. (There are some exceptions, which I'll describe if anyone is interested.)

To begin designing your template, first take a look at either one of the new tribe.net profiles, or one of the concepts I've posted in this tribe's photo album:

Sample new profile (mine):
tinyurl.com/5w33s

Sample template, NYC concept:
tinyurl.com/4zpyn

If you look at my profile, you'll notice that each module is contained in its own box -- those are individual DIVs, which in turn are contained in two separate columns: a narrow one on the left, and a wider one on the right. Within each DIV, you're able to edit the styles for these elements:

- module title font, size and color
- module text font, size and color
- module background, color and/or image (optional)
- module border, color and/or image (optional)

Going up a level, both columns are contained in a larger enclosing DIV, which has some of the same customizable attributes:

- container background, color and/or images
- container header, color and/or images
- container footer, color and/or images

You can see these most clearly in the NYC concept ( tinyurl.com/4zpyn ) mentioned above: I've designed an upper background texture (the Brooklyn Bridge, subway tokens and people) that sits behind the content modules. Below all of that, at the bottom of the page, is a New York City skyline graphic. All of this sits on top of a yellowish background color for the main content DIV.

The NYC template has just about all the special treatments I could throw at it; there are special graphical borders for all the photos, plus customized buttons and divider lines for each module. Check the other two concepts for different combinations of style effects:

Sample template, Fibre concept:
tinyurl.com/5r84r

Sample template, Nozzle concept:
tinyurl.com/53ws3


The main thing to remember with designing a CSS-based template like this is that you're designing for a bunch of rules that are applied to self-contained objects on the screen. So, the challenge is to come up with a visual language that can be applied across a collection of objects, rather than designing each object separately. In general:

- All module titles should be the same style.
- All photos should be displayed the same way.
- All modules should have the same background images or colors.
- Your design should be flexible enough to handle very many modules, or very few -- and few/many individual items in each module. Design a template that can handle 20 different modules, each with 3 items, or one that has one giant blog module with 40 posts in it.