Modifying CSS in Moodle

Modifying CSS in Moodle

by Zahid Ehsan -
Number of replies: 4

Hi,

I am new to Moodle but have good experience in designing. I want to modify basic moodle layout a litle bit, including front-end and admin section. I need to change and add new functionalities.

Where can I find main css file?
How can I make moodle to read my code and not the cached code?


I have searched all documentations and forum but no clear answer was found.

I am using moodle 2.9...


Thanks.

რეიტინგების საშუალო: -
In reply to Zahid Ehsan

Re: Modifying CSS in Moodle

by Gareth J Barnard -
Core developers სურათი Particularly helpful Moodlers სურათი Plugin developers სურათი
In reply to Gareth J Barnard

Re: Modifying CSS in Moodle

by Zahid Ehsan -
This is not guiding for css in Admin section. For some reason I can feel that theme is for user section, not for Admin section... Am I right?

I need to change look and feel of forms in Admin section.
რეიტინგების საშუალო: -
In reply to Zahid Ehsan

Re: Modifying CSS in Moodle

by Mary Evans -
Core developers სურათი Documentation writers სურათი Peer reviewers სურათი Plugin developers სურათი Testers სურათი

Hello Zahid, 

The bulk of the CSS in Moodle 2.9 can be found in

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/style/moodle.css

which is derived from the LESS folders found in the 'moodle' directory here...

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/less/moodle

You can also find CSS in a file called style.css within moodle/mod/ ( under each separate mod)

For example:

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/mod/assign/styles.css

Same goes for moodle/block  (under each separate block)

For example:

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/blocks/settings/styles.css

as well as other directories within Moodle such as moodle/grade/report/grader. 

For example:

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/grade/report/grader/styles.css

In other words CSS is peppered all over the place and so easy to miss or duplicate which is one of the biggest problems we face in Moodle.

To make Moodle read your CSS is to add it to the theme you are using. That is to say add it to

moodle / theme / mytheme / style / mytheme_styles.css

Then you need to add the CSS file name to your theme's config.php

$THEME->sheets = array('core_styles',  'someother_styles',  ' mytheme_styles ' );

making sure it is the last in that list.

If you get stuck please ask again for help.

Cheers

Mary

რეიტინგების საშუალო: Useful (1)