Change stylesheet for just one page in Drupal 7

Question

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

Answer 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

Answer 2

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.

Answer 3

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.