Hi
I want to add a few CSS class definitions just for my module. I found the following instructions on StackOverflow:
1. In your current theme connfig.php do this:
$THEME->modsheets = true;
2. In your mod directory
Create styles.php
To which you can add either:
.myclass {'property':'value'} or
php code and echo out the CSS.
I've done all that and there is no sign of my CSS being included in my module.
It is a sub plugi-in if that makes a difference.
Thanks
Justin Wyllie
In Moodle 2.0, add a file called 'styles.css' into the main folder of the plugin with all your CSS in it.
(For Moodle 1.9 it is called 'styles.php' and doesn't work for most sub-plugins, so you need to use nasty javascript hacks to load the style sheet at a later date).
Thanks Davo.
That seems to work. I did not do anything in the theme to tell it to go and fetch a styles.css from my module. is this 100% automatic for all themes and modules - or, can it be switched off by a theme author?
Thanks.
I may be wrong with this (as I'm guessing a bit) but I *think* that themes can override module-specific CSS (I think the theme gets higher priority).
Best way to find out is to try it...
Yes. The module CSS is just a default, so that the module basically works when installed into any theme. But the theme is ultimately responsible for the layout, and so can override the default CSS of any module.
Tim, can you fill us in on how to voerride the default CSS for a module? Do we need to create a style_plugins folder in the theme similar to what is done with pix?
Thanks!
No, ou don't need to do that. You just find what the CSS is you want to change and make the changes in your theme's CSS file. Depending on which theme you are using. If it is called core.css then add it to the end of that file.
Cheers
Mary
Hi Mary,
Is core.css dynamic, depending on the plugins present in the page the user is looking at, or is it static, containing all the styles in all the plugins, even if the page isn't displaying most of them?
If it is dynamic, it would make sense to have the theme's CSS to be modular and loaded dynamically as well.
Use case: The theme I'm working on, has many optional blocks, each of them styled separately. All together, they add up to thousands of lines of code.
Guess I'm looking for ways to slim down the styles sent to the browser, to speed up rendering.
Thanks.
'Blocks' as per Moodle terminology are not usually part of the theme itself. They will have their own separate styles.css file which provides any essential css for that block, and the theme then provides the general look and feel.
Even if by 'blocks' you are referring to sections of content provided by your theme (such as Essential's marketing spots) then surely most of them will have common selectors and common rules which only need to be declared once and not separately for every instance of each block? Then just override the few changes that are needed for each one? It is not normally necessary to write a complete set of css rules for each and every individual optional block in your theme, unless you are doing something very specific and different with each separate block.
I guess what I am trying to find out is where you are coming up with 'thousands of lines of code' for the (maybe) 20 or so blocks that are likely to be used throughout your site?
Richard, I'm inheriting from bootstrapbase theme and applying branding and in-house functionality using many blocks. They are varied in structure and behaviour, and quite often require overriding bootstrap, which leads to dozens of lines to achieve seemingly simple things.
The prime example is converting the admin settings block ( blocks/settings) into a dropdown menu. I have applied jQuery transforms to convert the entries into multi-level dropdown menu using bootstrap's navbar structure. There are also many list-type blocks which are converted by the script into dropdowns. All of these are accessible via keyboard and also for partially and/or fully blind users. I've had to meticulously override bootstrap at every step, considering every possible combination of classes and states, which ends up in giant CSS files.
I have completed the design as of this evening and everything is working well in all browsers I've had quickly tested, but am interested in slimming down the css a lot. Modular loading would accomplish this, but apparently, Moodle doesn't do it that way.
I'll be getting started on pruning sequential overrides on Monday..
I understand
Yes overriding bootstrap does get like that unless you use less to recompile the whole lot - maybe that would be worth looking at for you rather than the enormous amounts of css needed without less? Hopefully you will find that you will be able to cut out a pile of duplication and overrides in your files, but I would suggest you take a look at less and how you could use that to apply a lot of the branding you want - that's how all the bootswatches do it after all, and they are designed to rebrand every aspect of bootstrap
But no, Moodle doesn't do it with modular loading of css, as the way Moodle caches the css is considered to be more efficient - I don't have that level of technical knowledge to understand the workings, but logically if the page has to process what css files it needs then call them in a modular fashion, as opposed to calling a single, already cached, css file then I can see that would very quickly negate any benefits that could possibly be made by reducing the number of css selectors that happen to be in that file by only calling bits of it (well calling several different modular files)
Good luck with your pruning
Ashley - all CSS files in Moodle are combined into a single, static CSS file and then served once to the end user (this single file is updated when Moodle or a plugin are upgraded, or if the 'purge cache' admin option is chosen). This is far more efficient than either providing lots of different CSS files on every page, or providing a different combined CSS file for every page (as that would mean the CSS being downloaded separately for every page, rather than being cached in the user's browser).
Thanks Davo,
My usecase is that there are many teacher-only blocks which add a lot of CSS, which most users (students) don't need in their browser. But since the option doesn't exist, I guess there is nothing I can do.
Have you tried simply using more specific CSS selectors to override styles? For instance, if you were overriding a style for ul.some-class, use body.some-class ul.some-class to create a more specific rule in your CSS. You can use
$PAGE->add_body_class('some-class-you-want-to-add');to add a class that you can use in your module's CSS.
Also, after any change to the plugin's styles.css file, the plugin version must be incremented, and the plugin upgraded, before the style change has an effect.
I did not find the requirement for a version increment mentioned in this forum or the documentation, so it seemed worthwhile to point out.
Using Moodle version 3.0.2.
Yes, bumping the version number is a standard requirement in Moodle to clear any cached data (styling, language strings, etc.). However, whilst developing, it is usually more convenient to simply purge the caches (site admin > developer) or to disable the caches via theme designer mode.
Sweet, that is a helpful tip. For the benefit of others:
Today's Merriam Webster word of the day is apropos for how I often feel about Moodle.
;)
