Custom CSS in courses

Custom CSS in courses

by Philipp Jovanovic -
Number of replies: 10

Hello everyone!

Is there a way to give a teacher the possibility to change certain aspects of the CSS layout in a specific moodle course?

I've already found a tracker entry, but wasn't able to get it running. I guess it's because they used Moodle 1.9 whereas I use version 2.0.

 

Many thanks in advance!

Cheers,

Philipp

Average of ratings: -
In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Phillip,

You can add CSS in Topic 0 of your course page. If you know how to write CSS, you should have no problem. Just make sure you click on the HTML tab before you begin to add your CSS mark-up. You need to astart and end it with the following tags...

<style type="text/css">
<!--

#example-css { width: 130px; height:120px; float: left; }

-->
</style>

HTH

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Custom CSS in courses

by Philipp Jovanovic -

Hi Mary,

thanks for your answer! So in my outline I've edited the general topic ("edit summary") and inserted in the HTML source e.g.

<style type="text/css"><!--
h1 { color:blue; }
--></style>

After that I've generated an extra html page in the general topic. But my defined css had no effect on the header h1 that I used there. What do I missunderstand?

Cheers,

Philipp

In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Philipp

I must have missed this comment.

The inline style only relates to the course page not resources or activities generated in this course. Sorry if I mislead you.

It will work if you add it to the page you created though.

Mary

In reply to Mary Evans

Re: Custom CSS in courses

by Oscar Silxxx -

Thanks Mary, you saved me with your tip.

What I did (worked smile) is to insert a new HTML block in that course.

In the HTML section, I added the CSS like you said.

Now CSS applies to all pages of that course.

To hide that block to the user, I just used CSS.

Average of ratings: Useful (3)
In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Philipp Jovanovic -

Sorry for the bump, but I still haven't found a solution for that ... mixed

In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Philipp,

I believe the css in Topic0 works for that page (ie the course page itself) and you would have to add the required css code into the html of the additional page you have created - it is not inherited from the course page as the theme css is applied to the page.

HTH

Richard

In reply to Richard Oelmann

Re: Custom CSS in courses

by Philipp Jovanovic -

Hi Richard,

thank you for your answer. That's what I noticed. As far as I can see there's no possibility, to upload a separate css file and link all your pages to that single file. So to update the css on a larger range, one has to have admin privileges ... In other words, my teachers have no other option, than to write the css inline.

Thanks again!

Cheers,

Philipp

In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Philipp Jovanovic -

Finally I've found a workaround solution for my problem and I want to share it here, just in case someone else wanna have custom css in his/her courses, too.

What I did was to activate the "Legacy Course Files", i.e. the old file management system from moodle 1.9. This plugin allows you to upload files to a specific course, that have a fixed url. The fixed url is important for embedding the custom .css into the html (without having root access to the webserver)

With the new file system from Moodle 2.0 the uploaded files do not have a fixed url anymore (as far as i know). The problem there is, if you upload a .css file, that has the same name than an already existing one, the old does not get replaced. Instead there is a new (database) entry generated that has a different url. Thus the html sites still reference the old .css file and do not get updated.

With the legacy course files you can delete the old .css, reupload the new .css file under the same name and on this way assure, that all html sites, that referenced the old .css file, now use the new one and thus get updated.

 

I know this is just a workaround and the legacy course files are somewhat "deprecated" in Moodle 2.0. But I've found no other solution to give my teachers the chance to style their courses to their liking in a comfortable way (and without root access to the webserver).

 

Cheers,

Philipp

In reply to Philipp Jovanovic

Re: Custom CSS in courses

by Russ H -

I'd like to bump this issue up again as it is still a needed function for us.

(Thanks for sharing your fix Phillip! Unfortunately, we can't warrant turning on Legacy files for this)

Here is an example for why this is needed: We have a course that is taught in Persian and all of the activity names and general text is in Persian. Currently, each instance of text that isn't a title has to manually be set to right to left. Also, there is no way, apparently, to increase the size of the fonts for the activities titles in just that course. Since different language scripts may require different sizes we are stuck while they are all hosted in the same installation of Moodle.

If anyone knows of any new workarounds for this, it would be greatly appreciated!


In reply to Russ H

Re: Custom CSS in courses

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Create a child theme of your main one and apply that theme just to the course you need it for.

You can then apply styles within the child theme or its own customcss.

Alternatively, if you enable course themes, then the body classes contain the course-id and you can use that to target css to that specific course in the customcss

Average of ratings: Useful (2)