New comer, how to modify the look of plugins!

New comer, how to modify the look of plugins!

by Nadirshah Ferozepurwalla -
Number of replies: 7

Hello users,

I have to customize the UI, look and feel of a running moodle site catering a thousand students, my first requirement is to understand and change the look and feel of a few free plugins installed on the schools moodle site.

I went through the developer docs but could find any specific instruction saying how to add css for plugins.

Yes there are themes , but does this mean that all plugins must have the UI altered using additional/custom CSS, or can the plugin code be joined with a specific CSS present within the specific plugin folder.

I am not a core programmer but trying to help out, so what am i missing here? or am i right in saying that

"a plugin can only be functionality with no formatting, UI needs to be altered using css and html tags, chrome firefox developer tools ?

Please guide

Thankyou,

Average of ratings: -
In reply to Nadirshah Ferozepurwalla

Re: New comer, how to modify the look of plugins!

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

Plugins can include a css file, but that would mean having to monitor and amend every plugin individually at any upgrade.

It is far more common to use the theme to override the plugin css and create the overall look and feel of the site as a whole, including the plugins being used.

If you have access to the code files (which you would need to amend the plugin css) then you don't necessarily have to use the customcss theme setting, you could create a plugins.css file (or one for each plugin), add it to the styles folder of your theme and reference the files in the theme config.php - OR use the additional customcss setting smile

Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: New comer, how to modify the look of plugins!

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

And just to add to this - all the CSS on the site (from the current theme, all the plugins, etc.) gets merged together into one big file and sent to the user.

So, despite where it originates from, there is not a set of CSS that is only applied to a certain plugin - all of it applies to all pages (but, mostly, plugins will target specific 'classes' or 'ids' in the HTML, so that only the elements within that plugin will be styled).

Note that theme CSS is included after the plugin-specific CSS, so that the theme CSS has a chance to override the plugin CSS (as later rules take precedence over earlier rules, assuming they are both as specific as each other).

Average of ratings: Useful (2)
In reply to Davo Smith

Re: New comer, how to modify the look of plugins!

by Nadirshah Ferozepurwalla -

@Davo Smith

thanks for pointing this merging of css, had read about this in the past but slipped my mind.

but as i mentioned in other reply,..


this means that i have to study the developing THEME part docs of moodle, and trace the tag ids of elements which require the css.


Any thing i might be missing here?

 I will be tracing elements to add css for the tags,! this is time consuming and i might miss out some stage of the plugin, is there a proper document format/tags/ids which plugin developers must use in moodle?

A standard format or something for ids? so customizing would be easy.

Lost here,




Average of ratings: -
In reply to Richard Oelmann

Re: New comer, how to modify the look of plugins!

by Nadirshah Ferozepurwalla -
thanku but, 


this means that i have to study the developing THEME part docs of moodle, and trace the tag ids of elements which require the css.


Any thing i might be missing here?

 I will be tracing elements to add css for the tags,! this is time consuming and i might miss out some stage of the plugin, is there a proper document format/tags/ids which plugin developers must use in moodle?

A standard format or something for ids? so customizing would be easy.

Lost here,

Average of ratings: -
In reply to Nadirshah Ferozepurwalla

Re: New comer, how to modify the look of plugins!

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

If you are creating the plugin then surely you know what elements you are adding that you want to style, while common elements that go across all plugins are given a generic style by core code and you don't normally need to do anything with that - bear in mind that people use themes to control the look and feel of a whole site, they really dont want to have to add customcss for every specific third party plugin simply because the developer of that plugin overrode all the core styles.

If you need to style anything taht comes from core, then use firebug or chrome developer tools - but when adding the css, make sure you use a selector that makes it specific enough to your plugin so that other elements across the site as a whole are not affected.

So wrap your plugin in a div with a 'myplugin' class name and any css you do add, make sure it uses that selector to specify the css as being for your plugin and not across the entire site - just in case that class is used elsewhere.

Average of ratings: Useful (3)
In reply to Richard Oelmann

Re: New comer, how to modify the look of plugins!

by Nadirshah Ferozepurwalla -

"So wrap your plugin in a div with a 'myplugin' class name and any css you do add, make sure it uses that selector to specify the css as being for your plugin and not across the entire site - just in case that class is used elsewhere."


Thankyou the best advice, never thought of this way

Average of ratings: -
In reply to Nadirshah Ferozepurwalla

Re: New comer, how to modify the look of plugins!

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Note, you often do not need to do this yourself.

Before you add another div, have a look at the classes that already exist on the <body> tag, or on some of the other divs that are already in the page.

Average of ratings: -