Theming courses to match existing site theme

Are there any pointers you can give me? The most important problem I'm having is when the page width is between 960 and 1200 px. At 960px, the left column gets added (with the list of lessons / contents) and that pushes the actual lesson column into the right sidebar.

Is this something I can fix with css? Or is it hardcoded into the javascript somewhere?

It would also be nice to be able to adjust the colors etc. but that is not as critical.

Is there any documentation of this at all?

Hi @leeksoup - I've asked my colleague (Elaman) who has got experience with Anu LMS customisations to get back to you soon & help with the documentation for cases like yours. He should get back to you soon.

@spleshka - thank you!

@leeksoup hi, I've created a draft version of a guide on how to override styles. It requires improvement, however I hope it will give you an understanding of how to move forward. https://www.drupal.org/docs/contributed-modules/anu-lms/override-colors-... →

Please let me know if you have any further questions.

@elaman - Thanks! I will check that out and let you know if I need more help. :)

@elaman - OK, I do have some questions.

1. Copy over contrib/anu_lms/js/src/theme.js folder into custom/anu_lms_override_styles/js/src/theme.js.

theme.js is only a file -- is that all I need to copy over? Or do I also need to copy over a folder? (Step 3 says to edit a copy of the webpack.config.js file, but that wasn't copied over earlier.) :confused:

2. Edit custom/anu_lms_override_styles/js/src/theme.js by: ...

Is it also possible to have separate fonts for headings vs body content?

3. Edit custom/anu_lms_override_styles/js/webpack.config.js file, where you:

• Replace '@anu/components/Heading': path.resolve(__dirname, './src/components/Heading'), with '@anu/theme': path.resolve(__dirname, './src/theme'),
• Replace all occurrences of ../../.. with ../../anu_lms

When I search, there is no "components/Heading" in that file and the only occurrence of "component" is in a comment. The pattern ../../.. also doesn't exist in this file. The only occurrence of @anu in the file is in line 36:
'@anu': path.resolve(__dirname, './src'),

Am I misunderstanding your directions?

Thanks for your help!

Q1) webpack.config.js shoud've been copied as part of anu_lms_override_component folder in Preparing custom module section.
Q2) Yes, the theme.js contains typography section, which can be configured to have different fonts for headings and body. Check out MUI docs: https://v5.mui.com/material-ui/customization/typography/#variants
Q3) See Q1, but if you did Preparing custom module section, you should have webpack.config.js that has that line: https://git.drupalcode.org/project/anu_lms/-/blob/2.x/examples/anu_lms_o...
Q4) Yes, you would need to override the component responsible for displaying the column using the same method (through webpack.config.js) as the guide describes overriding theme.js.

@elaman - :facepalm: Thanks for your patience. I somehow missed the first section of directions. I will try again from the top.

I think this one instruction is incorrect though.

Replace all occurrences of ../../.. with ../../anu_lms

I think, looking at the actual paths, that I need to use ../../../contrib/anu_lms/rest/of/the/path, or actually, to comment out the existing paths and use the ones that are currently commented out. e.g.

      // Again, make sure the path to the module is correct.
      //'@anu': path.resolve(__dirname, '../../../js/src'),
      '@anu': path.resolve(__dirname, '../../../contrib/anu_lms/js/src'),

I will work on this and get back if I need more help. Thanks again!

Or do I just set new breakpoints in the theme.js file? Ok, that appears to work. I think I've got it, at least for now. :)
Thanks much!

Closing this as resolved.

Automatically closed - issue fixed for 2 weeks with no activity.