Making styled list creation easy for site owner?

Hi All,

I am helping a friend build a site for his catering business.

I have successfully created a template that includes a menu (as in edible goodies not nav menu) listing for food dishes. This includes a top graphic, repeating background image for the expandable menu box, bottom graphic, a ul class="menuList" and its list items etc, all done with CSS.

So, in a sense we have a design rich food menu page with repeated headings for the dish categories and lists of dish names with dish descriptions, much like you get in any sit down restaurant. The code is direct and CSS is doing all the presentation.

Creating each menu page and coding the lists is easy for me but my concern is how well the site owner will do when creating these important pages?

So, I am looking for tips on how to make the process of adding these lists of food items and categories easier for him?

* Should I try adding some drop down CSS styles within the TinyMCE editor?
* Make some kind of TV that will allow him to type in "salads" and pick a Header and then type in a list of salad dishes and choose MenuListItem for each one? These would need to pick the styling from the template’s CSS file.
* Create an unpublished sample page with dummy listings that he can substitute the real content into and re-save the page as a published document.
* Any other cleaver trick for end user friendliness?

Any visual samples or ideas would be most welcome!

Max

My first thought is to put each dish on its own page with TVs for the name, image, description, price, etc.

Then build your display with Ditto or a custom snippet that puts everything together and defines the CSS classes for each entry.

Here is a clipped sample from one of the menu pages...
Initially there will be five or so such pages linked from a sidebar column using Wayfinder. Other than the top and bottom background graphics its all basic headlines, unordered list and list item CSS.

Here’s another idea.  Image TVs for the graphics. Then, the raw content of each page is a chunk in this format:

PAGE HEAD: Appetizers

LIST HEAD:Canapes
*Spiced duck . . .
*Herb Tuille . . .
*Smoked Salmon . . .
etc.
LIST HEAD:Terrines
*Duck and pistachio
*Pork and spinach
etc.

etc.

Then use a snippet to process the chunk into the finished product; adding the divs and classes (maybe using a few pre-made tpl chunks, one for each line). The top and bottom images could be rendered via the TVs in the page template.

The snippet should be fairly simple to produce (pretty similar to the EZfaq snippet but without the JavaScript). You could have some pre-made unpublished pages containing the snippet call and the image TVs. The client would only have to fill in the page title, pick the images, and add the name of the appropriate chunk (which could also be a TV, I guess), then just fill in the chunk like the above. You could create a bunch of dummy chunks ahead of time.

Whenever possible, I try to keep the client from going anywhere near the CSS or HTML for a page and just enter slightly structured content. It’s the only way to make sure that the styling of every page is the same.

Hope this makes sense. 

It might just be me, but it appears you are over complicating the issues. That appears to be a few unordered lists with a heading between them and some bold text.

If you wanted to dummify things further you could target the list styling so a class wasn’t required... If your content div was content then you would use: #content ul and apply your desired styling.

The graphic can be accomplished using: ul{list-style-image: url(../images/bullet.png); }

So your client would just need to create something like this:



You would only need 3-4 images depending on how you cut things up and it should all be very easy to accomplish with just tiny... Then again I have been staring at code for the past ~14 hours so I might just be going crazy and misreading your goal...

AMDbuilder

That’s definitely what I’d do if the client was comfortable with HTML (or willing to learn it). I had the feeling that wasn’t the case, but maybe I’m wrong.

That code can all be generated by tiny without too much trouble. Granted the only works if your client is somewhat familiar with the MS Office Interface.

Thanks Guys...

AMD: your code is pretty much exactly how I have created this menu. I did create a specific class for the UL though (I have other content UL’s).

After thinking about this for a while I think the best plan is to create a couple of unpublished pages that has dummy content lists. I will have to do some MODx back end instruction for the site owner anyways, so part of this exercise will be explaining how he needs to cut and paste his food items into the sample page and then save as a real published page. Even though this guy knows nothing about code there are merits to learning some of the basic structure that makes the "magic" happen.

Having a couple of unpublished menu pages that never get edited and saved should provide a reasonable compromise.

Max