0

I add a CSS file (mymovies.css) to a custom form (SeenMovies) in a custom module (eric) with this code I inserted at the end of buildForm

$form['#attached']['library'][] = 'eric/mymovies';

and this code in eric.libraries.yml

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: {}

But my css doesn't override bootstrap.min.css as you can see in Firefox inspector:
enter image description here

How can I fix that?

  • 1
    And how is Bootstrap attached? Your CSS seems to be attached first, then comes Bootstrap which overrides yours. Apart from that it doesn't make much sense to target a broad selector like an <hr> from a custom module on one form while using Bootstrap at the same time. You could simply fix that by being more specific in your CSS. Like #myform hr { ... } or even give your <hr> its own class and then it would be hr.my-hr { ... }. The more precise you are in your selectors the higher is the priority of your styles. – leymannx Apr 29 at 14:24
  • Considering what I can find in the page source: <link rel="stylesheet" media="all" href="/themes/contrib/onepage_zymphonies_theme/includes/bootstrap/css/bootstrap.min.css?q9i5qg" />I assume bootstrap is brought by the theme I use (onepage_zymphonies). – gbmapo Apr 30 at 8:31
  • 1
    @leymannx #seen-movies hr{...} works fine! – gbmapo Apr 30 at 14:50
1

This question has nothing to do with Drupal but with CSS order of precedence. If more than one identical CSS rules are found, the last one takes precedence.

As @leymannx pointed in their comment, your page is loading first your CSS file, then Bootstrap. Just move your Bootstrap into a new library as you just did with 'mymovies', then add a dependency to 'mymovies'. Declaring it as a dependency, it will load first the need libraries, then the library being called.

Edit - after saying you are using OnePage Zymphonies theme:

If you check 'onepage_zymphonies_theme.libraries.yml' you will see that the Bootstrap library is defined. Following my answer:

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: {}
  dependencies:
      - onepage_zymphonies_theme/bootstrap
| improve this answer | |
  • But can't the CSS group and weight affect where this OP's stylesheet is in the order process, which will determine the specific rules in the cascade? – mpdonadio Apr 29 at 19:34
  • @devicaru As Bootstrap is there because of the theme I use (see my comment for @leymannx), I don't know hox to do what you suggest... – gbmapo Apr 30 at 8:35
  • @gbmapo check my edit. – user98716 Apr 30 at 8:42
  • I changed my library to what you suggest. It's not working: still have hr rules from bootstrap over mine :-( – gbmapo Apr 30 at 9:05
  • did you clear caché? – user98716 Apr 30 at 10:03
1

Finally, I used the advice from @leymannx and changed my css to

#seen-movies hr{
  margin-top: 0px;
  margin-bottom: 0px;
  border-top: 1px #808080 solid;
}

where 'seen-movies' is my form id.

| improve this answer | |
-1

Instead of adding an additional selector for all the css in future to override the bootstrap css you can try using the weight flag of libraries like this:

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: { weight: N }

Just determine the weight of bootstrap library and replace N with the number greater than that.

In this way your mymovies.css will load after bootstrap css and you will no longer need to write that extra selector

| improve this answer | |
  • Don't do this! Use dependencies instead! – Hudri Jun 28 at 18:03

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.