How to change the style of button

How to change the style of button

by Amal k -
Number of replies: 5

Hi


i want to change the style of button, (that is border-radius etc). if i change the default style does it affect when upgrading the moodle

Average of ratings: -
In reply to Amal k

Re: How to change the style of button

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

Your changes will get overridden if you upgrade the theme you are using. eg. If you make your changes to Clean, then upgrading Moodle will override those changes as Clean is part of core moodle. If you make your changes to a third party theme (e.g. essential, bcu, flexibase) then those changes will be overridden when you upgrade your theme, unless you make the changes via the customcss option in most themes.

Note: It is advised NOT to make changes direct to core themes for just this reason (and most contributed themes as well) and that if you are going to make changes that you should use a child theme to do so.

In reply to Amal k

Re: How to change the style of button

by Andy Chaplin -

Hi Frank,

I did this by adding the changes to the custom html section.  Those changes remain in that section after an upgrade (though it's possible, of course, that the names may get changed and you will have to update your changes accordingly).

All the best


Andy

In reply to Andy Chaplin

Re: How to change the style of button

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

Andy,

If the changes are purely styling (ie css) then I believe it is better to add those changes to the customcss of the theme, rather than the additional html section. I am not sure that css added to the additional html would be cached correctly the way theme css is.

The additional html would also apply across any/all themes used on the site, which may be beneficial, but may also cause problems where that css clashes with css already in themes it wasn't originally intended for.

In reply to Richard Oelmann

Re: How to change the style of button

by Andy Chaplin -

Good point Richard,

I've just looked at the site where I did this and had actually done what you said.  I the additional html section, I'd added a new button, and the edits to existing buttons were added to the custom css section.

I guess it would depend on the theme - if it uses standard bootstrap buttons then I'm guessing it would be better to do the changes in the additional html section, but if the buttons are customised then changing it in the theme would be better.  Is that right?

In reply to Andy Chaplin

Re: How to change the style of button

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

Not really - I think any css only changes are better done in the customcss. So rather than new v existing or standard BS v customised, I would say its more a case of if its css only it goes in customcss, if its genuinely additional html and that requires some styling along with it, then include that styling with the additional html.

If you apply css within the additional html, I don't think it is cached and it also may then override desired css in another theme which styles things differently to your main theme, leaving unintended changes if the theme is changed. I also think that if css is applied through the additional html it cannot then be overridden by the customcss as even the additionalheadhtml is applied at the bottom of the <HEAD> and so after all the theme/customcss.

Personally, I would only add css to the additional html where it goes along directly with the html that is being added there and so doesn't relate to anything in the theme without the additional html - or that the html would fail or look odd without the css if it was added to a theme customcss and then a different theme was used (the additional html would still be applied then, but without the css which would have been in the theme customcss).

ie

CSS only - put it in the customcss

Additional HTML that will look 'wrong' without its css - put the css with the html in the additional html.

Average of ratings: Useful (1)