0

I just set up an new Drupal 8 website. I was used to use CSS injector on Drupal 7, but since the module is not ready yet, and I thought I'd better start with subthemes, I tried to create a new Boostrap subtheme. I used the CDN method, activated it in my admin panel, but when I try to override CSS by creating CSS styles in css/style.css, nothing work. In Drupal 7 with CSS injector, my main difficulty was to find the proper class. So I tried a lot of different possibilities, copied/paste CSS from original files in Bootstrap. Nothing works.

Have anybody already tried to create a sub-theme with Bootstrap? Did overriding CSS work?

I looked at the CSS file link, it's loading lumen theme nicely. I tried to change h2 color in this file: themes/bootstrap/css/3.3.5/overrides-lumen.min.css and it works...Clearly, seems that style.css is not used...

  • did you clear the cache? – No Sssweat Dec 27 '15 at 22:53
  • Hi, thanks for your answer. I forgot to mention it, but of course i cleared the cache. I also disabled css and JS aggregation. – Ryan Dec 27 '15 at 23:04
  • hummm, have you tried deleting everything in style.css to test if nothing is changing? Did you remember to switch to the Sub Theme? – No Sssweat Dec 27 '15 at 23:07
  • Yes, the subtheme is activated and selected. The style.css comes with nothing inside. I deleted every css i did, nothing changed. Seems that the file is not overriding default bootstrap css ! – Ryan Dec 28 '15 at 0:00
  • May help wdtutorials.com/drupal/theming/… – Jonathan Dec 28 '15 at 17:11
0

I'd wager that the stylesheet has not been added to the page. The documentation is pretty solid on this: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme.

This page isn't likely to go anywhere, but I'll summarise here. Please go and read the full documentation page though, there is MUCH more there:

The general steps for loading assets (CSS/JS) are:

  1. Save the CSS or JS to a file.
  2. Define a "library", which can contain both CSS and JS files.
  3. "Attach" the library to a render array in a hook.

But in the case of themes, there is an alternative to step 3: themes can choose to load any number of asset libraries on all pages.

Libraries

[...] a library could just as well only contain CSS assets, or only contain JS assets. Most themes will probably want to have a global-styling asset library, for the stylesheets (CSS assets) that it wants to be loaded globally (i.e. on all pages where the theme is active — usually the whole site except the administration pages):

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

Attaching a library to page(s)

Attaching to all pages

To attach a library to all the pages on the site that use your theme, declare it in your theme's *.info.yml file, under the libraries key:

name: Example
type: theme
core: 8.x
libraries:
  - fluffiness/cuddly-slider
  • Hi all, Thanks for all your answers. Actually the solution was pretty easy...! In this tutorial (www.wdtutorials.com/drupal/theming/bootstrap-1-subtheme-cdn-drupal-8-tutorial-8-article-video) there is a file named MYTHEME.info.yml , but in the bootstrap distribution in the starterkits->cdn folder, this file is named THEMENAME.starterkit.yml ...Just had to rename it to THEMENAME.info.yml .... And that's all !!! – Ryan Jan 18 '16 at 22:17

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.