Drupal 6 adding styles from a themed view variable output

Here’s an overview of what I did to add a style to the doc head from within a themed view for a specific variables output. I’ll likely post more on that scenario later.
I don’t intend to raise a discussion about whether or not we should be adding one-off styles in a view vs. appending a master stylesheet, but the facts remain that I did it, it came in pretty handy for testing and it requires some configuration worthy of saving for later (so I don’t have to try and figure it out again!). The best part was being able to keep the custom styles in the same page where I was working on theming the view.
To make things a little more complicated I only wanted to append one rule to the head of the page and not adding a style to each row (which could be done with jquery).
So here’s what I did:

<?php if (!function_exists('load_recruitment_outreach_style')) {
	function load_recruitment_outreach_style(){
		global $base_path;
		$moduleFolderPath=$base_path . drupal_get_path('module', 'view_web_service');
		//set default style for this div
		$headAppend=<<<style
		$('head').append('.recruitment_outreach_link_sub_cat {background:url({$moduleFolderPath}/loading.gif) top left no-repeat scroll; display:none;}');
STYLE;
		drupal_add_js($headAppend, "inline");
	}
	load_recruitment_outreach_style();
}

Starting from the inside out; I’ve added comment numbers:

.recruitment_outreach_link_sub_cat {background:url({$moduleFolderPath}/loading.gif) top left no-repeat scroll; display:none;}</style>');
	STYLE;
[1]:			drupal_add_js($headAppend, "inline");
		}
[7]: 		load_recruitment_outreach_style();
	}

[1]: I choose to use ‘drupal_add_js($headAppend, “inline”);’ which I’ve mentioned before. This is preferable to drupal_add_css as we can drop in text as opposed to external stylesheets.
[2]: Branching outward the var $headAppend is a jquery statement captured in a hereDoc (too many quotes and escaping gets to be so ugly).
[3]: The statement itself appends an embedded style declaration <style type=”text/css”> and it contains the url to a background image derived from
[4]: drupal’s $base_path and
[5]: a drupal_get_path function. Here’s another reason to create the stylesheet dynamically.
[6]: This is all contained in a function “load_recruitment_outreach_style()”
[7]: which is called inside an if statement.
[8]: The if statement ensures that the style declaration is only added once. This is important as view elements (such as a variable in this case) are called over and over again. If we didn’t encapsulate the ‘append in a function then it would be added once for every iteration of this variable. So function_exists saves the day in this case. I think function_exists is pretty self-explanatory but I had to look it up because the function name and syntax is different in php, vs. javascript and cold fusion.

Comments
  • Vid says:

    I’ve used this method a number of times and I’m starting to think it would be a nice addition to views.
    Perhaps a text area for appending css or js to the header just for the current view.

  • This code trick was ***EXTREMELY*** helpful for setting up a color configurator admin panel for our web marketing coordinator, so she can go in and play with the colors, background-colors, and border colors of any page elements I give her access to tweek.

    I’d buy you a beer if you were local! Thanks!!!

Leave a Comment