0

Is it possible to change the layout for a content type through CSS? How do I do it?

2

Based on the comment of the OP (Niels) I changed my answer:

Each content type page will have a different class (node-type-CONTENTTYPE) associated to the BODY element of your HTML.

So you can add to your CSS file:

body.node-type-mycontenttype1 img { border-color: red; }
body.node-type-mycontenttype2 img { border-color: yellow; }

Original answer:

Wich version of Drupal do you use?

For Drupal 7:

You can use a different template for each node of different content type by creating a template:

/site/all/themes/YOUR THEME/templates/node--CONTENTYPE.tpl.php

You can read on Template Suggestions to know which template you can create.

For the CSS, I suggest you to put everything in your main CSS file and not use a different CSS for each content type.

2
  • Thank you, I only want to change some text-layout and not the whole theme. For example some Borders around images, text-align,... – Niels Nov 29 '11 at 14:45
  • I changed my answer. – FR6 Nov 29 '11 at 14:56
0

Also for different page layout (not only node layout) for different node types you have to add template suggestions to your theme, then you can style in with CSS.

For Drupal 6 add this code to template.php

<?php
function themeName_preprocess_page(&$vars, $hook) {
  if (isset($vars['node'])) {
   $vars['template_files'][] = 'page-'. str_replace('_', '-', $vars['node']->type);
  }
}
?>

Then make different files for any content type you have and layout them as you wish

  • page-blog.tpl.php for blog content type
  • page-news.tpl.php for news content type ... etc.

Similar for Drupal 7

<?php
function themeName_preprocess_page(&$vars, $hook) {
  if (isset($vars['node'])) {
   $vars['theme_hook_suggestions'][] = 'page__'. str_replace('_', '--', $vars['node']->type);
  }
}
?>

Then make different files for any content type you have:

  • page--blog.tpl.php for blog content type
  • page--news.tpl.php for news content type ... etc.
3
  • We were writing at the same time. Based on your comments, ignore my answer. Just Follow FR6 Instructions – Ivailo Milenkov Nov 29 '11 at 15:23
  • Thank you for the answers guy. I was trying to fix this but I'm not able to do it and i Don't know what I do wrong. I'm just a beginner but I want to learn more. I located this CSS file ((drupalfolder)/modules/system/system.theme.css) and i wrote this in it: body.packages field-item even p { font-weight:bold; } I don't know what i'm doing wrong. Maybe this could help you guys. nielsjansen.be/drupal – Niels Nov 29 '11 at 20:38
  • Hi! Consider using Context Module. You'll be able to add classes based on node type, taxonomy term, path....Here is great video podcast mustardseedmedia.com/podcast/episode38 – Ivailo Milenkov Dec 1 '11 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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