A very typical scenario is that you are a teacher in a Moodle course or content expert, but you do not have administration access to the Moodle platform but you really want or need to add a CSS style to something in your course content.
You tried adding CSS to a page but it was automatically stripped out.
One option to try is to ask your administrator to add a HTML Block (or you can add it yourself if you have permissions) into your course that appears on every page. Tell them you need it for a general course announcement that you want in your course.
Once the Block has been added, turn editing on and select ‘Configure Course Message block’
You will want the Block to appear on every page in your course so that the CSS is applied to every page.
Now that you have a Block that appears on every page, you can use this to store your CSS.
Make sure you have ‘Turn editing on’ before you continue.
By configuring the HTML Block and selecting the ‘Advanced buttons’ arrow and the HTML edit code button </>. You are ready to add your own CSS to your course.
As an example, let’s add this code to the HTML in our HTML Block.
<p class="bigbluetext">Big blue text</p>
<script type="text/javascript">
var cssRules =
'.bigbluetext{font-size:x-large;color:blue;}';
var styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(cssRules));
document.getElementsByTagName('head')[0].appendChild(styleElement);
</script>Or try the variation with CDATA
<script type="text/javascript">// <![CDATA[
var cssRules =
'.bigbluetext{font-size:x-large;color:blue;}';
var styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(cssRules));
document.getElementsByTagName('head')[0].appendChild(styleElement);
// ]]></script>
Select save and you will see the following displayed in Moodle.
This adds a class called bigbluetext and changes the text in the course message that has class=”bigbluetext” into an x-large blue font.
To add to the CSS, just add your normal CSS code in between the single quotes after var cssRules = ‘.bigbluetext{font-size:x-large;color:blue;}’;
- Make sure you keep all the CSS on the same line.
- To change the page header colour, find the class used for the page header. .page-header-headings
Then add this to the CSS string.
cssRules = '.bigbluetext{font-size:x-large;color:blue;}.page-header-headings{color:#ff0000;}';Save the page to view the CSS changes.
Anything you can imagine with CSS can be applied, although remember that if the Theme is modified, updated or changed, then the classes may change as well.
I hope you find this useful.
Please feel free to contact me if you have any questions.
This is very useful! Thank you.
Hello Chris, I came across your blog post, because I desperately searched for a solution to manually add css styles on a course basis. The problem I encountered: if I add css definitions inside tag, in a html block, then these tags are removed, because atto removes some tags that are not allowed. Did you encounter this as well? I am using Moodle 3.5.
Hi Alexander, It depends on the configuration of Moodle and your permissions as to how Moodle strips the tags.
Try using the alternative code I have added to the post
Let me know if this stops Moodle from stripping the code out.
Thanks,Chris
Thank you — when I looked to my page today, it all of a sudden worked. Maybe a cache problem. So it works even without using CDATA approach.
Since there’s no relevant in the html block, is there a way to hide it without losing the CSS styles in it?
When I have used this, I have made it part of the page content by using the HTML block for contact details, or as a special notification panel.
Where to find help or anything that will make life easier for the students. One thought I had was to embed https://theysaidso.com/embed code in the HTML panel so it changes each day and select the ‘inspire’ category. There is another way to do this if you are and admin and have the Generico plugin installed too which doesn’t require an additional block. I haven’t documented it though.
Hello,
Thanks for sharing your great idea : I was looking for a way to change CSS in Moodle in teacher role for years for the input/answer fields of Cloze questions in Test.
The answer does show up in white..on a white background in the current Moodle theme I’m working with.
I’ve tried this :
var cssRules =
‘.form-control mb-1 incorrect {font-family: “Arial”; font-size: 40pt; text-align:left; color: red;}’;
var styleElement = document.createElement(‘style’);
styleElement.appendChild(document.createTextNode(cssRules));
document.getElementsByTagName(‘head’)[0].appendChild(styleElement);
…but it doesn’t work. If you have any idea, thanks a lot.
Best regards,
Dominique
Hi Dominique,
I haven’t checked the classes in cloze questions but it may be because the classes are in the one element.
In this case use ‘form-control.mb-1.incorrect’ instead of ‘form-control mb-1 incorrect’
Which theme are you using?
Thanks,
Chris
Hi Chris,
Thanks for your post. Just wondering how to add hover effect on the button!
my regards
Hi Aminul,
The hover effect is created using:
‘.bigbluetext{font-size:x-large;color:blue;}.bigbluetext:hover{color:red;}’;
Hope this helps.
Thanks, Chris
The title of this article says “… if you are not an administrator”. Does this apply if you ARE an administrator? What do you do differenty if you ARE an administrator?
Hi Luis,
As an administrator you can do exactly the same thing.
But what I would do as an administrator is add the CSS to the Moodle Theme in the code or in the theme CSS admin. Depending on the theme, Boost is in Appearance > theme > boost > advanced settings > SCSS
Then I would use the course-# class for the course that I want the styles to apply to and wrap all the required classes in the .course-# where # is the course number to apply the styles
.course-3 {
h2 {}
h3{}
}
Or if applying to multiple courses.
.course-3,.course-5,.course-6 {
h2 {}
h3{}
}
Or use the course categories to apply the CSS to a specific category so all courses in a category have the same additional CSS.
.category-1 {
h2 {}
h3{}
}
Hope this helps.
Hi Chris, thank you very much, you helped me a lot.
However i have another question.
Is there a way to change the block title (Course message) ? I would also like to mark this in colour.
Hi Nico,
Absolutely. If you are using Google Chrome. Right click on the Course message block title and select ‘inspect’. Then in the HTML panel, look for the code that says ‘class=”block_nameoftheblock”‘. Then in your CSS use .block_nameoftheblock .card-title { color:#3ed234; }
Hi Chris, many thanks for your post. This is very useful.
However, I wanted to check the results logging as a dummy student user and realised the script is not inserted. Even if you change the user role as a student there are some visual variations as well. Is it because of the”login as” function only? Have you tested as a normal student user?
Cheers
Hi Matias,
I have tested this with ‘Switch role’ as Student and Teacher as well as logging in as a student and logging in as a teacher so yes, it works when you are a normal student logged in.
But, when testing using ‘Login as..’, it strips the code, which is very strange. I will do some research and see what I can find.
Chris, this is normal and expected when using “login as” masking in Moodle. It is part of a security feature of Moodle.
Hello! Thank you very much for your code, it has been very useful to me. Now I am trying to customize the widget with CSS for the view from the app, but I see that it does not work, will there be a way to solve this?
Hi Daniela,
Sorry, the app is developed using Ionic https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2.
This means it is setup quite differently and doesn’t follow the same conventions for CSS that is used in a normal theme.
thanks,
Chris
its works! thanks
Hi Luis,
Awesome – great to hear.
Thanks, Chris
Dear Chris, thank you a lot, This is a very useful solution.
I need to change the tabs background in a onetopic theme, but I don´t find the right sintax to reference it in var cssRules = … I see in the inspector this element as: .nav-tabs > li > a {background-color: #009747 !important;
Any help would be appreciated.
Thank you in advance
Hi Fernando,
For the background behind the tabs.
.onetopic .nav-tabs
{
background-color:#adadad;
}
For the background of the selected tab.
.onetopic .nav-link .active
{
background-color:#adadad;
}
For the background of the content in the tabs.
.onetopic
{
background-color: #ddd;
}
Hope this helps.
Thanks,
Chris
Dear Chris, thank so much, do you have teach also how to change activity or resources icon ?
Hi Nuh,
As the icons are part of the Moodle template, you would need to modify these using CSS at the site template level.
But in many cases, this is not easy as Moodle uses images or in some themes font awesome icons.
This adds a whole new complexity to changing the icons.
Sorry it was not a helpful response.
Thanks,
Chris