0

I'm looking to change certain parts of my design for my site through the CSS, my basic principle is that when you navigate to a certain page, it will kick in to effect, and change some CSS values.

Say for example you navigate to mysite.com/colour/red. It would change certain parts of the styling to red (like border colours, underlines, link colours etc) and it would remain in red until you then navigated to something like mysite.com/colour/green at which point, everything that had previously changed to red, now becomes green.

I have already written some code which runs a function when you navigate to one of these pages and sets a session variable using the Session Cache API so that I can set a temporary colour change for the site.

My question is, what is the best way of injecting the new lines of CSS into my site at this point? My initial train of thought is that I can extend the function I currently have to pull in an external CSS file with those specific colours already defined (ie if you go to mysite.com/colour/red, it will pull in red.css, with the border/underline already specified). Or alternatively, I have thought about using the html.tpl file to perform a check against the session parameter, and pull in a CSS file through there.

What would be the most efficient way of changing my stylesheet? Is there a function already in Drupal which would allow me to do something like this

NB. I am using the Alphorn Omega theme template

2
  • "Most efficient" depends on many factors, primarily on your definition of efficiency. And "best" depends on definition of value (see: xkcd.com/309 ;) ). There can be about 3 ways to inject CSS, one or two to change theme and 3 more to get the effect with unchanging CSS...
    – Mołot
    Jul 26, 2013 at 14:23
  • I think in terms of 'Most efficient' I was considering how often it tries to check if it needs to alter the CSS and which would be the best in terms of load time. I was personally pushing more towards using the preprocessor function I already have to bring in a stylesheet relevant for that colour. Having never used it properly before, would/could LESS do this job? Jul 26, 2013 at 14:37

1 Answer 1

1

I think the usual method of adding per-page CSS is in your template.php file using HOOK_preprocess_page(). A couple of examples:

alphorn_preprocess_page(&vars) {
  // Add CSS based on path (beware if you change your path structure!)
  // But as a bonus, this will add the CSS for any path under "/colour/red"
  if (strpos($_SERVER['REQUEST_URI'], 'colour/red') !== false) {
    drupal_add_css(drupal_get_path('theme','alphorn').'/css/red.css');
  }

  // Add CSS based on NID, with an out because this hook may be called on non-node pages
  // or pages that otherwise don't return anything useful for menu_get_object().
  @$node = menu_get_object();
  $red_nodes = array(1, 2, 3, 5, 8, 13);
  if(isset($node) && in_array($node->nid, $red_nodes)) {
    drupal_add_css(drupal_get_path('theme','alphorn').'/css/red.css');
    // If your stylesheet is really simple you could always inline it.
    drupal_add_css('body { background-color: #FF0000; }', 'inline');
  }

  // Then you need to plug your added CSS into your variables or nothing will happen.
  $vars['styles'] = drupal_get_css();
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.