23 March 2018, 2:34

I'm trying to make a theme for my institution's Mahara install (v 18.10) and I don't need to change too much. I mostly want to change the color scheme, logo, and some CSS on a few pages. Is there any way to set site-wide color variables from a theme? I know I can use the Configurable Theme to set some custom colors, but if I use that, I won't be able to change CSS for the theme as well, right? Is there an easy way to change the color scheme for the site from one place instead of hunting through all the CSS and changing every instance of each color?

Thank you for your help!

23 March 2018, 15:10

Hi Sam

If you are creating a new theme and using the sass feature to compile you css, eg have installed mahara via git (not via .zip file) then you can set a bunch of colour options via the sass variables in

- htdocs/theme/raw/sass/utilities/_bootstrap-variables.scss

- htdocs/theme/raw/sass/utilities/_custom-variables.scss

- htdocs/theme/raw/sass/utilities/_theme-variables.scss

You can copy those files to your theme and adjust the colours for things as you suit

Then you can compile your theme css via 'make css' command run from the parent of htdocs dir

Cheers

Robert

27 March 2018, 14:17

Hello Sam,

We have the "subthemestarter" theme that you can use to base your own theme on (copy the folder and rename it). It's ideal for just making a few color changes, but you can go crazy and change much more. The readme file gives information on how you can make changes.

Alternatively, if you like one of the built-in themes, you can base your child theme on that and then make the necessary few changes. You don't have to base your theme on raw, but can use any theme and then change things as needed.

Cheers

Kristina

29 March 2018, 1:57

Thank you both for your help! I didn't know about those variables in the raw/sass directory! I really appreciate it.

29 March 2018, 2:49

Ok, I followed the instructions in the readme file, but I am running into a problem with gulp. When I run gulp, it gets stuck and hangs after displaying this:

[09:46:47] Working directory changed to /var/www/git/mahara
[09:46:47] Using gulpfile /var/www/git/mahara/gulpfile.js
[09:46:47] Starting 'css'...
Compiling CSS for htdocs/theme/custom
Compiling CSS for htdocs/theme/default
Compiling CSS for htdocs/theme/goshen
Compiling CSS for htdocs/theme/modern
Compiling CSS for htdocs/theme/ocean
Compiling CSS for htdocs/theme/primaryschool
Compiling CSS for htdocs/theme/raw
Compiling CSS for htdocs/theme/subthemestarter
[09:46:47] Starting 'watch'...
[09:46:47] Finished 'watch' after 234 ms
[09:46:57] Finished 'css' after 9.99 s
[09:46:57] Starting 'default'...
[09:46:57] Finished 'default' after 25 μs

29 March 2018, 12:49

Hi Sam,

Did you have a problem generating the CSS before your custom folder? Since it seems to be stuck right on your folder, I suspect that there might be something in there (in the theme config?) that gulp doesn't like.

You can send me your theme folder and I can run it quickly on my instance if I run into the same problem when using "make css", the shortcut command that we have available on Linux.

Cheers

Kristina