Managing CSS in the CMS

Rhythmyx Technical Discussion
1

The FF sites as well as the Percussion developer training deal with CSS files as not being managed by the CMS, but I wish to manage these as web assets like anything else so as not to create configuration management risk.

I’ve create a content type and snippet template, which is basically the link tag, which in turn calls a binary template to create the link. I’m able to create and preview CSS file content items. However, I cannot get to them be used in my global templates. I’ve created auto-slots which are supposed to bring in the CSS files, based on content id, which I pass a parameter to the slot major and use the auto-slot’s query, but when I preview a page, the slot is not rendered, nor do I get any errors. Any ideas about what gives here? I can’t think of any reason, architecturally, why this wouldn’t work.

2

I agree that CSS files should be managed in the CMS just like other web assets. At present we use a text field to call in additional CSS files as SSIs, but it is not ideal.

Could this be something for the Percussion roadmap, as CSS is an integral part of most websites and really should be managed better than at present.

3

We’ve wondered about this quite a bit at Percussion. The historical view is that templates and their corresponding CSS need to be treated as “code” that goes into a Source Control system. Thus, the synchronization is between the CSS file and the Templates themselves. CSS as a file makes that sync with SCM systems easier.

But increasingly, designs are shorter lived, “sites” are getting smaller in size and scope (content is going up, but the size of each site is going down as more micro and nano sites are added to contain them and to improve SEO), and so it raises the question about whether the design elements should be managed more fluidly - as a set of content items that are just always “in process” in the system along with content.

As for you specific issue posted, there is no theoretical reason something like this cannot be made to work. I can’t tell from the post why it might not be working in your case. I suspect it might have something to do with how the url/location references to the CSS file are getting resolved in preview vs. publish. In your header of your global template where the “link” tag sits, (the rel attribute specifically) you need to be sure to us a binding that generates the correct url location. You probably need a slot somewhere to manage that relationship as well. The link tag in the header itself may even be a snippet of the CSS item, as it “render” the related CSS item on any page. I also suspect you’d rather not have end users having to specify which CSS goes to which page for every new page in the system, so you need to come up with some way to populate that slot with the related CSS file item - yet still have some ability to change that relationship when needed. There are a variety of techniques for “hard coding” a related item into a slot. Point is, it needs to be a related item, so that the binding can use a location function to generate the correct link to it, and then you use that binding value in the template source as the value for the “rel” attribute.

4

Mr. Imrich,
Thanks for your reply. In other CMS implementations, I’ve always managed css, js, etc. in the CMS because it made the configuration management very clean, as opposed to having to manage two seperate systems to modify and deploy these. The second aspect is that in the past few years, CSS has advanced to be used for not only just basic look & feel, which is usually pretty static, but also layout as we’ve moved away from table-based layout in the web design world. Layout is something that can and usually does change, i.e. where you might add or move around a particular widget on a home or landing page or change or adjust margins, z-indexes on images, etc.

Anyhow, as for my particular problem, I think my understanding of what “related” means in a Percussion context is a little dodgy as I’m new to the product. I think the link genaration piece is Ok, I used an FF templates as a model (the rffSnImageLink or somesuch). In my snippet template (called nhlbiSnStyleSheet), I have the following binding:

$cssLoc= $rx.location.generate($sys.assemblyItem, “rffBnBinary”)

And in the template I have:

<link rel=“stylesheet” type=“text/css” href=“$cssLoc”/>

This works fine when I preview the snippet template (i.e. the proper link tag is generated)

I have an auto-slot called nhlbiAutoHeader with Active Assembly relationship type and I bring in the CSS file itself with an AutoSlotContentFinder with the following query:

SELECT rx:sys_contentid, rx:sys_contentstartdate FROM rx:rffgeneric where rx:sys_contentid=:myContentId

Finally, in my global template, I call the slot macro in my head tag, as follows:

#slot(“nhlbiAutoHeader” “” “” “” “” “template=nhlbiSnStyleSheet&myContentId=763”)

When I preview a page which uses this global template, the slot is not rendered as I expect. I suspect that Active Assembly maybe doesn’t take place in the Global Template, so this isn’t getting “assembled” for lack of a better term?

5

Your problem is the FROM clause in your SELECT statement, it should be FROM rffFile.

6

Paul,
Thank you so much. I CANNOT believe I missed that. Perhaps I am getting too old to be writing code :).