Create Template

In my sample site I created a template and called it Config. I then assigned it to my document ID of 1 and named my document Site Configuration. One by-product of using the number 1 document is that you will have to go to Tool/Configuration/Site and set you Site start to an ID of 2. I also unchecked Show in menu and Searchable in my number 1 document. With all of these points taken care of the config page should be well outside the ordinary flow of your site.

Create Template Variables

By utilizing a dedicated template we can now hook Template Variables (TV) into our document. Create your TVs and assign them to the Config template.

In the most straightforward sense you can use this for client controlled global information like telephone numbers and addresses, but after getting things going I realized you could also use a dynamic CSS document from within MODx (a later post) and allow the end user to control many of the design components of their site. I tested this out on things like a header image and background colors.

In my testing I was exclusively using the GetField snippet (see below) to call in my variables from within either my site template or from my dynamic CSS document:

background: [[GetField? &docid=`1` &field=`backgroundColor`]];

In this particular TV I used a DropDown List Menu to assign Hex codes to colors for example:

Red==#FF0000||Green==#00FF00||Blue==#0000FF

After putting all this together I did wonder if the addition of a color picker that generates Hex color codes might not be a nice addition to the Input Type of TVs in MODx? (I was reminded by Nick (MgrMgr dev) in the comments below that: “ManagerManager includes a color picker widget to allow you to pick any hex color value from a TV, if you want to expand it beyond a predefined list.”)

Clean It Up

Now, you can use the ManagerManager snippet to remove any extraneous fields from the Site Configuration document. In this example I removed all of them except my newly created TVs. Now, when my end user goes into their configuration they only see the appropriate configuration fields listed out: Telephone, Address, City, State, Zip, Background Color, Header Image, etc..

The Solution: Fluid Images

I haven’t developed a design utilizing this solution yet (Ethan Marcotte article Fluid Images), but the test cases look solid.

If you are a developer and you haven’t looked into these articles yet I encourage you to, this is a nice piece of work.

1. Find a web site you really love the design of. Maybe browse a design gallery.
2. Open up your design program of choice and try to copy it identically*. Take a full page screenshot of the site for reference and quick overlays.
3. During this copying process, there will be many opportunities to put your own spin on the design and make it your own.
4. Convert your final design into HTML/CSS. If you get stuck, ask for help.
5. Repeat.

If you ever need help finding good, free CSS based templates to start with I highly recommend OSWD and/or Open Designs. OSWD used to be the happening community for this type of development, but hasn’t been active in over a year. They still have a great repository of designs housed there.

I first created the snippet ‘Weather’ ( Here is the snippet code.), then simply placed the snippet call on the appropriate page: [!Weather?!]. I then used my CSS document to style the output and created containers that would display the appropriate class ( Here is my CSS document). I created a div tag that carried my icon as a background image. I figured if Yahoo generated a tag that was unaccounted for in my CSS then my scheme would continue to display the appropriate text while leaving the adjacent background image undisplayed (as opposed to the little red Xs if I had used an image tag). Since I am using transparent gifs, I figured no one would be the wiser should this occur. Gif’s were derived from Nordic Weather.

You can see it in action on the Batesville, Arkansas Area Chamber of Commerce website.

One of the principles I took away from the Web Standards community was the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear. With CSS and progressive enhancement, it was okay that things might look a little different from one browser to the next because of variations in what they supported.

Eric Meyer’s well written article, “Crafting Ourselves“, doesn’t directly advocate the practice, but rather defends it as a legitimate tool of the web design craft.

I’m not saying that craftsmen/craftswomen are those people who reject the use of common tools, of course. I’m saying that they use the tools that fit them best and modify (or create) tools to best fit them, applying their skills and knowledge of their craft to make those decisions. It’s much the same in the world of programming. You can’t identify a code craftsman by whether or not they use this framework or that language. You can identify them by how they decide which framework or language to use, or not use, in a given situation.

As I review both of these posts I find myself intrigued by the use of a CSS reset document. This is actually the first occasion that I have heard of it. I believe that the crux of Snook’s argument lies in the fact that the “Standards Community” had at one time assumed the position that, “the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear”. While I have, in the past, subscribed to this line of thought it was derived more from practicality than preference. Simply stated, it was more trouble than it was worth to try and control inconsistent cross-browser rendering too tightly.

Will I attempt to utilize a CSS reset document in the future? Absolutely. As I go through the site design process I frequently have the conversation with my clients about browser rendering inconsistencies and why they may see rendering disparities on their end. Eventually they acquiesce to this reality (what choice do they really have?). As I move forward I am hopeful that I may recapture this modicum of design control I once relinquished for the cause of standards compliance.

Eric Meyer’s Reset CSS

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

I have tested this in multiple Windows browsers, including: IE6, IE7, Firefox, and Opera. In Xandros browsers Firefox and Opera. In Apple browsers Firefox, Safari, and SeaMonkey. The only browser that seems to have trouble with this particular effect is the Windows IE6 browser. Despite the defect the site stills functions correctly, is lightly traveled and since IE6 use is on the decline I decided this was something that could be lived with, at least until I come across a better supported solution.