Presenting <ul> lists?

[PhotoWebMax]

I am working on a new project for a skin clinic.

On some of the main pages we have lists of treatment options and other stuff. I would like to target the specific list <ul> and <li> elements with cool CSS. I also need headlines for each list. For example on the Treatment Page we need the following: 

<div class="treatmentBox">
<ul class="treatmentList">
<li>Acne Surgery / Comedo Extractions</li>
<li>Oral Antibiotics</li>
<li>Cyst Injections</li>
<li>Topical Antimicrobials</li>
<li>Topical Retinoids</li>
<li>Sulfur Compounds</li>
<li>Birth Control Pills</li>
<li>Aldosterone Antagonists</li>
<li>Bioidentical Hormones</li>
<li>Combination Products</li>
<li>Chemical Peels</li>
<li>Isotretinoin (Accutane)</li>
<li>Treatment of Acne Scars</li>
<li>Post-Inflammatory Hyperpigmentation</li>
<li>Lasers and Light Therapy</li>
</ul>
</div>
<div class="treatmentBox">
<h4>Natural Acne Treatments</h4>
<ul class="treatmentList">
<li>Natural Ingredients</li>
<li>Organic Products</li>
<li>Diet Recommendations</li>
<li>Naturopathy</li>
<li>Eastern Medicine</li>
</ul>
</div>
<div class="treatmentBox">
<h4>Over-the-Counter Treatments</h4>
<ul class="treatmentList">
<li>Salicylic Acid</li>
<li>Benzoyl Peroxide</li>
<li>Ceramides</li>
<li>Acne Treatment Systems</li>
<li>Cleansers</li>
</ul>
</div>

OK, I want this to be easy for the clinic to manage. They might need to change some of the list items. Be nice to have them manage this on their own. I do not want them to have to edit any templates via FTP to do this.

What would be a good way to add these lists to a specific page? Just use the CKEditor? But I notice the CKEditor strips out the class name all the time. I can add the parent container in the CSS class name declaration, but that seems clunky? Or should I create a unique page for each list item and use a foreach loop or some other PW repeater to do this?

I know this is one of those "there are many options" here, but I am wondering what you PW gurus would do in this case...

Thanks!

[Macrura]

i think how i would do it is:

template called treatment-list

      fields: title, items (items is a page select)

on the pages you want to include some treatment lists, have a page select which selects the pages you have created using the treatment-list template.

if you need treatment list included ad-hoc within content, then you make a hanna code like: [[treatment-list title=Over-the-Counter Treatments]] where the title matches;

you could also mod the page select on the page where you select the treatment list to link to a popup of the treatment list so the editor could see what is on the list;

[gebeer]

I'm not a PW guru at all, but the first thing that comes to my mind is the Hanna Code module.

Easily insert any complex HTML, Javascript or PHP output in your ProcessWire content by creating your own Hanna code tags.

 
Marcrura beat me on this one

[PhotoWebMax]

Cool, thanks Guys.

I have been meaning to take a look at the Hanna Code module. Sounds like now is the time...

[PhotoWebMax]

Mission accomplished...

The Hanna Code module is pretty darn cool!

I think this will work. I think site editors can handle this, so long as they know the Hanna Code basics. But creating good comments to the custom Field that deploys the Hanna Code module really helps.

Its nice to learn one real thing each time I sit down with Processwire. Some days I go for broke and learn two new things...

Thanks!

EDIT: the end use of Hanna is very similar to the use of MODx chunks...

Edited November 14, 2014 by PhotoWebMax