by Jeff Eaton on May 30, 2011 // Short URL

Module Monday: Code Per Node

How to Insert Custom CSS Code and Javascript into Your Drupal Site

Back in the Drupal 6 days, I released the CSS Injector to help site admins drop simple CSS rules onto site pages without hacking up the actual theme. It was a bit controversial, as it blurred the lines between "theme" and "module" responsibilities, but it was handy for the quick-and-dirty overrides that are common on many sites.

The Code Per Node module goes a step further: it lets users with sufficient permissions add custom CSS rules and snippets of Javascript to any node on the site. While some designers are probably horrified (not without reason), it's a godsend for squeezing quick tweaks into custom pages or articles that need just a little extra something.

Screenshot of philosophically questionable custom CSS

Code Per Node allows admins to control which content types allow custom CSS, which ones allow custom JavaScript, and which user roles are allowed to use either of those features. The Drupal 7 version of the module, just released, also allows administrators to specify default chunks of CSS and JS to be added to all nodes of a given content type.

Screenshot of a hideously altered node page

Code Per Node is smart enough to store its CSS and JS snippets on disk rather than in the database, so they can be aggregated and compressed just like the files added by modules and themes. If you install the CodeMirror JavaScript library, it also provides syntax highlighting and other conveniences while you're editing. (Beware: On my site, that feature seemed a bit flaky with Drupal 7's overlay popups. Fortunately, Code Per Node works fine without CodeMirror.)

Using utilities like this one to drive your entire site's design will definitely lead to a lot of frustration when the time comes to update your look and feel. For quick one-off tweaks and custom pages, though, Code Per Node is a clean way to control who can insert custom JS and CSS, and how they do it.

Jeff Eaton

Senior Drupal Architect

Want Jeff Eaton to speak at your event? Contact us with the details and we’ll be in touch soon.

Comments

jucallme

IMO this sort of mojo, should

IMO this sort of mojo, should follow suit with the way views 3 is doing this, allowing you to set the markup on the field its self something I hope core does rather soon.

That way we can keep the markup minimal and clean something drupal is rather terrible at. A first look 'under the hood' of a Drupal page is scary. Not because its wrong but because there is so much junk in there, there is no reason to wrap every element in a move it up in to config the admin can add on if they need it, don't lump it on every one and make a page heavy (more div's never used is just a larger HTML file to send over the wire) with tones of crap that few people need.

Does display suite not also do a similar job to the module in this review?

Reply

Andrew Macpherson

Field Formatter Settings

Dave Reid, Matt Farina and myself have done some work with Field Formatter Settings API and associated modules. These provide extra settings for field formatters on a per-content-type and per-display-mode basis. So far we've covered classes and delimiters, but not markup elements.

You might also check out Semantic Fields which provides control over markup elements, but does not offer per-display-mode settings.

Reply

ReneB

the thing is, that code like

the thing is, that code like this would not be needed at all if drupal core was just gathering data and send that trough to the theme layer. In a way the current way with render arrays is a step in the right direction. Imho the next step would be, moving the focus from 'everything should be configuarable trough a GUI' to more of a site builder creates a look with css/html and matching theme functions and the user just writes the content.

Reply

tgroff

Brilliant

I hate to be a one-sentence poster, but this is frakin' brilliant! Thank you!

Reply

Marko

CPN error?

Hi Jeff, I am getting the following error for the cpn.module

Notice: Undefined index: js in cpn_node_insert() (line 181 of..

I couldnt finnd anything on this error online?

the module still works however and is a great timesaver.. thank you..

Reply