Modifying CSS in Moodle

Modifying CSS in Moodle

από Zahid Ehsan -
Αριθμός απαντήσεων: 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.

Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Zahid Ehsan

Re: Modifying CSS in Moodle

από Gareth J Barnard -
Φωτογραφία Core developers Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers
Σε απάντηση σε Gareth J Barnard

Re: Modifying CSS in Moodle

από 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.
Σε απάντηση σε Zahid Ehsan

Re: Modifying CSS in Moodle

από 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