7

I am trying to add a CSS file to the front page. I have seen Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme; I just need to know the HOOK machine name for the front page.

function THEMENAME_preprocess_HOOK(&$variables) {
  $variables['#attached']['library'][] = 'CSSPATH';
}

What name should I use for the preprocess function, in order to make Drupal calls it only for the front page?

  • Have updated the answer. – CodeNext Aug 18 '16 at 18:15
  • I have updated my answer, please follow as I have described, It must work. I have tested in my trial site. – CodeNext Aug 18 '16 at 21:06
10

You can find exactly what you want under the topic Adding Libraries to Specific Pages at this tutorial Drupal 8 Theming Fundamentals, Part 1

To give you a real example, I am going to explain with the Bartik theme, so you can change easily.

I have created a css file cssfile.css under the path css/cssfile.css. Now this CSS file I want to use on only front page.

  • Step 1: Add the library to the theme: Add the following code in the bartik.libraries.yml

    css-filling: 
      css:
        theme:
          css/cssfile.css: {}
    

    Note: Here I have given the name css-filling to this library but you can give any other name. We will use this name in path

  • Step 2: Setting the code in bartik.theme so above perticular library(ultimately css) will only be added to front-page,

    function bartik_preprocess_page(&$variables) {
      if ($variables['is_front']) {
        $variables['#attached']['library'][] = 'bartik/css-filling';
      }
    }
    

    Note: Now in the above code the important thing is path, bartik part comes form the themename and css-filling comes from the step-1.

This code I have tested in my test site and it is working on front-page only.

7

You can attach libraries in templates, for example html.html.twig is an ideal place to attach libraries conditional on the path. You can either use template suggestions, e.g. html--front.html.twig or a twig expression.

The other answers revolve around preprocess, which is fine, however preprocess is an abstraction and makes theming development more opaque, i.e. it buries important information in a PHP function, rather than being obvious and clear in the template.

I'm not saying preprocess is bad, only that it depends largely on how you want to work and how opaque/abstract you want to theme.

To attach a library only for the front page in html.html.twig we can use the not operator and the root_path variable as a condition:

{{ not root_path ? attach_library('my_theme/my_library') }}

If you create the template suggestion html--front.html.twig you can attach the library unconditionally:

{{ attach_library('my_theme/my_library') }}
2

Make sure you have created the css you want as a library in libraries.yml first. Then you need to use hook_preprocess_page() like so:

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function THEMENAME_preprocess_page(&$variables) {
  // Add page preprocess functions here.
  if ($variables['is_front'] == TRUE) {
    // Attach your css 
    // - replace "theme_name" with the name of your theme
    // - replace "library_name" with the name of what you called 
    //   this particular css library in libraries.yml
    $variables['#attached']['library'][] = 'theme_name/library_name'
  }
}

You might be better creating a page--front.html.twig file and attaching it there instead via your libraries.yml file. This is the preferred approach in Drupal 8.

  • Make sure you change THEMENAME to the name of your theme. You will also need to give a path to the css file, something like $variables['#attached']['library'][] = $variables['directory']' . 'css/front.css'; } – Mark Conroy Aug 18 '16 at 18:21
  • 2
    @Chris Happy $variables['#attached']['library'][] is to attach a library, as defined in themeName.libraries.yml, not the path to a file. E.g. $variables['#attached']['library'][] = 'theme_name/library_name'; – Jeff Burnz Aug 19 '16 at 0:21
  • 1
    I've updated my answer with @JeffBurnz's comment. My path_to_css approach was D7. – Mark Conroy Aug 19 '16 at 7:09

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.