How do I change the background colour of each topic 'box' in the 'topics' format? I can change the background colour of any text I enter, but not the actual box.
Steve,
Have you tried using the background color icon in the text box? It looks like a paint can with colors behind it. You can type the text and highlight it, then change the background color.
Thanks for replying, Paula. I have tried this, but it only colours the background behind the text and not the whole box.
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.
Frank:
Hope you read this. I am trying to do the exact same thing, changing the looks and color inside each topic box. Where do I put your CSS codes? Sorry for the novice question but thanks a million in advance.
Dr. Dey
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.
Dear Steve,
You can change the colour for your whole site by adding the 'background' attribute to your '.content' definition in the css for your theme.
Cheers,
Gareth
You can change the colour for your whole site by adding the 'background' attribute to your '.content' definition in the css for your theme.
Cheers,
Gareth
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.
How about making a one column one row table and changing the background colour of that?
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
That's really good (providing of course , your school has access to the themes folder of your moodle install.....)
(providing of course , your school has access to the themes folder of your moodle install.....)
Hi Sarah
That looks great. I'll have to put to it to our Moodle administrator. Thanks for such a detailed and useful reply. Much obliged!
Steve
Glad to share, Steve.
Like I said, Nadav gets the credit!
Like I said, Nadav gets the credit!
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
This is great but I can't work out how to set the format of lists and headings.I know how to use CSS stylesheets but not sure where to put it within .content?
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 a less complex way than all this, you can simply use this line at the top of your subject box (don't worry about ending all the tags, Moodle does this for you...)
<table style="background-color:rgb(255,100,153);width:100%;"><tbody><tr><td width="100%" valign="top">
Cheers Matthew... worked a treat for me... Not sure about the pink though!!
If anyone else tries it, just do a search on RGB codes and it will give you the various settings you will need to choose the colour you want....
WOW! Thanks for the post Sarah and to Nadav for the coding!
There is now also Davo Smith's Topic Colours course format... https://moodle.org/plugins/view.php?plugin=format_colours