Problem with fonts in Essential theme

Problem with fonts in Essential theme

by Trine Michelsen -
Number of replies: 5

Hi

I'm using moodle 2.8.5+ and the latest version of the Essential theme. 

I'm using Oswald as the font for headings and Lato as text font. 

I've got various problems:

  1. I'd like to use the normal version of the Oswald font for the headings but the theme is applying the bold style, not on all headings just on some. 
  2. I'd like to be able to change the color of the heading when using the TinyMCE editor but if I change the color the font changes from Oswald to Lato although the text is marked as a heading. I can do this in other courses, with older versions of the essential theme but not in this latest version.
  3. moreover, in the course (using the topics format and with each topic on different page) the heading of each topic (that serves as a link to open the topic), changes from Oswald to Lato. Moreover the left margin for the heading is very large, the heading is more to the right than the contents of the topic.

I'd really appreciate any help on this! Have been looking for hours but can't find where to solve it!

Thanks in advance for your help!

Cheers

Trine


Average of ratings: -
In reply to Trine Michelsen

Re: Problem with fonts in Essential theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I'm not sure of the history or when / if / how, but this line: https://github.com/gjb2048/moodle-theme_essential/blob/master/less/essential/settings/theme-admin.less#L5-L7 with the '*' selector overrides the heading font when the contained text is within a 'span' which is injected by TinyMCE, so goes back to the paragraph font.  This is something I'll need to investigate the solution at some point - https://github.com/gjb2048/moodle-theme_essential/issues/483.  That covers 2 and 3.

Ok, with 1, please could you screen shot how you have added the Oswald font to the theme please?  What is different about the headings that are bold?  Have you set them as bold in the editor?

Average of ratings: -
In reply to Gareth J Barnard

Re: Problem with fonts in Essential theme

by Trine Michelsen -

Hi Gareth!

Thanks for the fast reply! I've deleted the '*' from the essential-settings css file and now it works! I can change the color of the headings plus all the headings are in Oswald font! Perfect!

The only thing is in point 3, the left margin is still bigger on the title than on the text below, I've got something like this for each topic on the course page:

Heading of topic 1

   Text under heading of topic  1

Heading of the topic 2

   Text under heading of topic 2

... and so on


It would look better if they had the same left margin. How can I change this?

Regarding the bold headings - I haven't set them as bold with the editor, just set them as h1, h2...

Looking through the contents of the site and comparing in Photoshop texts written with Oswald in similar sizes to the headings used in the site, I think the theme is using the bold version in all headings, not the regular version- could that be it? How can I change it so it only uses the "regular" or "normal" version of Oswald? I'm not sure I've explained this very well mixed

Cheers

Trine

Average of ratings: -
In reply to Trine Michelsen

Re: Problem with fonts in Essential theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I can't replicate the padding issue - attached.

Don't use Photoshop to compare, use what the browser tells you it is is using in CSS, to discover this, use the browser developer tools, e.g. https://developer.chrome.com/devtools

Attachment 2015-04-21 22_12_52-Course_ Topics.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: Problem with fonts in Essential theme

by Trine Michelsen -

Hi Gareth

Thanks for the tip with the developers tool! Have managed to change the font, saw that everywhere in the css it stated font-weight 700 which is the bold version so I just had to change it to 400 and now it works perfectly throughout the site.

Have also managed to solve some of the margin issues except for one. The problem is the div.left.side which is set to a width of 40 px. It's to the left of the titles and if I could just change that to 10 px everything would be perfect! The thing is I can't find where to change it! Any clues?

Cheers

Trine



Average of ratings: -
In reply to Trine Michelsen

Re: Problem with fonts in Essential theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

That's in styles.css of '/course/format/topics', so you'll have to add an override in the theme, but be careful if adjusting with my Collapsed Topics as I adjust that to make the functionality work.

Average of ratings: -