CSS style buttons

Re: CSS style buttons

by Boris v S -
Number of replies: 8
This is an example of the buttons. These are at the course page.

4a1679c4919f7-Untitled-2.jpg
I'm sorry, but it's in Dutch.
Translation: Save changes and go back to the course page
Cancel

In reply to Boris v S

Re: CSS style buttons

by Frank Ralf -
Some more information would be helpful:

1) What theme do you use?
2) In which way do you want to change the buttons?
3) If I understand you correctly you don't want to style all buttons the same way. What's the differentiating factor?

Another tip:
Use Firebug for analysing and modifying CSS on the fly.

Cheers,
Frank
In reply to Frank Ralf

Re: CSS style buttons

by Boris v S -
1) What theme do you use?
I've build my own theme.

2) In which way do you want to change the buttons?
I want to change the border and text-color to #EE4F00.

3) If I understand you correctly you don't want to style all buttons the same way. What's the differentiating factor?
Maybe I haven't explained it very well, but this is what I mean:
My buttons get the same class as the inputfields(searchfield, username, etc). Because they both use the #input style. But when I change the colors of the buttons, the inputfields also change...
In reply to Boris v S

Re: CSS style buttons

by Dan Humpherson -
/*Save and return to course*/
#id_submitbutton2 {
color: #EE4F00;
border: 1px solid #EE4F00;
}
/*Save and display*/
#id_submitbutton {
color: #EE4F00;
border: 1px solid #EE4F00;
}
/*Cancel*/
#id_cancel {
color: #EE4F00;
border: 1px solid #EE4F00;
}

/*Choose or upload a file*/
#id_mediafile_popup {
color: #EE4F00;
border: 1px solid #EE4F00;
}

/*Turn editing on --- Bit trickier as it doesn't have and id or class....*/
/*Turn editing on button on the Standard theme appears in the right-column*/
/*Trouble here is that other form elements exist in the right-column on other pages*/
#right-column .input {
color: #EE4F00;
border: 1px solid #EE4F00;
}

So in short some buttons can be styled individually but others cant (That is based on ID's and CLASS's)
Average of ratings: Useful (1)
In reply to Dan Humpherson

Re: CSS style buttons

by Boris v S -
Ok, thanx a lot for the tip!
I will try it on my theme.

Thnx! glimlach
In reply to Boris v S

Re: CSS style buttons - without ids and classes

by Frank Ralf -
You can style buttons even without resorting to ids and classes.

A button is defined in HTML as <input type="submit" />. You can select HTML elements in CSS using attributes with a similar syntax like so:

input[type="submit"] {
background-color: lime;
border: 2px dashed orange;
color: red;
font-weight: bold;
text-transform: uppercase;
}

However, not all settings might work on first try, depending on your other CSS settings and on the browser.

hth
Frank



Average of ratings: Useful (2)
In reply to Frank Ralf

Re: CSS style buttons - without ids and classes

by Chris Collman -
Picture of Documentation writers

Thanks Frank !

That good old "submit and finish" button in a quiz now looks, not pretty but DIFFERENT !  I will do pretty later but the student should notice it now.

For others who may have done a search on the submit quiz button, I got a little bit more specific with Frank's idea and code.

Not sure where I was susposed to put things, so I went to styles_fonts.css in the standard theme which we are using (still) in 1.5.3.  I inserted after/*** Modules: Quiz***/  the code:


input[type="submitbutton"] {
background-color: #FFCCFF;
border: 2px dashed blue;
color: black;
font-weight: normal;
text-transform: normal;
}

Notice the changed the type now called "submitbutton".

Then I went to mod/quiz/attempt.php .   There is a section called "Print the submit buttons".

I only wanted the finishattemp to change.  So I changed

echo " <input type=\"submit\" name=\"finishattempt\" value=\" ..and so on

to

echo " <input type=\"submitbutton\" name=\"finishattempt\" value=\"

Oh yes, in the attempt.php file in the same area I changed the echo "<center>\n"; to echo "<right>\n"; Why it pushed the buttons to the left is beyond me but that is where I want them.  I do not expect any major trouble in changing the code in our 1.9.9 Moodle in a similar manner.

How ugly and without much class is this smile

Thanks again Frank.  Chris

Attachment SubmitbuttonUgly.png
In reply to Chris Collman

Re: CSS style buttons - without ids and classes

by Chris Collman -
Picture of Documentation writers

Nice idea Chris but it does not work (says Chris to himself).

I suspect there is a class involved when i change submit to submitbutton smile   Does not work when the page advances and I think closes the quiz.   The move to the left with the <right> works on all pages.

 

I am determined to figured this out over Xmas.  Maybe it is easier in 1.9. or 2.0 smile