0

I've copied over the Seven theme to my /theme folder on Drupal 8 and I'm trying to customize it by adding in my own js file called custom.js. I added it to the seven.libraries.yml file as shown below, but I don't see it loading up on any of the pages. I even did clear the cache. Nothing shows up. I did add a custom.css file and that is showing. What could be wrong or that I'm missing?

global-styling:
  version: VERSION
  js:
    custom.js: {}
  css:
    base:
      css/base/elements.css: {}
      css/base/typography.css: {}
      css/base/print.css: {}
    component:
      css/components/admin-list.css: {}
      css/components/content-header.css: {}
      css/components/breadcrumb.css: {}
      css/components/buttons.css: {}
1

Asset injector has been made specifically to carry out the functionality that you stated. Simply install the module & flush cache.

Within configuration you'll see the link Asset injector and there you can select the theme to add your custom CSS/JS.

Hope that helps!

  • whats the link to it? – Patoshi パトシ May 8 '17 at 17:41
  • @duckx i've added the link to the answer – cwiggo May 9 '17 at 9:14
-1

Actually it was indeed working after I read up on the following about how to declare these assets: https://www.appnovation.com/blog/how-add-js-and-css-assets-drupal-8-theme

In one of my previous posts I wrote about creating a Drupal 8 theme and declaring assets (JS and CSS) associated with it. Recently there were a few changes in Drupal 8's core and the way these assets are served to a theme or a module. Drupal 8 introduces a concept of asset libraries for JS and CSS in themes and modules. One of the recent core updates was about changing the way these assets are attached to the theme .In this post I wanted to go over a few practical examples of how these assets can be added and customized. Here are some scenarios:

Through a global library
Deleting or overriding existing styles served by core
Declaring various dependencies that are provided by Drupal 8's core
Specifying assets scope or sending JS to the footer
Specifying media type
Adding external CSS or JS library, e.g: Google Fonts
Adding conditional CSS or JS for older IE browsers
Adding custom libraries to specific pages, e.g: front page
Global styles and scriptsIn the example below global-styling is a name of a library (a file or collection of files) that is used for global styles. It is declared in a theme_name.libraries.yml and then also added to the theme_name.info.yml file. This specific library will now be available across the whole site.Here is how it will look in the theme_name.libraries.yml file. 
global-styling:
version: VERSION
css:
theme:
css/style.css: {}

Then it's declared in the theme_name.info.yml file. 
name: Example
type: theme
core: 8.x
libraries:
- theme_name/global-styling

Declaring scripts would be very similar. In the theme_name.libraries.yml 
global-scripts:
version: VERSION
js:
js/script.js: {}

Then in the theme_name.info.yml file, we add these libraries. 
name: Example
type: theme
core: 8.x
libraries:
- theme_name/global-styling
- theme_name/global-scripts

Now these two libraries or collections of JS and CSS files are available across the whole site. These two separate sets of CSS and JS can also be combined into one library. 
global-styles-and-scripts:
version: VERSION
css:
theme:
css/style.css: {}
js:
js/script.js: {}

Deleting or overriding existing styles served by coreIn the theme_name.info.yml file: 
stylesheets-remove:
- normalize.css

or to override the core's stylesheet: 
stylesheets-override:
- normalize.css

Declaring dependenciesBy default Drupal 8 doesn't load any additional scripts. For example jQuery is not loaded, but it can be declared as a dependency. For all core assets look into /core/assets/vendor. You will find modernizr, jQuery and other useful things in there.Example of declaring a dependency. 
global-scripts:
version: VERSION
js:
js/script.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/modernizr

Specifying scope of a JS file or sending it to the footerThere are many cases when it would be best to have a JS asset at the footer of the page. By default they will be included in the header but you can easily send them to the footer by specifying the scope in the theme_name.libraries.yml file. 
js/script.js: { scope: footer }
  • It's not clear what exactly you changed. Quoting a post doesn't mean answering the question. – kiamlaluno Nov 13 '16 at 5:34

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.