1

I want to include custom css only for one content type, is that possible?

1

Assets such as CSS and JavaScript files are added via the asset management system.

There are three types of assets libraries settings & replacements.

What you need is a library asset that will include your CSS files.

Adding assets is done by setting the #attached array in a render array. That way you can attach the asset only when the render array is rendered.

Because you do not control the render array of nodes, you will need to implement hook_page_attachments and add your library on your specific conditions.

foo.libraries.yml

bar:
  css:
    component:
      css/baz.css: {}

foo.module

foo_page_attachments(array &$attachments) {
  if (/*CONDITION*/) {
    $attachments['#attach']['library'][] = 'foo/bar';
  }
}
  • 1
    Libraries can also be added in twig templates (e.g. node--page.html.twig), with {{ attach_library('module/library') }} or hook_preprocess_node() by adding to $variables['#attached']['library']. Probably better to target a node with these than with hook_page_attachments() – gapple Feb 16 '16 at 1:04
  • @gapple i think preprocess functions are too late for #attached. But I'll add the twig option. – Eyal Feb 16 '16 at 5:22
1

use node-type-"node-type-machine-name" class from body, it appears in body, and then apply inherited CSS on child classes or on elements. e.g. if you are using a content type conference use

.note-type-conference{ 
//style
}

or

.note-type-conference .any-other-child-class{ 
    //style
    }

open your developer console of browser and check body element it contains many unique and specific classes.

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.