Digital Web Magazine

The web professional's online magazine of choice.

Integrating CSS with Content Management Systems : Comments

By Victor Lombardi

September 15, 2004

Comments

Jeremy Flint

September 16, 2004 4:27 AM

Great article.

The reality, however, is that it is hard to find a good CMS that writes valid XHTML (or even HTML) while also delivering WYSIWYG editing for non-technical users.

Sure, there is MovableType, TextPattern, WordPress, and a few others on the unix platform, but on the Windows platform, I haven’t found one.

Most CMS systems built for a Windows server platform make use of the contentEditable feature built into IE (also known as MSHTML), which writes code about as good as FrontPage 98.

Never the less, great article on seperating content and presentation in CMSs. I know at work I am slowing working through some of our CMS systems that make use of FONT and TABLE elements.

Kae Verens

September 16, 2004 5:42 AM

I’m not sure about the actual product, but the WYSIWYG product’s website was not Mozilla-friendly. A free WYSIWYG application which can be easily applied to a content management system is the HTMLArea project. As for the main topic of the post – nice! I use the “monolithic” approach for my own clients, but it would perhaps be interesting to further my own CMS to allow the clients to edit CSS in a manner similar to described here.

Steve Andersen

September 16, 2004 12:18 PM

I agree with the first comment, but I would take it a step further.

I want my CMS to work with my WYSIWYG editor so I can create a text area in a template and say, “Only allow users to create a definition list with ID=‘linklist’ here.” There are a few WYSIWYG editors that create good XHTML, but I haven’t seen that integrated into the CMS so that I can restrict what the user can generate in a certain text area.

Victor Lombardi

September 16, 2004 12:59 PM

Also check out eWeb Edit Pro, a WYSIWYG tool that will write XHTML and integrate with styles defined in your CSS file:
http://www.ektron.com/

Jonathan Snook

September 16, 2004 1:42 PM

Steve: check out Xopus. Somebody led me to this interesting product that does XHTML and can use XML schemas to enforce it. It still uses MSHTML but in a way that prevents bad code. A little on the sluggish side, though.

Iain Porter

September 16, 2004 10:29 PM

I agree – HTMLArea is a good project, and easy to integrate into a CMS. It’s also quick. Last time I checked however, it required modification to produce XHTML compatible.

It’s not so hard to do this however – change the style selector to use classes / header tags etc. instead of font tags (maybe it used spans, I can’t remember, but it’s still a worthwhile change).

Steve: after the above changes, you could then adjust the options in the style select based on the element/tag in which the user was working.

James Wanless

September 17, 2004 11:26 AM

Consider looking at what Macromedia are doing with their web publishing suite. They’ve bundled Studio MX and Contribute with a server user tracking tool. I haven’t looked at the package, but Macromedia is making much more effort in the area of web standards and CSS layout than most other authoring or publishing tools.

Contribute does a pretty good job of WYSIWYG editing/publishing and preserves code well.

Peter Krantz

September 17, 2004 11:41 AM

Why on earth would you want content producers to upload stylesheets? Most of the time you want to enforce a specific consistent design on a site. Most professional CMS systems allow for this (e.g. EpiServer) and allow you to specify which predefined styles should be available to a content producer.

Episerver allows for a completely xhtml-based website and you can define styles like “Heading” and “Sub-heading” (which will create h1 and h2 respectively) without scaring content producers.

Nick Finck

September 17, 2004 12:46 PM

Peter: I think the point Victor is making here is that Web Designers would access the CMS (PMS?) and upload and edit the CSS... not content authors/editors.

Michael Ward

September 23, 2004 7:00 AM

And the PMS would be used by content authors to select from a series of layouts, so they can pick the match that suites their content best.

[m]

September 24, 2004 2:52 PM

And a PMS would have “knowledge” about the website and it makes it much harder to mess up the design. It all depends on how savvy the user is, but it gives much more flexibilty to those sites that need it. From altering the position of pictures in an article, to a whole redesign the “about” page in the current design. A PMS gives the right flexibilty for the people with different technical levels.

