Hi, I have updated the Essential Theme version and all of the fonts are too big, particularly the course name at the top of the course and the topic titles. I could resize the font of the category icons becouse i found the css codes somewhere and customised them on the theme general settings. I would like to do the same with the rest of the fonts but i justo don't know the codes. I am just a teacher. Could anybody help me with that?
Unfortunately it is not a simple matter of defining the size of 'h1', 'h2' tags in CSS etc. There are lots of specific font size declarations both in the theme and other plugin CSS. A good tool to work out the selectors is FireBug - http://getfirebug.com/ - I appreciate that you are 'just a teacher', but even as a developer I could not tell you the codes off the top of my head (and I develop Essential) and would use such a tool.
So, perhaps it is better to put print screens here showing the worst offenders of proportion and I'll work to eliminate them in the next release of Essential. And if I find a pattern in the process, then will consider user changeable settings where you would no longer need to use 'codes' that are subject to change.
Gareth: "I'll work to eliminate them in the next release of Essential."
That would be great.
"And if I find a pattern in the process, then will consider user changeable settings where you would no longer need to use 'codes' that are subject to change."
Even better!
May I ask why you made those headers so HUGE in the first place?
Joseph
I have not made anything HUGE in the first place! It will all depend where the font size is defined to determine the history of the value.
From Marina's original post it's implied that the fonts have got bigger after she upgraded to the latest version - in other words she's seeing something different in the new version to what she's used to.
I've only tried the newest version but I have to say that the fonts do look big to me. Much bigger in fact than in the video done by Julian a while ago from which I've taken a blurry screenshot.
That cannot be a comparison Graham as the screen shot has title and sub-title, whilst the other screen shot is just the title. The code applies classes to make the font size smaller in the former instance.
Ok, I've tried to find changes between version 2.7 (Julian's last) and the current 2.7.8 on identical 2.7.2+ (Build: 20141017) systems and the results are as follows:
| Element | 2.7 | 2.7.8 | Difference |
|---|---|---|---|
| h1 site name | 2.1em | 32px | -1px |
| h1.coursetitle | not shown | 32px | n/a |
| h3.sectionname | 1.4em | 24px | 2px |
Thanks for taking the time to do that Gareth, it's really useful information. I also accept that the title/subtitle comparison with just the title is not a completely fair comparison.
2.7.8 is the only version of Essential I've actually used and the fonts just looked large to me - but of course that's a subjective reaction. Obviously I've seen Julian's video of 2.5 as well which seemed more balanced, but again that is likely not a fair comparison.
Anyway with the information you've provided and Mary's method to adjust things, there shouldn't be a problem.
The easiest way for you is to fix this in your version of Essential if you go to Site Administration > Appearance > Themes > Essential > General settings
and add the following CSS....
h2.coursename { font-size: 120%; }
You can then adjust this percentage either more or less depending on what you want it to look like.
Mary
That's helpful Mary, but didn't Gareth say that it's not just a simple matter of (re)setting h1, h2 etc.. ?
Well that depends on what you want to do, and how you want to tackle the problem of fonts in the Essential theme..
Moodle has set about changing the fonts of its own built-in themes in Bootstrapbase, but then Essential is not based on Bootstrapbase, it is based on Bootstrap3 which is a third party plugin. So how those themes are maintained is up to the developers who make them. Everyone is entitled to their own opinion about ways of doing something and Gareth is no exception.
I am only offering people a solution to a problem they are faced with, my sentiment is If you want smaller font sizes you have to change them locally. The quickest way is as described above. But then again that only alters that particular heading.
Essential is based upon a clone of Bootstrapbase being Bootstrap 2.3.0 (not the last release 2.3.2). There are plans to go to BS3.
It may transpire that 2.7.8 introduced the changes as a side effect of the new RTL capability that was not present in 2.7.7. I need to check. Should be simple to fix, just lots of finite selectors. One giant leap forward with a few small steps back. And indeed some changes are for the better.
I have raised: https://github.com/gjb2048/moodle-theme_essential/issues/341 to deal with any font size issues, so you can place screen shots there if you wish.
Hi Mary,
I am currently playing with modifying some .css styles and inserting those to the custom CSS option in the theme parameters. While using Firebug is useful, there are instances where it can be difficult to identify specific style names. Are most styles defined in essential.css, or do I also need to look elsewhere (for exemple, headers in course sites VS the Moodle front page)?
Thanks for your help!
Hi Marina,
I just visited your site and you are running Essential 2.7.7 and not 2.7.8 as implied by 'updated'. 2.7.8 has been released since 10th October so assumed you were using it given the date of posting. Therefore it could be that 2.7.8 solves some of the font issues for you.
Gareth
Marina
Did you resolve your problem? I just upgraded and noticed a similar issue. I adjusted by changing the font back to Oswald. I don't know if that helps you.
Hello,
I upgraded from Moodle 2.6.4 to 2.8.3 and from Essential 2014070802 to 2.8.1 (Build: 2014124000).
I encountered the same problem than cam kinoshita: fonts (Verdana) became bigger !
This is quite weird. I tried a fresh installation, same result, font are too big!
I also upgraded to mysql 5.5.42 and php 5.4.4
Hello,
I have just noticed that this problem occurs with other templates... So it doesn't seem to be a problem with the Essential template.
Maybe there is a problem with php 5.4.4? The problem doesn't occur with php 5.5.1
We're seeing this with multiple themes as well, including Clean, Essential, and More. I don't believe that this is isolated to a single theme. We did a fresh install of 2.8, so no upgrading here. We are using PHP 5.4.16, which as I understand is the supported RedHat production release, so we won't be upgrading to 5.5.x anytime soon, at least in our production environment. We might, later this week, install a quick and dirty new version of 2.8 on a separate server with a new version of PHP on it, just to see whether it resolves the issue.
Jason
Check the zoom setting on your browser.
Nope, not that. I've attached a photo, which is from the Clean theme (though again, More and Essential show similar behavior). As should be clear, it's really the "center column" that suffers from large fonts, while the left and right column text seems fine. Another issue is that block sizes, such as the calendar, are much larger in 2.8 - not sure whether that's a related problem or a new "feature." Anyway it's not a browser zoom issue.
Jason
Just add:
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}to the theme's custom CSS setting.
Thanks, Gareth, you saved my life! ^^
We just tried it with PHP 5.5.24, and no luck there. Same large size on the themes.
Jason
I worked it out and tested with the Clean theme in M2.8 on the Custom CSS box for that theme, so with respect, if it does not work then you've done something wrong or have other custom CSS that you've not stated.
The PHP version should not have any impact on the size of the fonts rendered in the browser.
Hello,
In Esential theme, I choose "Google font" and "Source Sans Pro" for the heading and text fonts.
This font is similar to Verdana but is smaller... which sorted out my problem!
