Hello,

I am building a custom theme from scratch and created my theme folder containing:

  • x.info.yml
  • x.libraries.yml
  • css/style.css

x.info.yml

name: x
type: theme
description: x
core: 8.x
libraries:
  - x/global-styling

x.libraries.yml

global-styling:
  version: VERSION
  css:
    theme:
      css/style.css: {}

css/style.css

* {
color: red !important;
}

I successfully activated my theme. Configuring the style.css doesn't work. My custom CSS doesn't show up. I don't cache the site. Does anybody know what's wrong?

Comments

Jeff Burnz’s picture

Two things:

1. What does this mean:

Configuring the style.css doesn't work

I'm not clear if the file is loading or not?

2. Minor quibble: VERSION is only for themes in a Drupal repo, e.g. in contrib for release, write a real version if this is a private project.

Anonymous’s picture

thank you for writing.

  1. Well, I don't know if the file isn't loading or I made a mistake within the theme setup. I tested the file by trying to color all elements red for instance. I cleared the cache and reloaded the website.
  2. So, I just delete this line and set up the library like this?
global-styling:
  css:
    theme:
      css/style.css: {}
Jeff Burnz’s picture

I don't know if the file isn't loading

You HAVE to establish this first - look at the source code of the page, or better to use the browser inspector, most have a "Network" tab (such as in Chrome) that show you all the files loading.

You need the version:

global-styling:
  version: 8.0.0
  css:
    theme:
      css/style.css: {}
Anonymous’s picture

My custom css/style.css file is not loading. Only core/themes/stable/css/… files are loading. I added this version: 8.0.0.

So, why is my CSS-file not loading?

Jeff Burnz’s picture

Don't know, are you actually clearing the Drupal cache, if you added library or info.yml stuff AFTER you enabled the theme you have to clear the Drupal cache.

Anonymous’s picture

Thanks, Jeff! Now, it works. I ran a cron job and cleared the cache afterwards. I cleared the cache before but it didn't help. Running a cron job and clearing the cache accidentally helped. Thank you very much

Anonymous’s picture

Hello, I discovered that my theme's regions don't have any class or id. Why? My theme info excludes system css:

stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css
  - core/modules/system/css/system.module.css
  - core/modules/system/css/system.theme.css
  - core/modules/views/css/views.module.css

Is this the reason? My webpage just defines header, div, and main without id or class like “header”, “primary-menu”, or “content”.

Jeff Burnz’s picture

If you have no base theme set then you're automatically using Stable as the base theme, which has very few classes, id's etc, if you want lots of classes etc then set:

base theme: classy

In your info yml: https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-...

Anonymous’s picture

Dear Jeff, on my Appearance admin webpage, there is no Classy theme. In the ../core/themes folder, there are 6 themes:

  • bartik
  • classy
  • engines
  • seven
  • stable
  • stark

My Appearance admin webpage just offers:

  • bartik
  • seven
  • stark
mmjvb’s picture

engines contains the template engine, twig currently being the only one. so, not a theme!
classy and stable are no themes, they are base themes!
classy being hard wired to stable because it doesn't specify a base theme.
They can be used to build your themes on:
bartik based on classy
seven also based on classy
stark not based on anything, not even stable. same as stable.