I think it is a great idea, but not something to just incorporate in existing CMS’s. Remember, most CMS’s are there to keep the users from messing up the design, whilst letting that user edit and add/remove content.

Although adding new functionality will also add to the confusion of more options, it also opens up a lot more possiblities. I find it interesting, and it’s a sign that CSS is beginning to get more and more common.

John Tarbox

September 26, 2004 4:23 AM

An open source content management system (CMS) which embodies some of these ideas is DotNetNuke
While DotNetNuke does not insure compliance with the latest W3C standards, it does separate content from presentation through a mechanism called “skins” which can be standards compliant.

Jay Mathis

September 26, 2004 8:55 AM

I have to add to the DotNetNuke comment above. DotNetNuke solved some of the issues listed in the comments about handling who can edit what using role-based security that can be se for each modular piece of content.

While DotNetNuke does not enure W3C compliance (yet) or output strict XHTML (yet), it does do alot of the separation of content and presentation ideas laid out here.

In fact, DNN actually divides the CSS idea into multiple levels so you can pick styles for the entire portal (skins), individual page (skins), or individual module instances (containers).

Futhermore, it is possible for the content module developer to define their own CSS elements for a custom content editor and provide whatever functionality level of “PMS” editor they choose for thier module.

mattymcg

September 29, 2004 12:16 AM

Sure, there is MovableType, TextPattern, > haven’t found one.

None of these are WYSIWYG. And none of them are platform dependent. As far as I know you can run Perl on Windows just as well as on Unix.

Great article. Would be nice to see more CMSs offering content editors class names for their text changes instead of bold, italic, colour and size. Lots of people are used to using similar features in MS Word for headings, so I don’t see why it should be a stretch for them to learn the concept.

Rick Updegrove

September 29, 2004 6:18 PM

Xaraya (see www.xaraya.com) validates “XHTML 1.0 Strict”
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.xaraya.com%2F&charset=%28detect+automatically%29&doctype=Inline&verbose=1

Currently has 6 CSS “errors” but they appear to come from a typo…? http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.xaraya.com%2F

Anyway it runs on the “windows platform” but I have no idea why you would do that… when there is FreeBSD

qtuner

October 27, 2004 10:08 AM

why does it have to be called PMS? Can we have a new acronym?

Iva Koberg

November 9, 2004 4:05 PM

Apologies on posting so late, but just noticed the article – very nice.

liveSTORYBOARD CMS generates XML/XHTML/HTML/RSS/Atom/etc that’s valid and semantically rich. We have a WYSIWYG XML editor that validates to a schema (custom or the default provided). XML elements are transformed to divs (most often, but could be any other element that the ouput format understands) with classes and ids that are CSS styled.

best,
Iva.

Bart

November 10, 2004 4:51 AM

I’ve written a PHP script that parses an online stylesheet and makes all tags’s attributes variable. Check it out:
http://www.goa-show.be/gva/css.php

Unknown

January 11, 2005 7:22 AM

This was a very interesting article on the CMS topic!

Bruce Prochnau

February 15, 2005 11:23 PM

There is a lot of wrestling going on with editors all over, but looking at it from a designer/developers point of view, the ability to manage presentation to me is to be able to edit the templates and stylesheets as easily as editing the content. On one level, Movable Type has an interface that allows you to open any file in an editing window, edit it, and then save the changes just like changing the content. I have actually used it to manage the stylesheets and templates on TWiki sites.
Learning valid css always simplifies “which CSS editor to use”. Don’t use an editor, learn css or hire a designer. Period.

Jerome Bautista

February 20, 2005 5:23 PM

This is a very nice article. I do hope that at a web designer/programmer’s point of view… content, presentation and DB wouldn’t be as hard to integrate and separate at the same time. It’s nice to know that attempts are made to aid you in this… but real hard work is still priceless. Someday soon, a tool will emerge that does the job flawlessly (W3C compliant), but by that time everything will again shift to something else… and we’ll soon forget that we’ve been already there.

