By ardarvin on

I'd like to override the theme style.css sheet for an individual node. How do I go about this?

Ideally I'd like to do this using only CSS, so have something like this in my node:

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

The problem is, how do I access the node *head*. i.e.: where do I put in the local CSS tags?

Sorry, I'm sure this gets asked a lot. I did a search but couldn't find anything.

⋅ Categories: Drupal 6.x

Comments

dvessel’s picture

dvessel commented

For drupal 6?

Copy node.css from "modules/node/node.css" into your theme. Add an entry to your .info file for the style like so:

stylesheets[all][] = node.css

That will override the module css file. With your new copy, you can simply add in your selectors specific to the node.

#node-123 {
  something: value;
}
#node-123 .links {
  something: value;
}

Your node.tpl.php should output the node ID. If it doesn't, look at the default template located in "modules/node/node.tpl.php".

thechraveler’s picture

thechraveler commented

How would this solution work for drupal 5? I would really like to know as I have been searching near and far as well!

Thanks

denni’s picture

denni commented

running drupal 6

0x29a’s picture

0x29a commented

Can one prepend a path to node.css within the .info file such as:

stylesheets[all][] = ../my_theme/node.css

I suppose I could try it and report back, huh? Maybe I'll do that... yeah. :-)

*update* Yes, it appears that we can do that. It will really help backing up my css during upgrades. Sweet :-)
The only question that I'd add to this is if there's a way to have a code block for example, auto-labelled as "code:" (no quotes) in the same manner as is done on linuxquestions.org where "code:" labels the code block.

I've really only been hardcore learning css for about two weeks now, so please bear with the thinking aloud moments.

Andrew

wr5aw’s picture

wr5aw commented

I used a CCK field for inserting custom css files. The field is a text field named css_page. Then in template.php function mytheme_preprocess_page() I added the following code:

  $custom_css = '';
  if ( isset($vars['node']->field_css_page[0]['safe']) )
    $custom_css = trim($vars['node']->field_css_page[0]['safe']);
  if (!empty($custom_css)) {
    $ds = defined('DIRECTORY_SEPARATOR') ? DIRECTORY_SEPARATOR : '/';
    $file = dirname(__FILE__).$ds."css".$ds."$custom_css";
    if (file_exists($file)) {
      drupal_add_css(path_to_theme() . '/css/'.$custom_css, 'theme', 'all', FALSE);
      $vars['styles'] = drupal_get_css();
    }
    $vars['css_ie'] = '';
    $parts = explode('.', $custom_css);
    $custom_css = $parts[0].'_ie.css';
    $file = dirname(__FILE__).$ds."css".$ds."$custom_css";
    if (file_exists($file)) {
      $link = '<link type="text/css" rel="stylesheet" media="all" href="/'.path_to_theme() . '/css/'.$custom_css.'" />';
      $text = "<!--[if IE]>\n";
      $text .= "$link\n";
      $text .= "<![endif]-->\n";
      $vars['css_ie'] = $text;
    }
  }

Now anytime I want to add css for a page/node, I just put it in the cck field and it inserts the link and also does a check for IE to insert an IE css file if needed.