We have a custom theme in use in a course where the background colour is causing problems in chats sessions.
This is the relevant entry in CSS for the theme:
html
{
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size: 80% !important;
background-color: #fbaa1e;
color: #2171a9 !important;
}
The problem is that if I change #fbaa1e to #ffffff, this change also affects the background of the "surround" of the site which also uses that colour. This is a fixed width theme and the "surround" is the area that is displayed outside of the main site area if the monitor resolution is wider than the theme.
How can I change the chat pane background for chat only?
Hi Ray,
Nice to bump into you again here ; ) Hope things are well with you.
Not sure if I have understood exactly what your aim is as I am not familiar with your custom theme. Plus I am still learning how Moodle works ; )
If you wish to change the background colour of the chat pane to a different colour to that of the background colour of the main site like this:
Then you need to specify the css for the specific chat page using its id:
#mod-chat-gui_basic-index
..as otherwise I think the colour is inherited from the global body background colour.
So if you want this lovely yellow colour ; ) then in your custom css file for the theme you need this rule:
#mod-chat-gui_basic-index {
background-color: yellow;
}
Hope this helps.
~thomas
Hi Thomas,
That didn't have any impact at all on my chat pane. I noticed a silly error in my attempts yesterday, having corrected that I've achieved the effect below.
Any ideas why your solution didn't work for me?
Edit: It works in the non-JavaScript chat option.
That didn't have any impact at all on my chat pane. I noticed a silly error in my attempts yesterday, having corrected that I've achieved the effect below.
Any ideas why your solution didn't work for me?
Edit: It works in the non-JavaScript chat option.
Hi Ray,
For the javascript version you need #mod-chat-gui_header_js-jsupdate
Jon
For the javascript version you need #mod-chat-gui_header_js-jsupdate
Jon
Thanks Jon,
Getting closer... see below.
CSS is:
#mod-chat-gui_basic,
#mod-chat-gui_header_js-jsupdate{
background-color: #ffffff;
}
#mod-chat-gui_header_js-chatinput{
background-color: #ffffff;
}
#mod-chat-view #chatcurrentusers {
background-color: #ffffff;
}
What else can I do to get an all white background?
Getting closer... see below.
CSS is:
#mod-chat-gui_basic,
#mod-chat-gui_header_js-jsupdate{
background-color: #ffffff;
}
#mod-chat-gui_header_js-chatinput{
background-color: #ffffff;
}
#mod-chat-view #chatcurrentusers {
background-color: #ffffff;
}
What else can I do to get an all white background?
Umm..
Try
.chat-event{
background-color: #fff;
}
.chat-message{
background-color: #fff;
}
Jon
edit----
You could also try...
body#mod-chat-gui_header_js-jsupdate{
background-color: #fff;
}
Try
.chat-event{
background-color: #fff;
}
.chat-message{
background-color: #fff;
}
Jon
edit----
You could also try...
body#mod-chat-gui_header_js-jsupdate{
background-color: #fff;
}
Have you tried using Firebug?
Thanks, Ralf.
I used Firebug to inspect the CSS initially. This gave me the following for the chat pane background
html
{
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size: 80% !important;
background-color: #fbaa1e;
color: #2171a9 !important;
}
I'm stuck. Perhaps there's no way to make this a different colour.
I used Firebug to inspect the CSS initially. This gave me the following for the chat pane background
html
{
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size: 80% !important;
background-color: #fbaa1e;
color: #2171a9 !important;
}
I'm stuck. Perhaps there's no way to make this a different colour.
Have you tried using "!important;" on the background-color? That gives your own CSS a little more punch 
hth
Frank
hth
Frank
Sadly no different with !important....
Thanks, Jon.
I tried both of those, but I get the effects in the screen shots above.
I tried both of those, but I get the effects in the screen shots above.
Does
frame html body{
background-color: #fff;
}
work?
I'm afraid I don't have access to a Moodle install to check this on so I am stabbing in the dark a bit!
I will have a look at work tomorrow if I get a minute and see if I can figure it out (My custom theme does the same btw).
frame html body{
background-color: #fff;
}
work?
I'm afraid I don't have access to a Moodle install to check this on so I am stabbing in the dark a bit!
I will have a look at work tomorrow if I get a minute and see if I can figure it out (My custom theme does the same btw).
Nope. Thanks again though.
Another tricky area on my theme is the message pop-up. Is that OK on your custom theme?
Another tricky area on my theme is the message pop-up. Is that OK on your custom theme?
Hi Ray,
I did some poking myself using the Standard theme, see screenshot.
The background-color seems to be inherited from the standard CSS for each of the frames body tags (magenta and blue in the screenshot) and the form tag (green). By using "!important" you can override those settings.
hth
Frank
I did some poking myself using the Standard theme, see screenshot.
The background-color seems to be inherited from the standard CSS for each of the frames body tags (magenta and blue in the screenshot) and the form tag (green). By using "!important" you can override those settings.
hth
Frank
Colourful!I can make the changes using Firebug but how do I make them local to the chat pane?
Hi Ray,
The easiest way to find out is looking at each frame'e source code (with your browser's function or Firebug) which CSS style sheets are linked by your theme like so:
<link href="http://moodle.org/theme/standard/styles.php" type="text/css" rel="stylesheet">
Then you can do a search to find the CSS rule your interested in and modify that rule.
The line numbers Firebug shows are mostly of not much use because they pertain to the aggregated CSS Moodle sends to the browser and not the actual line numbers of the files on the server.
hth
Frank
The easiest way to find out is looking at each frame'e source code (with your browser's function or Firebug) which CSS style sheets are linked by your theme like so:
<link href="http://moodle.org/theme/standard/styles.php" type="text/css" rel="stylesheet">
Then you can do a search to find the CSS rule your interested in and modify that rule.
The line numbers Firebug shows are mostly of not much use because they pertain to the aggregated CSS Moodle sends to the browser and not the actual line numbers of the files on the server.
hth
Frank
Thanks, Ralf.
Unfortunately I don't seem to be able to make the change to the background so that the change is only applied locally i.e. in the chat pane.
I've not had chance to move this n since my last post. If I get the desired affect I'll post here and in Docs. Hopefully before 2.0 when this will no doubt change anyway.....
Unfortunately I don't seem to be able to make the change to the background so that the change is only applied locally i.e. in the chat pane.
I've not had chance to move this n since my last post. If I get the desired affect I'll post here and in Docs. Hopefully before 2.0 when this will no doubt change anyway.....
Which theme do you use? If it is based on one of the standard themes I could have another look.
One solution might be to give the chat window a specific id for selecting it with a CSS rule. But that might make some modifying of PHP code necessary.
One solution might be to give the chat window a specific id for selecting it with a CSS rule. But that might make some modifying of PHP code necessary.
From what I can see, the background colour of this window is being determined by the body tag in the standard style sheet. As there are no ids or classes attached to the body tag of the chat window to differentiate it from the body tag of the main site; I can not see a way to do this... Unless of course we hack the php to add this missing / needed id...
I think I finally found a solution. I put the following CSS in a style.php file which I put in the /mod/chat directory:
body.mod-chat-gui_header_js {
background-color: fuchsia;
}
Make sure that your theme's config.php file contains the following section:
$THEME->modsheets = true;
When this is enabled, then this theme will search for files named "styles.php" inside all activity modules and include them.
Theme config file#Mod sheets
hth
Frank
body.mod-chat-gui_header_js {
background-color: fuchsia;
}
Make sure that your theme's config.php file contains the following section:
$THEME->modsheets = true;
When this is enabled, then this theme will search for files named "styles.php" inside all activity modules and include them.
Theme config file#Mod sheets
hth
Frank
EDIT: I have got it working! Rather than add the code to the styles.php in the chat folder I had to add it to my custom styles.css file for my theme. It then works fine. Guess the custom css was winning out over the mod's css...
Frank,
I think I must be missing something with that!
I created the style.php file in the chat mod folder and copied your css into it.
Checked that my theme has modsheets set to true.
Yet still no change...
What else do I need in that php file?
Jon
Frank,
I think I must be missing something with that!
I created the style.php file in the chat mod folder and copied your css into it.
Checked that my theme has modsheets set to true.
Yet still no change...
What else do I need in that php file?
Jon
Hi Jon,
Glad it worked.
What I found useful when trying different solutions was deactivating your browser's cache while changing the CSS. Otherwise the cached version is still used and not the current modifcation.
The easiest way to do that is using the Web developer extension for Firefox which comes with such function.
Cheers,
Frank
PS
If you want to give your own CSS a little more punch use "!important".
Glad it worked.
What I found useful when trying different solutions was deactivating your browser's cache while changing the CSS. Otherwise the cached version is still used and not the current modifcation.
The easiest way to do that is using the Web developer extension for Firefox which comes with such function.
Cheers,
Frank
PS
If you want to give your own CSS a little more punch use "!important".
I've had chance to try out these solutions but they still don't give me changed in colour in the background. 
Thanks anyway.
Thanks anyway.
Hi Ray,
Maybe I have misinterpreted what you are trying to achieve?
I thought you just wanted the chat window's background colour to have it's colour set independently from the background colour of the main (underlying) Moodle site?
->Click here to enter the chat now:
Pops up a new chat window with a different background colour:
The above CSS allows you to do this. Or is it something else you wish to achieve?
~thomas
Hi,
That's exactly what I'm after. There must be something in my custom theme that's preventing it.
That's exactly what I'm after. There must be something in my custom theme that's preventing it.
Hi Ray,
Have you tried adding Frank's CSS into your custom theme's CSS file? That is what worked for me.
Jon
Hi Jon,
Yup. I've tried everything that's been suggested in this discussion. See below for the current look.
Yup. I've tried everything that's been suggested in this discussion. See below for the current look.
Hi Ray,
Nothing beats looking a the live site when doing CSS troubleshooting
I think I found the culprit: Your background color is provided partly using an image: background-image:url(pix/rshadow.gif) That will override setting background-color.
So try adding "background-image: none !important;" to the above solution.
hth
Frank
PS
Could you perhaps provide guest access to your site?
Nothing beats looking a the live site when doing CSS troubleshooting
I think I found the culprit: Your background color is provided partly using an image: background-image:url(pix/rshadow.gif) That will override setting background-color.
So try adding "background-image: none !important;" to the above solution.
hth
Frank
PS
Could you perhaps provide guest access to your site?
Hi Ray,
I had a closer look at your CSS:
/***
*** Modules: Chat
***/
#mod-chat-gui_basic,
#mod-chat-gui_header_js-jsupdate{
background-color: #ffffff;
}
#mod-chat-gui_header_js-chatinput{
background-color: #ffffff;
}
#mod-chat-view #chatcurrentusers {
background-color: #ffffff ;
}
/***** HowToMoodle_theme/ray.css end *****/
You use the "#" selector which is for ids where those are classes for which you have to use the "." selector (see my solution above). I think that's the solution.
Forget my posting about background images
Frank
I had a closer look at your CSS:
/***
*** Modules: Chat
***/
#mod-chat-gui_basic,
#mod-chat-gui_header_js-jsupdate{
background-color: #ffffff;
}
#mod-chat-gui_header_js-chatinput{
background-color: #ffffff;
}
#mod-chat-view #chatcurrentusers {
background-color: #ffffff ;
}
/***** HowToMoodle_theme/ray.css end *****/
You use the "#" selector which is for ids where those are classes for which you have to use the "." selector (see my solution above). I think that's the solution.
Forget my posting about background images
Frank
I changed # to . No better.
I've copied the theme to another site where I can give you access.
I'll message you with login details
I've copied the theme to another site where I can give you access.
I'll message you with login details
Hi Ray,
The background color must be inherited from high above because the brute force method, deactivating all background settings by first using
* {
background: none !important;
}
did work. Of course this unset also the main window's background...
After some trial and error I found that this modification of my proposed solution from before worked:
html {
background: none !important;
}
body.mod-chat-gui_header_js {
background-color: blue !important;
}
Cheers,
Frank
The background color must be inherited from high above because the brute force method, deactivating all background settings by first using
* {
background: none !important;
}
did work. Of course this unset also the main window's background...
After some trial and error I found that this modification of my proposed solution from before worked:
html {
background: none !important;
}
body.mod-chat-gui_header_js {
background-color: blue !important;
}
Cheers,
Frank
In a word "Perfect". Exactly what I needed. Many thanks.
Added to Docs here: http://docs.moodle.org/en/Theme_scrapbook
Added to Docs here: http://docs.moodle.org/en/Theme_scrapbook
Glad I could help. I always learn a lot from those real life problems.
And thanks for adding this to the Theme Scrapbook of which I wasn't aware until now. I added a link to this thread as some might find other points of the discussion useful in a similar situation.
And thanks for adding this to the Theme Scrapbook of which I wasn't aware until now. I added a link to this thread as some might find other points of the discussion useful in a similar situation.
Unfortunately, at first glance the chat code looks unaltered in Moodle 2.0. But this definitely is a component which should be improved.
Frames are deprecated in XHTML and can be replaced by more accessible layouts.
So I suppose we have to keep struggling...
Cheers,
Frank
Frames are deprecated in XHTML and can be replaced by more accessible layouts.
So I suppose we have to keep struggling...
Cheers,
Frank
Unfortunately we have messaging turned off on our Moodle, so I can't check that. Another area when the background colour does come through is the HTML emailed forum posts. They only have the body background (grey in my site) and not the standard forum background from within the site (white).
I think there is still some tweaking to go... ;)
I think there is still some tweaking to go... ;)
That's an area that's OK on my theme i.e. the body of HTML emails is white.
If we can crack the Chat pane issue it will be an excellent snippet for Docs.
If we can crack the Chat pane issue it will be an excellent snippet for Docs.