Presentation + Content + Integrity = Good site management

Simon R

March 3, 2005 2:47 PM

Very interesting that you came up with the PMS (Presentation Management System) concept, I actually happened to think of the same concept and acronym today. Anyway I’d prefer to call it CSSMS (Cascading Style Sheet Management System), since PMS would give associations to PreMenstrual Syndrome.

A point that was brought up here in the comments was that letting people edit all of the CSS through such a system wouldn’t make sense (in most cases). But Just as [m] wrote: “Remember, most CMS’s are there to keep the users from messing up the design, whilst letting that user edit and add/remove content.” Usually a CMS doesn’t let people edit the whole HTML-documents either, neither does it always allow any kinds of tags.

The kind of CSSMS which I thought of (before reading this article) was one quite close to the “Web-form CSS editor with lists”, even though I think it’d be a good idea to hide the CSS code even more (unless the user chooses ‘expert mode‘).

My proposal for a typical usage of such a CSSMS would be in combination with a CMS and could be something like this: The user would be able to assign IDs to different elements through the CMS. Then he/she would be able to associate those IDs with certain predefined CSS-properties.

As a matter of fact it’d be better to integrate the CMS so intemately with the CSSMS that the user wouldn’t have to know editing CSS from HTML, that would be hidden under the surface. So let’s introduce a new concept… CMS+CSSMS = SCaPMS (Separated Content and Presentation Management System). Or just CPMS (Content and Presentation Management System / Cerebral Palsy + Multiple Sclerosis …oh please, no more medical conditions! :-) OK, but seriously I’d prefer something simple like SCMS (Style and Content Management System).

Back to the example... The user could i.e. assign a unique ID for each IMG-tag. Then he/she could associate each ID with either float:right or float:left. The system could then render something like this:

#picture1, #picture2, #picture4 { float: right; } #picture3 { float: left; }

The designer might want to restrict the user to only assigning certain CSS-properties to certain elements. Fine, it could easily be done by using i.e. img#picture1 instead. But a more neat way to do it would be if the CSSMS would first figure out to what kind of element the user would like to assign CSS-properties. Then it could list only the allowed options for that specific kind of element. This could be a pop-up menu in a SCMS (CMS+CSSMS).

OK, one could ask: Why wouldn’t we just create a class called .floatLeft and another called .floatRight? My answer is that it wouldn’t be a semantically sound choise of class names, we would essentially either lose separation of content and presentation or get misleading class names when changing their properties. We might in that case just as well just put the attribute style=“float: ...” into the IMG-tags.

We should indeed also ask ourselves the philosofical question: To what extent does separation of conent and style make sense? Does it in this case make sense to use anything but the style attribute to the IMG-tag, it’s not the designers choise anyway? And are there other kinds of instances where one would or wouldn’t like the functionality of a SCMS?

To finish off all of this I’d like to give you some hints. I’m personally looking for a tool like a SCMS. The closest I’ve come is the BitFlux Editor integrated in either BitFlux CMS or Apache Lenya. The simpler WYSIWYG editor Mozile on which the Bitflux Editor is built is also an option.

Thankyou for listening and I’d love to hear some more ideas about this! I’ve got a great interest in this since I’m currently working on my thesis concerning these kinds of things, so any comments would be helpful. :-)

Simon R

April 1, 2005 2:08 PM

Found a PHP-based CSS-editor, it kind of relates to some of the ideas in the article: http://eledo.com/article20.html

Karl

July 31, 2005 9:13 AM

I found a nice project that addresses many CMS/CSS issues. It didn’t go public yet but what I saw on their website was IMPRESSIVE!

Elixon CMS/XUL+CSS

It has sort of on-line WYSIWYG CSS designer. I’m looking forward for the first release.

XUL is very promissing…

Sorry, comments are closed.

Media Temple

via Ad Packs