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.
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
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.
Re: Changing background colour of a topic box.
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
Re: Changing background colour of a topic box.
Re: Changing background colour of a topic box.
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
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
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
Like I said, Nadav gets the credit!
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
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