Hello,
I'm trying to style all the buttons on my Moodle site. But all the buttons get the same class as "input". So styling them doesn't work.
Is it possible to give the buttons a different style then the input fields?
I'm not sure if I'm understanding right, but could you give multiple buttons different classes?
Well, not really. This is about the input and select buttons. But I mean the buttons, like the button to set editing on, search, save settings, etc.
But I don't know if it's possible.
But I don't know if it's possible.
Could you give a specific example or perhaps a link or a screenshot?
You could use contextual CSS selectors for adressing specific buttons. You are not restricted to using only the class attribute.
Cheers,
Frank
You could use contextual CSS selectors for adressing specific buttons. You are not restricted to using only the class attribute.
Cheers,
Frank
This is an example of the buttons. These are at the course page.
I'm sorry, but it's in Dutch.
Translation: Save changes and go back to the course page
Cancel
I'm sorry, but it's in Dutch.
Translation: Save changes and go back to the course page
Cancel
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
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
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...
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...
/*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)
#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)
Ok, thanx a lot for the tip!
I will try it on my theme.
Thnx!
I will try it on my theme.
Thnx!
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
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
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
Thanks again Frank. Chris
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 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