I am trying to style all pages created when choosing a specific content type.

What I would like to be able to do is link a custom node.tpl.php or page.tpl.php file to a custom CSS file which contains values different to those of the main subtheme CSS files.

for example changing the content-inner width for specific content types.

I've been trying all different approaches for a while now and seem to have hit a brick wall.

I'm sure it must be a simple thing to do.

Thanks in advance,

Adam

Comments

JoeMcGuire’s picture

<body> classes

Depending on the theme your using you may having classes in the body to identify what node type is being displayed.
If not consider adding them by preprocessing the page
http://drupal.org/node/341628

drupal_add_css()

If you already have a node template file for each node type you could take the opportunity to add a particular stylesheet. This won't work on page.tpl.php as $styles has already been built.
node-[type].tpl.php

<?php
drupal_add_css(path_to_theme() . '/css/node-type.css');
?>

Preprocess node.tpl.php + drupal_add_css()

A nice compromise might be to add a bespoke CSS file for each node page from template.php

<?php
function phptemplate_preprocess_node(&$vars) {
  $node = $vars['node'];
  if (!$node->teaser) {
    // only required for full page view not teasers
    drupal_add_css(path_to_theme() . '/css/type/' . $node->type . '.css');
    // now you can create /sites/all/themes/[yourtheme]/css/type/[your-node-type].css
  }
}
?>
greenitcompany’s picture

Thanks for your response which has helped shed some more light on this subject, However i managed to crack it in the end and find a solution that seems to work a treat.

I created specific content type node and page .tpl.php files and then added related specific content type classes to the main subtheme CSS file

This has allowed me to create content type linked pages with their own style classes that i can control to style the custom layout of each node created by using a particular content type .

However, your suggestion above may help to keep things a bit tidier.

One particular problem i was having was trying to control the content-inner class in my Zen subtheme but it seems i can get what i need from using the node-inner class instead.

What i would like to know is how to have full control over a page or node layout but it seems that i am limited to Drupal variables. Is this correct?

It would be great to be able to create whatever class i wanted in a CSS file, along with the required values. Make it recognisable by template.php and then add the class wherever needed in the relevant section of the .tpl.php file.

I guess i may have hit the point where i need to create themes from scratch and not work from any basetheme as in my experience you can waste a lot of time modifying existing themes to suit your needs. Starting from a blank canvas would be better for converting client design layouts over to a Drupal theme. Trying to solve this problem has given me a greater knowledge of templating in Drupal and also how to create a theme from scratch. Exciting times lay ahead and maybe its my tun to give something back to the Drupal community by creating and sharing some themes as so many have helped me over the years.

Thanks again for your help on this, much appreciated and thanks again to the whole Drupal Community.

Adam, The Green IT Company

Looking forward to DrupalCon in Copenhagen

doublejosh’s picture

I've opted for the template preprocess node option to get content type specific CSS files on the page.

function MYTHEME_preprocess_node(&$vars) {
  drupal_add_css(path_to_theme() . '/css/content-types/' . $vars['node']->type . '.css');
}

Then I just stick to a node type naming convention.

However, this causes a new cached CSS file to be created for each page that works like this.
Meaning there is now a new, fairly large, mostly duplicated each time CSS file at various page requests around the site.
This ends up going against some of the benefits of caching.

Any ideas about how to add an additional css link into the document rather than doing a drupal_add_css in the template, so that there will be two CSS files for each node page: the master cached one sitewide and a second node type specific one?

doublejosh’s picture

Answering my own question...
Here are the theme snippets I use to add in additional separate node-type specific and occasional node ID specific files that don't get added to the aggregated master... provided you don't include the filenames in your .info file.

function MYTHEME_preprocess_node(&$vars, $hook) {

  // $path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE

  drupal_add_css(
    path_to_theme() .'/css/types/'. $vars['node']->type .'.css',
    'theme', 'all', FALSE
  );

  drupal_add_css(
    path_to_theme() .'/css/nodes/nid-'. $vars['node']->nid .'.css',
    'theme', 'all', FALSE
  );

}