Using stylesheets and javascript in your course
The Moodle Oppia export block comes by default with a stylesheet and javascript file that will be applied to any courses you export - so the stylesheet, javascript and related resources (images etc) will get exported to the course package too.
The block uses SCSS to generate the CSS file, to allow modifications and provide a user friendly way to extend the base theme. This all gets compiled in runtime into a single CSS file that gets included in the course package.
You can see examples of the default
stylesheet and javascript at
Default Styles provided by default.css
Creating your own style
By default, the Moodle block gives you a base style to extend from. To add a new
basic theme where you just want to modify the colors to your brand, create a new
SCSS file in the <block>/styles/themes
directory with the name of your
theme. In this SCSS file, you just need to define the color palette for your
theme (you can copy the default.scss
to view the current definitions):
$primary-color: #77A240;
$primary-color-dark: #597725;
$secondary-color: #a5c727;
$table-border-color: #111;
$table-header-bg-color: $primary-color;
Then, you need to create a new directory for the style resources with the name
of {{your_theme_name}}-style-resources
(see the current folder structure
for reference), that will get copied over to the course package.
If you new additional styles, you can create an additional SCSS file in the
<block>/styles/themes
folder with the name
{{your_theme_name}}_extra.scss
. This file will get compiled in the final
CSS file as well, appending and overriding all the styles included to the base
stylesheet. You can also make use of the color variables defined in the other
theme file.