Changing color of all submit buttons in Essential

Changing color of all submit buttons in Essential

by Willow Nolland -
Number of replies: 13

Hi,

I'm working in Moodle 2.6 and using the Essential theme.  I'm trying to change the color of all of the submit buttons (those in lessons, quizzes, etc) in the course I'm developing so that they are black with white writing.  This is the CSS I am using, but they keep appearing as white buttons with black writing.

input[type="submitbuttin"] {background-color:#000000;
border: none;
color: white;
font-weight: normal;
text-transform: normal;}

I have trying playing around with this CSS in a variety of different ways, and the buttons keep appearing the same.  What am I doing wrong?


Average of ratings: -
In reply to Willow Nolland

Re: Changing color of all submit buttons in Essential

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

Well I think that spelling might have something to do with why it is not working. First of all I think 'submitbuttin' is non-existent, but 'submit' on its own should work...

input[type="submit"] {
    background-color: #000000;
    border: none;
    color: white;
    font-weight: normal;
    text-transform: normal;
}

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

Re: Changing color of all submit buttons in Essential

by Willow Nolland -

That was actually just a typo here.  I used "submitbutton" in the actual code, but it didn't work.  So, I changed it to just "submit", but the button is still showing up as a white button with black text.  I'm entering the CSS into the custom CSS box in the general settings area of site administration.  That's where I'm supposed to put it, right?

Average of ratings: -
In reply to Willow Nolland

Re: Changing color of all submit buttons in Essential

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

Willow,
I have just been looking at the Essential theme and found that there are settings to allow you to choose an alternative colour for the theme which also changed the buttons too. Have you tried that setting yet? 

Cheers

Mary

Average of ratings: -
In reply to Willow Nolland

Re: Changing color of all submit buttons in Essential

by Rebecca Trynes -
Well, that's a tricky one. You see, most buttons are type="submit", but they're not all 'submit' buttons if you know what I mean (they can be 'next', 'cancel', etc.) So you definitely don't want to apply your style to type="submit" if you're wanting only 'submit' buttons to be different.

On a quiz page the submit button has a value="Submit all and finish" but on a lesson page you have value="Submit" or name="submitbutton".

If you just want to change the 'submit' button colour then you need:

input[value="Submit"] {}

If you want to also change the button on the quiz page, you'll need:
input[value="Submit"], input[value="Submit all and finish"] {}

Or simply:
input[value~="Submit"] {}

...which means that the value contains the word Submit.
Average of ratings: -
In reply to Rebecca Trynes

Re: Changing color of all submit buttons in Essential

by Stefan Meier -

I just found this post having the same problem

I tried the settings you suggested but could not get it done the way I want

I'm Using moodle 3.0.2 with essentials theme

I was able to change most of the buttons in Lessons using the color module of essentials theme but the submit button in lessons is not listed there

When examining the submit-button within a lesson firebug shows me this

<div id="yui_3_17_2_1_1476397419104_235" class="felement fsubmit">
<input id="id_submitbutton" type="submit" value="Einreichen" name="submitbutton">

so I tried

input[name="submitbutton"] {
border-color: #FFCCCC;
border: solid;
border-color:red;

this changed the button border to solid but i could not change anything else like color or Background color...
Any Idea what's wrong? Is this style may be coming from yui?

submitbutton

Average of ratings: -
In reply to Stefan Meier

Re: Changing color of all submit buttons in Essential

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

The background is an image as in background-image:

but the image in this instance is not a picture, it is a gradient Using CSS

If you search Google for 'gradient background color' you will find a site where you can create that CSS for the colours you want to use.

The background-color property is also added as a fallback for those browsers that don't support CSS3 which is what the gradient is classed as

Hope this helps?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Changing color of all submit buttons in Essential

by Stefan Meier -

Well I you pointed me in the right direction. I found the values where the color is stored


background-imagelinear-gradient(rgb(0,​ 136,​ 204),​ rgb(0,​ 68,​ 204))

so i tried playing with the rgb values.

input[name="submitbutton"] {
background-image: linear-gradient(rgb(0,​ 140,​ 10),​ rgb(0,​ 5,​ 5))
border: 20px solid red;

}


the border-properties I used to test. If i only insert

border: 20px solid red; i get a blue border. Red does not have an effect

submit

If i add the first line background-image: linear-gradient(rgb(0,​ 140,​ 10),​ rgb(0,​ 5,​ 5))

the button looks unchanged as if i did not use any custom css. I assume there must be an error.

I also tried     background-image: linear-gradient(to bottom, #ffffff, #000000);

but no luck.


As my css experience is quite limited I find it hard to see what I could be doing wrong


Average of ratings: -
In reply to Stefan Meier

Re: Changing color of all submit buttons in Essential

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

Ok,

That button is the Bootstrap 'primary' button (https://github.com/gjb2048/moodle-theme_essential/blob/MOODLE_30/less/essential/form.less#L103-L105).  It can be changed by altering the values here: https://github.com/gjb2048/moodle-theme_essential/blob/MOODLE_30/less/bootstrap-override/variables.less#L98-L99 and regenerating the CSS from the LESS using the instructions contained in 'Gruntfile.js'.  I have created a screen cast for this (for the Shoehorn theme, but its the same for Essential):


G

Average of ratings: -
In reply to Stefan Meier

Re: Changing color of all submit buttons in Essential

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

You need the rest of the unique ID and class selectors in front of the input bit!

#region-main form #fgroup_id_buttonar input[type="submit"] { background-image (  ... ) }

Average of ratings: -
In reply to Mary Evans

Re: Changing color of all submit buttons in Essential

by Stefan Meier -

If i do that, there is no visible change at all

If i just use input[type="submit"] I can change the border style but if inserting

background-image: linear-gradient(to bottom, #999, #999);

There is no change again

If i just use input I guess more than just this button will be affected but that is not such a problem.


Average of ratings: -
In reply to Stefan Meier

Re: Changing color of all submit buttons in Essential

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

Well that all depends on what it is you are adding and where!

Here is most of the CSS that is generated within Essential for the link buttons including the hover and active one too.

Average of ratings: -
In reply to Mary Evans

Re: Changing color of all submit buttons in Essential

by Stefan Meier -

got it.

I inserted the first paragraph of your post and now i am able to alter the button as planned.

Thanks a lot


Average of ratings: -
In reply to Willow Nolland

Re: Changing color of all submit buttons in Essential

by Gerald Grow -

The color of the Quiz Submit All and FInish button has been changed for Moodle 3.3.1 and above in Essential. 

Too many of our users were accidentally clicking the button to return to the start of the quiz, so my little company funded this change.

Average of ratings: -