Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -
Number of replies: 19

Recently, I selected Adaptable as the theme for my Moodle 3.1+ installation. After reviewing the settings I chose to use Fira Sans as the Main font, the Headers font and as the Course title font. On the Custom CSS & JS page I added some CSS of my own so that I can use Fira Sans Semi Bold for H1.

However, I’m not quite sure how to code for that and suffice to say my code hasn’t worked. I’ve tried a number of different formats but I’m clearly not getting Fira Sans Semi Bold when I apply the H1 style to a piece of text. I thought I might need to include font-weight so I tried several different variations, including “font-weight: semibold;”, “font-weight: semi-bold;” as well as “font-weight: 700;”

Please review my latest piece of CSS below and let me know where I’m going wrong. Thank you.

h1 {

   color: #050505;

   font-family: ‘Fira Sans Condensed’;

   font-weight: semi-bold;

   font-size: 42px;

}

Average of ratings: -
In reply to Graham Clark

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

There are other people with way more ability to help than me in this forum, but as a starter to narrow down things:

  1. Have you checked that your css file is definitely being loaded?
  2. Is there any other css before the H1 stuff? If so, are you kissing any colons, semi-colons or opening/closing braces? That will knock out anything that comes later.
  3. Is your problem similar to https://stackoverflow.com/questions/15195315/css-using-installed-fonts
Average of ratings: -
In reply to Jon Bolton

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

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

Local installed fonts that are not served by the web-server but only specified by 'font-face' will need their name stated exactly how the operating system knows them.  I don't have a Mac so can't say exactly what you need to look for and where.

But if you want to alter the theme on the server to use the files there and have the font files (and have permission / copyright etc.) then see: docs.moodle.org/31/en/How_to_add_custom_fonts_in_a_theme.

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -

Hi Gareth. 

Thanks for getting back to me so promptly. Your point about the 'font-face' (as coded by me) needing to exactly match how the operating system knows the 'font-face' made a lot of sense so I did a bit of digging. 

In Font Book on my MacBook Pro, I noticed that if I hover over the name of a font a piece of information appears on the screen including the physical location of the file on my Mac as well as the actual name of the file. 

As you can see from the screenshot, when I hovered over Fira Sans Condensed Semi Bold a piece of text appeared on my screen indicating that my operating system knows the Fira Sans Condensed Semi Bold font by the name Fira Sans Condensed 600 followed by the .ttf ending.

Armed with this newfound information I've updated the custom code in my Moodle installation's Custom CSS & JS page. However, I'm still not getting Fira Sans Condensed Semi Bold when I apply the H1 style to a piece of text.

Here's the code I'm currently using: 

h1 {

   color: #050505;

   font-family: ‘Fira Sans Condensed 600’, sans-serif;

   font-size: 36px;

   font-weight: 600;

}

Attachment 2019-05-13_16-36-18.png
Average of ratings: -
In reply to Graham Clark

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

I think both Gareth and myself have said that you need to use @font-face for this.

See https://stackoverflow.com/a/107951for sample code.

This might help too: https://www.webfx.com/blog/web-design/font-face-guide/

Average of ratings: -
In reply to Jon Bolton

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -

Hi Jon

Thanks for the links. Does the fact that I have a hosted Moodle installation make a difference? In particular, since I don't have access to the backend, does this mean that I won't be able to use @font-face to get this to work? If @font-face is not option then, is there some other way of doing this? Thanks in anticipation.

Average of ratings: -
In reply to Graham Clark

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

Personally, I'd use Google Fonts.

Add this to Site Admin > Appearance > Additional HTML > Within Head

<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed" rel="stylesheet">

and then use this CSS...

h1 {
color: #050505;
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 36px;
font-weight: 600;
}
Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

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

Ok... to answer a few points and a question:

  • You only use '@font-face' when your server is serving the actual font file.  And this must only be when the license allows this for something like 'web use'.
  • Looking at the screen shots, the name should be 'Fira Sans Condensed SemiBold'.

Are you viewing the Moodle site on the Mac where the font is installed?

Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -

Hi Jon.

Thanks to your suggested method I've finally managed to do this. In particular, without having access to the backend of my Moodle installation, I can now pull in any number of font families and display text in a Page, a Book and a Lesson using those fonts. This means that I'm no longer limited to the fonts that are installed locally on my MacBook Pro. In other words, I can choose from 915 font families and be confident in knowing that my students will see exactly the same font that I do. This is brilliant. As a learning designer this really opens up the possibilities for me when it comes to designing and developing engaging learning experiences. Thanks again.

Attachment book-font-test.png
Average of ratings: -
In reply to Graham Clark

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Great news, happy to help 😎
Average of ratings: -
In reply to Graham Clark

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

If you want to create your own style for h1 heading then you must load first the custom font to the theme and then overwrite the h1 styles in the "Custom CSS" box.

Remember to add !important to the selector to ensure the style is applied.

And as Gareth said. Linux is case sensitive. Any change in the font name will break the load.

Average of ratings: Useful (1)
In reply to Fernando Acedo

Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -

