Hi Steve,
There's some nasty CSS which sets the background of the sides of the topic boxes to "none". So you will have to override that in your stylesheet like so (see screenshot):
tr#section-1 {
background: lime;
}
tr#section-1 td.side {
background: fuchsia !important;
}
hth
Frank
BTW
I added a link to this thread to Themes FAQ#Colors.
There's some nasty CSS which sets the background of the sides of the topic boxes to "none". So you will have to override that in your stylesheet like so (see screenshot):
tr#section-1 {
background: lime;
}
tr#section-1 td.side {
background: fuchsia !important;
}
hth
Frank
BTW
I added a link to this thread to Themes FAQ#Colors.
Hi Dr Dey,
Novice questions are always welcome on the Moodle forums.
I don't like your chances of Frank monitoring a thread from 6 months ago... but you'll find some tips at the link he shared above to the themes FAQ. Basically, you are going to need access to the theme files on your server to change the CSS.
That MoodleDocs page is a great place to start, or you might want to head on over to the Moodle Themes forum (http://moodle.org/mod/forum/view.php?f=29) to ask a specific question.
Good luck,
Myles C.
Novice questions are always welcome on the Moodle forums.
I don't like your chances of Frank monitoring a thread from 6 months ago... but you'll find some tips at the link he shared above to the themes FAQ. Basically, you are going to need access to the theme files on your server to change the CSS.
That MoodleDocs page is a great place to start, or you might want to head on over to the Moodle Themes forum (http://moodle.org/mod/forum/view.php?f=29) to ask a specific question.
Good luck,
Myles C.
Just a word of warning to anyone trying this - I know nothing about CSS so I couldn't do this but do make sure you do know what to edit - in September I went off Moodle training to a secondary school which had a lovely customised theme - in dark blue -to match their school colours and made by their IT tech guy (who happened to be off sick that day) All went well until I got the teachers to turn on the editing and try to edit a topic section -the html editor screen (that I am typing into now) was dark blue and there was noway they could see what they were typing!! I tried switching to a standard theme but the editor was dark blue on all of them (he must have overridden the standard theme) - so we spent the day either highlighting the text to see what they'd written or else changing the font colour to white -adding their text and then before they saved changes - changing back to black again because the course page was actually white
The teachers were all very patient but perhaps not the best first time introduction to Moodle!
The teachers were all very patient but perhaps not the best first time introduction to Moodle!
Appreciate the reply, Gareth. Is it possible, via your suggested route, to change the backgrounds of individual topic boxes within a course? I do not want to change the whole site with a particular colour theme, rather change topic box backgrounds in the way you might apply a different background colour to a powerpoint slide. Cheers, Steve.
Dear Steve,
With my solution - no! For the moment, go with Mary's solution - but that means that (unless I'm wrong) you have to embed links to the activities etc. manually. The only way this could be done in the future would be with a custom course format or new functionality added to the core code.
As my solution involves changing the css styles and the styles are used by the 'format.php' of the course format in a repetitive manner - then there is no knowledge in the code of 'a particular topic should be a particular colour on a given course'. This would be new functionality.
I hope this helps, cheers,
Gareth
With my solution - no! For the moment, go with Mary's solution - but that means that (unless I'm wrong) you have to embed links to the activities etc. manually. The only way this could be done in the future would be with a custom course format or new functionality added to the core code.
As my solution involves changing the css styles and the styles are used by the 'format.php' of the course format in a repetitive manner - then there is no knowledge in the code of 'a particular topic should be a particular colour on a given course'. This would be new functionality.
I hope this helps, cheers,
Gareth
Hi Steve,
Nadav Kavalerchik came up with a one-line patch that you can put into any theme, which allows a teacher to put a stylesheet in the "Files" area of their course (must be named custom_style.css) and that course will pick its style definitions from the teacher's custom style sheet.
Pretty cool!
Here's what Nadav says to do:
[See the original Moodle Tracker item for this: http://tracker.moodle.org/browse/MDL-20590 ]
So, once you add this one-liner to the <head> section of the "header.html" file of the theme, and select that theme as the theme for the course, you need to upload a file named "custom_style.css" into the "FILES" area of the course. Do not put it into another folder within the Files area. It must sit in the root.
Now, to control the background color of a course content block in the middle, you should put this css definition into your custom stylesheet:
.content {
background-color:#FFCC00; //whatever your color is
}
or you could put a background image there with
.content {
background-image:url(imagename.jpg); //if your image is in a folder you need the path to the image, say "myimages/theimage.jpg"
background-repeat: repeat-y; //controls whether the image should be repeated if the block grows longer
background-position: center top; //controls where the image is placed within the block
}
More about css definitions at http://www.w3schools.com/css/
And if you install the Web Developer plug-in for Firefox (or some similar tool) you can identify what each block/area is called in the structure of the course page so that you can target other parts and customize colors and fonts and more!
And it will apply to only that course which has the custom_style.css in its Files area. Other courses using the same theme won't have the customizations you made unless you upload the same stylesheet into those courses. They can have their own custom_style.css file with their own customizations!
Attached is an example I have created.
Hope this is what you are trying to achieve and that this helps!
All kudos to Nadav for making this possible!
Best, Sarah
Nadav Kavalerchik came up with a one-line patch that you can put into any theme, which allows a teacher to put a stylesheet in the "Files" area of their course (must be named custom_style.css) and that course will pick its style definitions from the teacher's custom style sheet.
Pretty cool!
Here's what Nadav says to do:
this tiny patch, enables custom CSS layouts for each course that uses the theme that implement this patch. open the header.html file of any theme and add the following line inside the <head> section <LINK REL=StyleSheet HREF="<?php echo "$CFG->wwwroot/file.php/$COURSE->id/custom_style.css" ?>" TYPE="text/css" MEDIA=screen> now, make sure the teacher knows it has to place the CSS markup inside a file called "custom_style.css" on the root of the course's "files" (and folders) section. teachers use this (on our side of the globe) to hide sections, change font sizes, change header images (school logo)... and add some personal touch to their virtual class |
[See the original Moodle Tracker item for this: http://tracker.moodle.org/browse/MDL-20590 ]
So, once you add this one-liner to the <head> section of the "header.html" file of the theme, and select that theme as the theme for the course, you need to upload a file named "custom_style.css" into the "FILES" area of the course. Do not put it into another folder within the Files area. It must sit in the root.
Now, to control the background color of a course content block in the middle, you should put this css definition into your custom stylesheet:
.content {
background-color:#FFCC00; //whatever your color is
}
or you could put a background image there with
.content {
background-image:url(imagename.jpg); //if your image is in a folder you need the path to the image, say "myimages/theimage.jpg"
background-repeat: repeat-y; //controls whether the image should be repeated if the block grows longer
background-position: center top; //controls where the image is placed within the block
}
More about css definitions at http://www.w3schools.com/css/
And if you install the Web Developer plug-in for Firefox (or some similar tool) you can identify what each block/area is called in the structure of the course page so that you can target other parts and customize colors and fonts and more!
And it will apply to only that course which has the custom_style.css in its Files area. Other courses using the same theme won't have the customizations you made unless you upload the same stylesheet into those courses. They can have their own custom_style.css file with their own customizations!
Attached is an example I have created.
Hope this is what you are trying to achieve and that this helps!
All kudos to Nadav for making this possible!
Best, Sarah
Dear Sarah,
This is superb!
It jolted my mind into remembering about course themes - http://docs.moodle.org/en/admin/setting/themesettings#Course_themes - and if that functionality could be enhanced to include the idea.
Cheers,
Gareth
This is superb!
It jolted my mind into remembering about course themes - http://docs.moodle.org/en/admin/setting/themesettings#Course_themes - and if that functionality could be enhanced to include the idea.
Cheers,
Gareth
CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming.
See especially Themes_FAQ#Where_shall_I_put_my_custom_CSS_code.3F.
hth
Frank
See especially Themes_FAQ#Where_shall_I_put_my_custom_CSS_code.3F.
hth
Frank
There is now also Davo Smith's Topic Colours course format... https://moodle.org/plugins/view.php?plugin=format_colours