Opendyslexic and MORE theme

Opendyslexic and MORE theme

by Pierpaolo Gallo -
Number of replies: 6

Hello,

I would like to add in my moodle instance (3.6.7 with MORE theme) a block or a link to allow each user to switch from the standard font to Opendyslexic (https://opendyslexic.org/). 

Can you help me? any ideas to implement it?

Thank you

Pierpaolo

Average of ratings: -
In reply to Pierpaolo Gallo

Re: Opendyslexic and MORE theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Create a child theme of More (look at the theme documentation to begin to learn about themes: docs.moodle.org/dev/Themes_overview) then add the font to it: docs.moodle.org/dev/Themes_overview#Adding_custom_fonts - then you could use the user theme setting to set that theme for the users that require it.
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Ri: Re: Opendyslexic and MORE theme

by Pierpaolo Gallo -
hello
I tried creating a new theme that exytends More one.
I produced something and I managed also to install it in a demo platform
but when I try to change the theme by URL (I enabled this function to test it)
I got this error

Coding error detected, it must be fixed by a programmer: page layout file [dirroot]/theme/base/layout/general.php does not contain the main content placeholder, please include "<?php echo $OUTPUT->main_content() ?>" in theme layout file.

Here you can find some files (I couldn't upload all the files in the them).

Any ideas?
Thank you
Pierpaolo
Average of ratings: -
In reply to Pierpaolo Gallo

Ri: Re: Opendyslexic and MORE theme

by Pierpaolo Gallo -
Hello
good news: someway I managed
I changed the config.php with this line
$THEME->parents = array('clean', 'bootstrapbase','more');

and moodle.less in this way
@import "../../more/less/moodle.less";
@font-face {
  font-family: 'opendyslexic';
	src: url(../fonts_core/OpenDyslexic-Regular.woff);
	font-style: normal;
	font-weight: normal;
} 

@font-face {
	font-family: 'opendyslexic';
	src: url(../fonts_core/OpenDyslexic-Italic.woff);
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: 'opendyslexic';
	src: url(../fonts_core/OpenDyslexic-Bold.woff);
	font-weight: bold;
	font-style: normal;
} 

@font-face {
	font-family: 'opendyslexic';
	src: url(../fonts_core/OpenDyslexic-BoldItalic.woff);
	font-weight: bold;
	font-style: italic;
}

Bad news: although the them changes I miss all More theme customisation and the font is not OpenDyslexic.

Can someone help me, please?
Thank you
Average of ratings: -
In reply to Pierpaolo Gallo

Re: Opendyslexic and MORE theme

by Lexy Walker -
Picture of Core developers Picture of Particularly helpful Moodlers
Gareth's answer is a really nice way to do it. Just make a child theme that changes the font, and give users a link to switch between the default theme and the dyslexic one.

There's another way to do it that's a lot more complex, but offers users a lot more flexibility (e.g. make font sizes bigger but don't switch on accessible colour schemes). It involves taking theme templates to bits and rebuilding them, so it's fairly advanced theme stuff.  If you're interested, you could look at University of Glasgow's "Hillhead" Moodle theme as a place to start. It uses Moodle's User Preferences subsystem to let users customise fonts, colours and things like that. Unlike the accessibility block, it works on every page, even those where the block isn't visible.

You'll find:

  • accessibility.php - this is responsible for saving a user's preference when they switch on an accessibility option.
  • layout/accessibility.php - a layout file that sets up all the accessibility options that are available, and sets the correct text for each (e.g. 'Turn On x' or 'Turn Off x'.
  • layout/columns2.php - has been modified to include the accessibility layout, and pass the accessibility settings through to Moodle's Mustache templates, e.g. 'extrasripts'
  • layout/extraclasses.php - reads the accessibility settings saved in the user's preferences and adds the extra CSS classes and Javascript includes to the templates.
  • templates/flat_navigation.mustache - outputs a 'Show Accessibility Tools' button. It's worth noting that this file has been completely rebuilt in our theme, since we use a totally custom sidebar.  But you can see the {{{accessibilityButton}}} text in there.
  • css/accessibility.scss - includes all the CSS that makes the accessibility features work.
  • js/readtome.js and js/stripstyles.js - used for accessibility features that need Javascript to work (e.g. stripping custom styles from user-provided text, and using HTML5 text-to-speech to read text out if you hover the mouse over text).

The code could be tidier. Honestly, I should rebuilt it in a neater way, make it use language strings, and release it as a proper theme. But time doesn't really allow for that right now.


Attachment Screenshot 2019-11-20 at 12.01.16.png
Average of ratings: -
In reply to Lexy Walker

Ri: Re: Opendyslexic and MORE theme

by Pierpaolo Gallo -
Thank you very much!
I'll try even if I'm sceptic about my competences on themes and css.
Anyway if someday you'll find time ... let me know wink
Have a nice day
Pierpaolo
Average of ratings: -