Using CSS to colour selectors in a Moodle form

Question

I created a selector in form of Moodle 3.0 (with formlib.php in Moodle). I want to change the color of each selector. For example, I created a selector as below:

$mform->addElement('header', 'ChartOptions', get_string('ChartOptions','report_chartreport'));

$select1 = $mform->addElement('select', 'TypeofChart', get_string('SelectTypeofChart','report_chartreport'), ['column','Line']);

$mform->setDefault('TypeofChart', 'column');        //Default value

...and I want to set the 'column' option as blue and set the 'Line' option as red. Is this possible?

I searched using Google but don't see any helpful information.

share your html and css – Suresh Ponnukalai Dec 31 '15 at 12:23 — Suresh Ponnukalai, Dec 31 '15 at 12:23

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

This is not related to moodle, it is only html and css

you can do this via

select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="line"]{
background: rgba(100,100,100,0.3);
}

select option[val="column"]{
background: rgba(200,200,200,0.3);
}

How to change select box option background color?

You can add some basic style in attribute, that is printed in style attribute with element.

or you can assign a css class to this select option and then create a html element with quick form and write the style sheet in that.

$mform->addElement('html', '<style>.cl{<>}.hr{<>}</style>');

so that it would work.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 31 '15 at 12:40

developerCK

4,418
3
16
35

You can add this in "Additional HTML" in Moodle. This is found in /admin/settings.php?section=additionalhtml and you can add that in the header between tags. – Tim Dec 31 '15 at 21:53
Thanks Tim, this is very interesting that i didn't know before. but i want a way that will not need to setting separately. i want a way in my programming. – z.gomar Jan 01 '16 at 07:42
I found that we can use $attribute parameter to change CSS attribute of form of moodle. like this: $attriute=array('style' => 'background-color: lime;'); $select1 = $mform->addElement('select', 'TypeofChart', get_string('SelectTypeofChart','report_chartreport'), ['column','line'],$attriute); // ------------- but i dont know how can set to options of selector and how can set some features.. – z.gomar Jan 01 '16 at 11:20
Tim, when i add this answer codes in "Additional HTML" in Moodle , just first one (select option) was worked and anothers that were for select options didn't work (e.g. select option[val="line"]). do have these options different syntaxs?? how must i write them? – z.gomar Jan 02 '16 at 12:41
Z.gomar , i have updated the answer with possible solution, so you need to find out that how can we add style to moodle form. right ? – developerCK Jan 05 '16 at 04:07

score 0 · Answer 2 · answered Jan 03 '16 at 10:39

I found it. We should create a file 'styles.css' in our Moodle folder. then in this file we should write CSS codes like this:

#page-report-chartreport-Draw_chart #id_TypeofChart option[value='0'] {
  color: black;
  background-color: blue;
}

#page-report-chartreport-Draw_chart #id_TypeofChart option[value='1'] {
  color: black;
  background-color: red;
}

I create 'chartreport' folder in "moodle\report" of Moodle and 'Draw_chart' is my page that this selector is in that.

*Notice: you must Purge all cache in Moodle for see the change in theme.

https://moodle.org/mod/forum/discuss.php?d=325395#p1307734

Using CSS to colour selectors in a Moodle form

2 Answers2