Custom css in style.csss of base theme or created subthemes don't appear to be loading/overriding.

Comments

3dnathaniel created an issue. See original summary.

markhalliwell’s picture

Status: Active » Closed (works as designed)

You have to change the library name of your sub-theme. The overrides only load if you're using the CDN. If you're using the LESS starterkit, you must compile it manually.

3dnathaniel’s picture

Status: Closed (works as designed) » Active

I am using CDN so shouldn't it be loading style.css for overrides by default?

markhalliwell’s picture

Status: Active » Closed (works as designed)

Yes, overrides.css are in fact loading. I would know, I've been looking at it loading in a CDN sub-theme ever since I fixed it here: http://cgit.drupalcode.org/bootstrap/commit/src/Plugin/Alter/Css.php?id=...

As far as a custom sub-theme style.css, again, you just have to make sure your library names and css paths are correct and rebuild the cache for it to load properly (which falls into basic library/asset handling in 8.x, not a specific problem with this project).

cristiroma’s picture

Hi @markcarver,

Sorry I'm a little bit lost here, I am starting with CDN starter kit and I have tried to edit css/styles.css there and the file is not loaded. It's still not clear how to make the file load.

Edit: Removed the suggested code as it's not working.

cristiroma’s picture

To anyone coming here from search engine, if you encounter the issue described above, make sure you pay attention when you create the theme from starterkit. Precisely the following steps:

1. Rename THEMENAME.starterkit => mytheme.info.yml
2. Inside the file mytheme.info.yml make sure you have:

libraries:
  - 'mytheme/global-styling'

3. In your mytheme.libraries.yml you have:

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

I personally missed step 1. by removing the THEMENAME.starterkit and adding my own custom blank info that was missing the "libraries" section.

sillo’s picture

Definately not working as designed.

I have used the CDN starterkit, renamed all the files accordingly (mytheme.info.yml, mytheme.libraries.yml) and changed the libraries path to "mytheme/global-styling". STYLE.CSS IS NOT LOADED!

I did more than 50 subthemes in D7, like a walk in the park. D8 i can't even do 1.

I re-checked i did everything correct (changed the name of the theme in the info file etc.) and it still doesn't load STYLE.CSS.

Im giving up on this new theming system.

Lalas’s picture

I also faced this issue even after checking for the correct THEMENAME is updated wherever it is required. One misconfiguration i believe i did was

After Opening

THEMENAME/config/schema/THEMENAME.schema.yml

THEMENAME.settings:
  type: theme_settings
  label: 'THEMETITLE settings'

The first line to be updated is THEMENAME and the second one is THEMETITLE which are different each other. The THEMENAME is the machine readable name of the subtheme (name of the subtheme folder) and the THEMETITLE is the title of the theme referred in the THEMENAME.info.yml file

Then if you are using sass satrterkit
go to your subtheme folder create css folder and compile stlyle.sass

sass sass/style.scss > css/style.css

If you are using less satrterkit
go to your subtheme folder and compile stlyle.less

lessc less/style.less > css/style.css
moufmouf’s picture

I also faced the same issue.

For us, the problem was that we had a "theme" that had the same name as a "module".
This completely screws Drupal 8 (I'm using Drupal 8.2).

Simply disabling the module enables the CSS of the theme back.

riskogab’s picture

Thanks moufmouf,

That was the problem.

tnfno’s picture

Had the same problem and the issue where that the instructions for makeing a subtheme placed the css file in the folder /stylesheets/style.css while the libraries file said it was in /css/style.css. Updating the libraries file fixed it...

millionleaves’s picture

Status: Closed (works as designed) » Active

#11 was the solution for me, using the SASS starterkit.

The style.css file was compiling correctly, but the style.css file was in stylesheets, when the libraries file said it was in css. Changing the libraries file solved the problem.

Is this a bug or a misconfiguration on my part?

markhalliwell’s picture

Status: Active » Closed (works as designed)

Is this a bug or a misconfiguration on my part?

It's a misconfiguration on your part.

By default CSS preprocessors will likely spit out the compiled source to the same directory of the source file. You must configure your compiler to output to the correct directory, per the instructions.

leveller’s picture

#8 pointed me in the right direction; I had a profile with the same name as my theme. Well spotted!

gerrit.michiels’s picture

I'm also experiencing this problem. The style.css file does not seem to load even though I'm rather sure everything is configured correctly. I checked of every tip above here. What am I missing?

kkalaskar’s picture

If all files are proper and page source showing stylesheet path sites/files/css it means files are cached and make sure aggregation unchecked under /admin/config/development/performance.

ruizuser’s picture

Dear friends, I'm having a similiar issue with my own custom style.css file in drupal 8. I've created a child theme from yorkshire theme and I've tried everything, but in one of my last tests, I renamed css and js folder to random names (asdasd and zxczxc), and surprisingly, it seems drupal is only looking for the javascript file, not the css file, giving me this error:

Warning: file_get_contents(themes/custom/comite/js/comite-style.js): failed to open stream

These are my info and libraries files:

comite.info.yml

type: theme
description: 'Tema para el comite'
core: 8.x
package: Custom
version: VERSION
base theme: yorkshire

libraries:
- comite/comite-style

regions:
brand: Site Branding
header: Header
top: Top
content: Content
bottom: Bottom
sidebar: Sidebar
footer: Footer
navbar_right_notifications: Navbar Right Notifications

features:
- favicon
- logo

and comite.libraries.yml:

comite-style:
version: 1.x
css:
base:
css/comite-style.css: {}
js:
js/comite-style.js: {}

Any help is welcome!

Many thanks in advance!!

Kitfey’s picture

I also use the SASS starterkit and everything loads perfect.
But, I can't load custom js files. Have someone successfully applied js files in sass subtheme?

noblescz’s picture

In Drupal 9 there is a change! For me /themes/bootstrap_business/ moved to /themes/contrib/bootstrap_business/

mehuls’s picture

I was using same name for theme and module both. so library was not getting loaded.