Essential theme: buttons customization

Essential theme: buttons customization

by Marek Kancelarek -
Number of replies: 15
Hello,
I'm new to Moodle and these forums so let me apologize in advance for any stupid things I may potentially saysmile

I'm setting up a Moodle 2.8.x installation for my students and have chosen Essential as the theme. Overall it's amazing but I stumbled upon a problem with the buttons. I would like to customize them a bit more. The theme doesn't seem to have any customization settings as far as the buttons are concerned aside for the colour scheme.  The problem I'm experiencing is releated to buttons positioning:
sometimes a part of the content is hidden by the button, like in this image:


Is it possible to disable the floating of the buttons?


Edit: What is more, this seems to be contribution to [MDL-45620] as when the buttons are floating the user is able to 'submit' before everything loads (resulting in "required parameter (attempt) was missing" error) This has occurred only once during the testing though.

Average of ratings: -
In reply to Marek Kancelarek

Re: Essential theme: buttons customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Marek,

Currently there is no setting to disable the floating effect.  It was added to the theme to assist the scroll of death on large forms where you only changed one element at the top and did not need to scroll to the bottom.  On tablets / mobile devices, the floating effect is automatically disabled.  Certain elements have already been reported as not needing the floating functionality and have been disabled from it.

There is no enhancement to add a 'disable floating' option to the theme as it stands.  If there were, then it would have to be funded.

Kind regards,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential theme: buttons customization

by Marek Kancelarek -

Thank you very much for a prompt answer. Do you think it would be possible to disable floating with custom css? I have tried to do it (by overriding the css for .form-buttons) but for now all my attempts failed. If I manage to do it I'll gladly share the solution with the community, but I first need to know if it's even a reasonable endeavour.


Btw. the element where I notice the overlapping is an e-mail based self-registration form with site policies enabled.

Average of ratings: -
In reply to Marek Kancelarek

Re: Essential theme: buttons customization

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You could try adding this to your Custom CSS

body.desktopdevice #region-main form table#form td.submit,
body.desktopdevice #region-main form .form-buttons,
body.desktopdevice #region-main form .path-admin .buttons,
body.desktopdevice #region-main form #fitem_id_submitbutton,
body.desktopdevice #region-main form .fp-content-center form + div,
body.desktopdevice #region-main form div.backup-section + form,
body.desktopdevice #region-main form #fgroup_id_buttonar {
  position: relative;
  left: 30%;
  bottom: 30px;
}

Then alter the positioning left and bottom to suit...

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential theme: buttons customization

by Francisco Gómez -

Thank you!. The code works perfectly. But I still would like to delete the light blue background of the button. Do you know the code for that?

How to delete the button backgrounf?

Average of ratings: Useful (1)
In reply to Francisco Gómez

Re: Essential theme: buttons customization

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi if you follow this video it explains how to install and use Firebug. After watching the video, you will see how easy it is to find the CSS to remove that background color.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential theme: buttons customization

by Francisco Gómez -

Thank you a lot. It works perfect with the size and colour of the title of the courses:

h1 {

    font-size: 25px;

    color: #630916

}

And it also works the the title of the courses in the Frontpage:


h3 {

    font-size: 17px;

}

But the code to take away the background of the buttom only works in admin pages and not in course configuration:

#page form .form-buttons, #region-main form .form-buttons, #page form #fgroup_id_buttonar, #region-main form #fgroup_id_buttonar {

    background: none repeat scroll 0 center rgba(0, 0, 0, 0);

    border-top: 1px solid #30add1;

}




Average of ratings: -
In reply to Francisco Gómez

Re: Essential theme: buttons customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Look at the HTML source for the page with the issue and use the 'id' of the body tag as the prefix to '#page form .form-buttons, #region-main form .form-buttons' etc.

Average of ratings: -
In reply to Francisco Gómez

Re: Essential theme: buttons customization

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Try adding this to the very END of the

theme/essential/style/custom.css

page to ensure it overrides any settings coded there.

/* CSS starts here */

body.desktopdevice #region-main form table#form td.submit,
body.desktopdevice #region-main form .form-buttons,
body.desktopdevice #region-main form .path-admin .buttons,
body.desktopdevice #region-main form #fitem_id_submitbutton,
body.desktopdevice #region-main form .fp-content-center form + div,
body.desktopdevice #region-main form div.backup-section + form,
body.desktopdevice #region-main form #fgroup_id_buttonar {
    position: static;
}
#page form .form-buttons,
#region-main form .form-buttons,
#page form #fgroup_id_buttonar,
#region-main form #fgroup_id_buttonar {
    background-color: white;
    border-top: 0 none;
}
#region-main form table#form td.submit,
#region-main form .form-buttons,
#region-main form .path-admin .buttons,
#region-main form #fitem_id_submitbutton,
#region-main form .fp-content-center form + div,
#region-main form div.backup-section + form,
#region-main form #fgroup_id_buttonar {
    border-radius: 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: auto;
    z-index: 1;
}
table#form td.submit,
.form-buttons,
.path-admin .buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
div.backup-section + form,
#fgroup_id_buttonar {
    margin: 0;
}
#page form .form-buttons #fgroup_id_buttonar,
#page form table#form td.submit #fgroup_id_buttonar,
#page form .form-buttons #fgroup_id_buttonar,
#page form .path-admin .buttons #fgroup_id_buttonar,
#page form #fitem_id_submitbutton #fgroup_id_buttonar,
#page form .fp-content-center form + div #fgroup_id_buttonar,
#page form div.backup-section + form #fgroup_id_buttonar,
#page form #fgroup_id_buttonar #fgroup_id_buttonar,
#page form fieldset.hidden:last-of-type #fgroup_id_buttonar {
    background-color: white;
}

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Essential theme: buttons customization

by Marek Kancelarek -

Thank you! This is amazing and works perfectly. Exactly what I was looking for.

Average of ratings: -
In reply to Marek Kancelarek

Re: Essential theme: buttons customization

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

forms.less contains other CSS besides the button bits, so you might have to put those back for the forms.

Average of ratings: -
In reply to Marek Kancelarek

Re: Essential theme: buttons customization

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Just delete essential/less/essential/form.less and recompile the LESS using Grunt and all your problems will be over.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Essential theme: buttons customization

by Kees Koopman -

Hi Mary,

You wrote: "Just delete essential/less/essential/form.less and recompile the LESS using Grunt and all your problems will be over."

Eh ... I have two digital left hands smile. 

Delete "essential/less/essential/form.less" OK
"recompile the LESS using Grunt" ==> ????

Can you explain please the second line?

Thanks a lot!

Kees.

Average of ratings: -