1

How can I add an additional stylesheet for just one page on a Drupal 7 site?

I want to add an additional stylesheet to a section of content on one page, but want the rest of the elements of the page to use the existing theme stylesheets?

How would I go about this, can I make a call to the additional stylesheet or should I embed the css directly in the page?

Thanks-in-Advance,

John

1

Try adding this code snippet in a custom module :

function MYMODULE_init() {
  // You can verify actual page by using arg() function. Example for targeting node with nid 123
  if (arg(0) == 'node' && arg(1) == '123') {
    drupal_add_css(base_path() . drupal_get_path('theme', 'mytheme') . '/path/to/css/file.css');
  }
  // You can verify actual page by using the actual alias
  // Supposing your page alias is : http://www.example.com/first-part/second-part
  $args = arg(NULL, drupal_get_path_alias());
  if ($args[0] == 'first-part' && $args[1] == 'second-part') {
    drupal_add_css(base_path() . drupal_get_path('theme', 'mytheme') . '/path/to/css/file.css');
  }
}

Don't forget to change MYMODULE by your module machine name

1

You can use preprocess page in your theme template.php

<?php
function template_preprocess_page(&$variables) {
  $front_style = path_to_theme() .'/front-page.css';
  $path_style = path_to_theme() .'/path-'. arg(0) .'.css';

  if (file_exists($front_style) && $variables['is_front']) {
    $include_style = $front_style;
  }
  elseif (file_exists($path_style)) {
    $include_style = $path_style;
  }

  if (isset($include_style)) {
    drupal_add_css($include_style, 'theme', 'all', FALSE);
    $variables['styles'] = drupal_get_css();
  }
}
?>

Or use attach method in module code and so forth:

<?php
function foo_block_view($delta = '')
{
  if($delta == 'foo_delta')
  {
    $block = array
    (
      'subject' => t('Foo title'),
      'content' => array
      (
        '#markup' => '<p>' . t('Lorem ipsum text.') . '</p>',
        '#attached' => array
        (
           'css' => array('path/to/my.css'),
        ),
      ),
    );
    return $block;
  }
}
?>

Attached will only get loaded if that element is loaded on the page, so from above only if that block is shown on the page.

These examples were taken from drupal docs (see below for more info): https://www.drupal.org/node/2278795 https://www.drupal.org/node/225868

You can also target that content on this specific page with CSS by using the body classes added by your theme, most have either the content type or some other information in there you can use (e.g. node-type-article or page-node-5)

So your CSS could be:

/* Original Color */
.original-color {
  color: green;
}
/* Original Color for content type article */
.node-type-article .original-color {
  color: red;
}
/* Original Color for node 5 */
.page-node-5 .original-color {
  color: yellow;
}

That's just as example but should help when setting up pieces like this.

You can also use CSS injector It has block like settings to only load the CSS on certain pages.

2
  • Could I not just add the CSS directly in the page?
    – John
    Jan 7 '15 at 16:27
  • Drupal is a template system so a page is served from page.tpl.php along with many other possible templates, I put the recommended way to add CSS and left out the #1 way which is including it in your .info file since you only wanted this CSS on that page. I would look at your selectors for that page that you are wanting the CSS on, specifically the body classes. You can probably target just that page with the style you want and it won't affect other styles. Jan 7 '15 at 16:41
0

The easier way to do this is by using the Code Per Node Module.

Code per Node makes it possible to add custom CSS and Javascript per node, per content type, per block, and globally. The code is stored in the database, but served from the file system. It also supports syntax highlighting with CodeMirror.

You can override the elements that you want and the rest you don't need to add them.

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.