I want to include custom css only for one content type, is that possible?
-
drupal.org/theme-guide/8/assets this may help – oksana-c Feb 15 '16 at 16:21
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';
}
}
-
1Libraries can also be added in twig templates (e.g. node--page.html.twig), with
{{ attach_library('module/library') }}orhook_preprocess_node()by adding to$variables['#attached']['library']. Probably better to target a node with these than withhook_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
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.
