styling suggestion

Hey, thanks for this great course format.
Our styling requires we overload the tile border top. There about 6 preset colours, but we prefer to use our own.

In my moodle theme scss i can write:

.format-tiles {
  .course-content {
    ul.tiles {
      .tile {
        border-top-color: $accent-blue;
        background-color: lighten($accent-blue, 70%);

        &:hover {
          border-top-color: $accent-dark-red;
        }
      }

      .tile_bar {
        border-top-color: $accent-blue;

        &:hover {
          border-top-color: $accent-dark-red;
        }
      }
    }
  }
}

but the issue is that the styling is not honoured unless border-top-color is set to $accent-blue !important, because there is inline styling css in the page that overrides the moodle theme styling that is written out in the <head> of the document.

I can see why the issue has arisen - you want to have dynamic colour changes that are set in user settings, but it is kind of anti-pattern for moodle to write out in-line css when it has this css compilation and minification engine inbuilt.

is it possible for you to inject this styling into the moodle themes, and the use colour-themes as classes?

Comments (3)