Color of input text areas and submit button

Color of input text areas and submit button

by Eneko Arriaga -
Number of replies: 10

Hello,

I am trying to set in styles.php that the submit button appears in orange (#FBA100) while the input text areas are left in white.

The following code sets the text area (as intended) in white and the submit button (should be orange) in white:

submit  {
 BORDER-RIGHT: #000000 1px solid;
 BORDER-TOP: #000000 1px solid;
 BORDER-BOTTOM: #000000 1px solid;
 BORDER-LEFT: #000000 1px solid;
 COLOR: Black;
 FONT-SIZE: 10px;
 FONT-FAMILY: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 BACKGROUND-COLOR: #FBA100;
}

input   {
 BORDER-RIGHT: #000000 1px solid;
 BORDER-TOP: #000000 1px solid;
 BORDER-BOTTOM: #000000 1px solid;
 BORDER-LEFT: #000000 1px solid;
 COLOR: 000000;
 FONT-SIZE: 11px;
 BACKGROUND-COLOR: #FFFFFF;
 FONT-FAMILY: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

input text   {
 BORDER-RIGHT: #000000 1px solid;
 BORDER-TOP: #000000 1px solid;
 BORDER-BOTTOM: #000000 1px solid;
 BORDER-LEFT: #000000 1px solid;
 COLOR: Black;
 FONT-SIZE: 11px;
 FONT-FAMILY: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 BACKGROUND-COLOR: #FFFFFF;
}

If I change the Background-color for "input" or "input text" to orange, everything changes to orange.

Does anybody have a clue as to how I can set the input text area in white while the submit button shows in orange? My uneducated guess is that it is something to do with the CSS syntax, which I am not very familiar.

Any comment would be greatly appreciated. Thanks in advance.

Attachment textsubmitwhite.gif
Average of ratings: -
In reply to Eneko Arriaga

Re: Color of input text areas and submit button

by Timothy Takemoto -

Dear Eneko Arriaga, I am not expert, but there does not seem to be a stylesheet class distinction between that of the input areas and the submit button. If this is the case then you would either need to ask Martin to include a submitbutton class in the stylesheet, edit the Moodle source files, or wait for version 2 in which there will be more sophisticated template controlled stylesheets. I agree that the standar grey submit buttons are rather dull.
Tim

Average of ratings: -
In reply to Timothy Takemoto

Re: Color of input text areas and submit button

by Eneko Arriaga -
Thanks very much for that, Tim.

I'll try to edit the source files. Could you give me an idea of which files or libraries I need to edit to create a new submit button class for the stylesheet?

Cheers

Eneko


Average of ratings: -
In reply to Eneko Arriaga

Re: Color of input text areas and submit button

by W Page -
Hi Eneko!

Put a post in the "General Problems" Forum about this.  Ask Martin if he can help you with this in that Forum.  Also, contact Jeffery Watkins.  He is one of the ModleThemes Masters.  He may know a way to address this.  His site is at, www.classroomrevolution.com .

Hope this helps.

WP1
Average of ratings: -
In reply to Eneko Arriaga

Re: Color of input text areas and submit button

by David Scotson -

You'd need to edit every instance of a submit button in the HTML to give it a class. This would allow it to be styled separately from the other input elements, and then you'd have to add the CSS too.

I don't know if it's worth the effort just to have different coloured submit buttons especially as it may be confusing if you miss any (users may wonder about the significance of differently coloured buttons) and grepping for type=submit (with and without quotes) returns quite a number of results. However, since Martin is currently evaluating libraries to generate HTML forms, he may want to add this feature as an evaluation criteria.

You can get an idea of the techniques and possibilities from this article: http://www.sitepoint.com/article/1166

Average of ratings: -
In reply to David Scotson

Re: Color of input text areas and submit button

by W Page -
Hello All!

We need to get Martin's attention regarding this while he is making some other coding changes.  It is not an essential change but it sure would be nice to be able to make the submit button  more customizable.  I guess if he is not too busy with the other 10,000 things he is trying to do, he may have time to address this.  The Man never seems to run out of energy.  big grin

WP1
Average of ratings: -
In reply to David Scotson

Re: Color of input text areas and submit button

by Eneko Arriaga -
Thanks for your help, David & Co.

It certainly looks prone to error and a lot of effort. It'd be great if this and other html elements could have their own class so that they can be customised independently, though I do not quite know how this fits into the 1.x branch and Moodle 2.

Cheers

Eneko

Average of ratings: -
In reply to Eneko Arriaga

Re: Color of input text areas and submit button

by Berenice Weber -
thanks a lot for this post, I've been looking for a while now for that button style, now I know it doesn't exist, it just uses the background color from the style. I will modify a couple of colors, but not this one then! I think is good practice to leave it the way it is, as you said, to avoid missing some buttons and not having a unified theme across the site. Thank you for posting though!
Berenice W.
Average of ratings: -
In reply to Berenice Weber

Re: Color of input text areas and submit button

by Frank Ralf -
Please see also this discussion on the very same topic:

"CSS style buttons"
http://moodle.org/mod/forum/discuss.php?d=123892#p543944

Note however, that the setting of background colors for buttons might not be supported by every browser.

Frank
Average of ratings: -
In reply to Frank Ralf

Re: Color of input text areas and submit button

by Frank Ralf -
I found this nice tutorial which also covers browser inconsistencies:

"Stylish Buttons"
http://www.webreference.com/programming/css_stylish/
Average of ratings: -
In reply to Frank Ralf

Re: Color of input text areas and submit button

by Berenice Weber -
thanks a lot Frank Ralk, this tutorial is very well done, I might not use it for this instance of Moodle I am working with since, they do require an 'input' tag for the buttons, and I am not using one, but it will surely help me with other applications. I truly appreciate it! smile
Average of ratings: -