Hi Melissa,
From memory I am sure this using the dreaded YUI CSS, if it does then there is a fine chance you can set width to auto.
If you use Firefox and the add on Firebug then you can inspect the pop-up and find out what the css class and id selectoers are which will enable you to style that element.
Development: Themes 2.0 and CSS FAQ are useful resources which will help you in your quest.
Mary
Hey Mary,
I did try to use Firebug and of course I can find it and "preview" what I want but unfortunately I know just enough to hurt myself and have no idea "where" or what file on my own server to update to make the change.
I tried all afternoon yesterday and some this morning in Moodle.org and in firebugs sites to figure out on my own first how to know what file(s) to edit but alas no luck! I am sure it is something simple I am missing but when I watch the tutorials for firebug it looks like they are viewing from their local files already so when they make the change it changes, where as I am viewing the 'live' site.
Any help to move forward is greatly appreciated!
Melissa
Hi Melissa,
Firebug is showing you what styles apply to that element and where they are. In this case
.moodle-dialogue-base .moodle-dialogue-wrap on line 5 of one of the yui css files (yui_co...ion.css) not the yui_combo.php.
But - do not change it there! If firefox shows you that the css rule comes from inside your theme, then you are ok to change it in the location it tells you. But if the css rule comes from a parent theme, or in this case from the yui css files which are part of the moodle core, then you should add the rule to your own theme css files rather than editing the parent/core style sheets. Adding them to your own css files will overwrite the rules coming from other parts of the system like the parent/core styling.
So in the example you've given adding
.moodle-dialogue-base .moodle-dialogue-wrap {background-color:#0000ff;}
to your moodle/theme/yourthemename/style/core.css file would give the section a blue background instead of the white one set by yui css. (Obviously you use the rules that you need, the background colour is just an example as it was one of the styles showing in your image )
HTH
Richard
EDIT: Just adding to Richards comments here to make it clearer where to find the CSS file in your Moodle intall
(Edited by Mary Evans - original submission Thursday, 30 June, 201102:26 PM)
(Edited by Mary Evans - original submission Thursday, 30 June 2011, 03:22 PM)
Hi, I'm having a little difficulty with this same question.
In Melissa's image above, if you look carefully, you can see that the width of the dialogue is not defined in the .css file, but instead in the element.style
I got around this by using:
.moodle-dialogue-base .moodle-dialogue {width:auto !important;}
but where and why is the width:400px being added as an inline style?
This has been a big help. We wanted to just make it a bit wider, so all I added to my theme's core.css was:
.moodle-dialogue-base .moodle-dialogue-wrap {width:500px;}
So thanks!
Hi Matt,
I have just tried using the same code on the splash theme and its not working.
I entered it in the custom css box via /site administration / appearance / theme / splash
Any ideas anyone?
Try enabeling Theme Designer Mode
Site administration > Appearance > Themes > Theme setting
Thanks Mary,
It worked! I always forget about designer mode for some reason.
