Totara Learn Open Discussions

Page Customisation

 
FG Astronaut
Page Customisation
by Frazer Gregory - Sunday, 6 December 2020, 3:03 PM
 

Hello

I have recently been tasked with exploring creative options when it comes to page creation: Layout of assets, colours, fonts in Totara.
I have been looking at the block approach which works out fine but I really would like to see how far I can take things from an HTML/CSS point of view. How do I access the code in order to begin to understand and then make changes to the pages that make up a course?

Thanks in advance for any support you could offer.

Frazer

Craig Eves
Re: Page Customisation
by Craig Eves (Totara Support) - Sunday, 6 December 2020, 5:25 PM
Group Totara

Hi Frazer

There is some technical documentation on developing themes. Note that different versions of Totara use different theme frameworks  that means developing for an older version of Totara the theme may need to be changed when upgrading.

This is quite a big read - it is might be best to start off with the Basic theming course that  it covers changing content with blocks, and audience based menus and dashboards.

Regards

FG Astronaut
Re: Page Customisation
by Frazer Gregory - Sunday, 6 December 2020, 5:39 PM
 
Hello Craig


Thanks for the info. Yes I have already done a few block theme changes. Uploading photoshop JPG/PNG files and that is going just fine.

I also had a look at the internal workings of the dashboard via the Inspect option in Google Chrome and could make some rudimentary changes to things but of course that can't be saved.

I'll take a look at the document you pointed me to. I'm not a coder by any means but can see where things are on a page and make colour, padding and other more simple changes.

Regards

Frazer

Craig Eves
Re: Page Customisation
by Craig Eves (Totara Support) - Sunday, 6 December 2020, 6:23 PM
Group Totara

Hi Frazer

It is possible to add Custom CSS to the site theme and target page elements  under Site admin > Appearance > Themes > your theme

Also press F12 in the browser to go to developer mode and you should be able to see the existing properties of the elements.

regards