Themes

Changing color of all submit buttons in Essential

 
Picture of Willow Nolland
Changing color of all submit buttons in Essential
 

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: -
It's only an avatar...
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Picture of Willow Nolland
Re: Changing color of all submit buttons in Essential
 

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: -
It's only an avatar...
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Me
Re: Changing color of all submit buttons in Essential
 
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: -
Picture of Stefan Meier
Re: Changing color of all submit buttons in Essential
 

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: -
It's only an avatar...
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Picture of Stefan Meier
Re: Changing color of all submit buttons in Essential
 

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: -
Gareth J Barnard
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Particularly helpful MoodlersGroup 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: -
It's only an avatar...
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Picture of Stefan Meier
Re: Changing color of all submit buttons in Essential
 

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: -
It's only an avatar...
Re: Changing color of all submit buttons in Essential
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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: -
Picture of Stefan Meier
Re: Changing color of all submit buttons in Essential
 

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: -