Hi Fernando

In fact, it looks like my style isn't being applied. I've added the following CSS to the Custom CSS box but I'm not seeing the style when I apply it to a piece of text:

h1 {
color: #050505;
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 36px;
font-weight: 600;
} 

What have I missed? Also, I'm intrigued by your comment. What do you mean by?: "Remember to add !important to the selector to ensure the style is applied."

Average of ratings: -
In reply to Graham Clark

Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

I’ve tried that on Adaptable (which is my theme of choice for quite a few Moodle sites) and it works as expected. Have you cleared the caches?

For the question re !important though, add that before the semi-colon to enforce the rule. It is brute force though, so use sparingly!!

Eg.

h1 {
color: #050505 !important;
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 36px;
font-weight: 600;
} 
Average of ratings: -
In reply to Jon Bolton

Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -
Hi Jon

As per the Google fonts website, I'm trying to style a piece of text using a font family called Fira Sans Condensed Black 900. Thanks to you I have managed to achieve the default style for Fira Sans Condensed. However, I can't seem to figure out what the code should look like for any of the other Fira Sans Condensed styles including Medium (500), Medium Bold (500), Semi-Bold (600) and Semi-Bold Italic (600). When I use the custom CSS below to style h1 and then apply the h1 style to a piece of text I get everything but the font-weight. I've tried a number of different permutations of font-weight including "black-900", "black:900" and "black 900" but none of them seem to be working for me. What have I missed?

h1 {
color: #050505;
font-family: "Fira Sans Condensed";
font-weight: 900;
font-size: calc(0.5rem + 10vmin);
line-height: 100%;
margin-top: 3%;
margin-bottom: 1%;
}
Average of ratings: -
In reply to Graham Clark

Re: Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

Hi Graham

You need to load the additional font styles. See https://developers.google.com/fonts/docs/getting_started#specifying_font_families_and_styles_in_a_stylesheet_url for more info.

So in Additional HTML you’ll need something like

<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:100,100italic,
200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,
900,900italic&display=swap" rel="stylesheet">

And then you can style like this:

h1 {font-family: 'Fira Sans Condensed', serif; font-weight: 900;}

or

h1 {font-family: 'Fira Sans Condensed', serif; font-weight: 400; font-style: italic;}

It does work, I’ve just tried it smile

Average of ratings: -
In reply to Jon Bolton

Re: Re: Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -
Hi Jon

Thanks again. In fact, over the course of the last couple of weeks, I’ve done all of these things. However, with one exception, I can’t seem to achieve any of the Fira Sans Condensed font weights. The only time I can get any of the font weights is if I go to "Custom CSS & JS" and create a new style.

For example, in "Custom CSS & JS", I copied the attributes of the h1 style and gave it the name hh1. I then applied the hh1 style to a piece of text in a Page in a course. Suffice to say, I can see the text in the Fira Sans Condensed Black 900 style. So what does this mean? Why do I see Fira Sans Condensed Black 900 when I apply the hh1 style to a piece of text but I don’t see Fira Sans Condensed Black 900 when I use exactly the same attributes in my h1 style? (See screenshot) Both styles are EXACTLY the same and have been applied in exactly the same way! Here's a copy of the CSS I'm using for both styles:

hh1 {
color: #050505;
font-family: "Fira Sans Condensed";
font-weight: 900;
font-size: calc(0.5rem + 10vmin);
line-height: 100%;
margin-top: 3%;
margin-bottom: 1%;
}

h1 {
color: #050505;
font-family: "Fira Sans Condensed";
font-weight: 900; 
font-size: calc(0.5rem + 10vmin);
line-height: 100%;
margin-top: 3%;
margin-bottom: 1%;
}
Attachment screenshot-learning.graccon.com.au-2019.06.01-13-02-56.png
Average of ratings: -
In reply to Graham Clark

Re: Re: Re: Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

I’m using Adaptable and I tested this on mine and it does work so I suspect it’s either a caching issue or it’s being overridden somewhere else.

Try this for your weight:

font-weight: 900 !important; 

Average of ratings: -
In reply to Jon Bolton

Re: Re: Re: Re: Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
In the Adaptable theme, the header font weight is set in the font configuration page of the theme settings (yourmoodle/admin/settings.php?section=theme_adaptable_font) - the css file at /theme/adaptable/style/adaptable.css uses that setting and stipulates !important for it, which is why you’re not seeing the effect of your custom css. You need to override that by setting your font-weight to !important - the custom css is loaded last, so your !important will win smile
Average of ratings: -
In reply to Jon Bolton

Re: Re: Re: Re: Re: Re: Re: Re: Custom CSS to modify H1 style in Adaptable theme in Moodle 3.1+

by Graham Clark -
Hi Jon. Once again you were absolutely spot-on. As per your suggestion, I put "!important" immediately after the font-weight in all of my styles and now when I apply the style to a piece of text I get the various font styles I had been hoping for. Woohoo. Thanks again. Regards, Graham.
Attachment screenshot-learning.graccon.com.au-2019.06.03-17-23-25.png
Average of ratings: -