body#site-index #page, body#course-view #page {
background: url(pix/bg_right.gif) repeat-y 100% 0; /* image is applied to the block config pages */
} $class = str_replace(' block-config', '', $class);
if (isset($_GET['blockaction']) && $_GET['blockaction'] == 'config') {
$class .= ' block-config';
} Andrew, every Moodle page has an ID and this ID is unique for this page. You can address the page via this ID. What page ID do those pages have you are working on. You can use the User script to help with making/debugging themes Helen mentioned above to easily find out the page ID and CLASSes.
Urs
PS. Helen, would you like to motivate your colleague Andy to write another script to diplay the attached CSS styles. His info box is so comfortable that I feel quite peeved when I have to change to the "DOM Inspector" to look up the CSS styles
Hi Andy,
giving Andrew the tip to use Andy's tool is like carrying coal to Newcastle
Thank you very much for your tool and especially the new version. I made some changes to make it meet my needs: For example writing "font1" and getting the whole font shorthand in FF or "box1" and getting all margins and all padding values. They are not programmed as clean as your script but they work for me. Are you interested in seeing it and perhaps doing some code optimizations?
FF's DOM Inspector is really great especially in conjunction with an extension called "Inspect element". You right click on any element on the page and the DOM Inspector shows it in its presentation of page's the document tree. You can then look up the CSS, rendered styles, the JS components and some other helpful information.
Did you install FF with the extended features on? If not the DOM inspector and one other feature are missing.
Good luck
Urs
PS. Into the block config CSS topic I'll investigate later.
PPS. Thank you very much for your nice words about the theme "orangewhite". My aim was to build a good base for Moodle theme work. It seams to work.
Hi Andy,
here it is. I nearly tripled the size And I am quite sure that Opera will not like it because I did not care for it with the naming. I did not really implement the CSS short hand definitions but I grouped together the most needed properties while working on CSS design. There is no docu, please look at the code.
But perhaps you will like the "set property:value" for the selected object. You can directly enter CSS changes in your input field and watch how the page changes. I was looking for that possibility for a long time now. With your script the realization became quite easy.
I hope you like it. And perhaps optimise it?
Urs
Andrew, wow - with your changes your tool becomes more and more wealthy. The popup offers great advantages. I have installed your latest bugfix and found one bug and have two notes concerning the interface:
the bug: in my patch I could write "set border-top:1px solid #f00". In your version "border-top:1px solid #f00" does not change the top border line. Do you know why?
the interface: Your help text gives a very wealthy introduction for new users. On the other hand it uses lots of screen place. I removed the help text because it's now hard for me to see what I am changing Are you one of those lucky wide screen users? I work on a 1024 pixel screen with my browser set to somehow 920 pixel width. What about moving the documentation into the documentation part of the greasemonkey js header? What do you think?
the popup: Your "empty" option is very helpful. Looking at an elements CSS I call the property groups with your popup. When the list becomes too long I start typing "empty" to clean it up. This change from mouse to keyboard could be avoided by adding "empty" at the end of the popup. Looking around while searching CSS infos would be much faster using the mouse only. What do you think?
Thank you very much again for your CSS inspector. It has become my favorite tool while working with web design and Moodle Themes.
Urs
I stumbled over the same barrier with the module config pages. The page ID of all pages is "#course-mod" and while I worked on the wiki config page it broke the quiz config page
Eloy or Martin, can you please have a look at those config pages. The best solution I can think of is to automatically insert a DIV with the ID of the module/block name around the inserted html config page similar to the body ID. This DIV would be inside the #content DIV. Is that possible in weblib.php? Parallel to this posting I opened Bug #4045.
I hope so much you will find an easy way because I am totally stuck in the moment.
Urs
Hi Eloy, Urs, Helen and Andy,
One workaround to set e.g. a background color to the module configuration pages is to set the background-color of the .editing class to the color of your choice (e.g. mycolor)
.editing {background-color: mycolor;}
Of course this will set the background of ALL editing pages to that color. Well, maybe it's OK if you choose a nondescript color and then set - one by one - the background colors of individual modules configuration pages.
See an example for the glossary module configuration attached.
Would that answer your query, Eloy?
Joseph
Martin added IDs to the content part of all edit pages of the modules and blocks. This way you can address the page content via for example:
No doubt he'll reply to your comment and to your PS. #chat .the-page-element-to-be-addressed {property:value}
Andy this way you can not directly solve your task to change the body properties. But perhaps you can find a strategy not to attach the background img to the body but to another element? Because I do not know what you want to achieve I only can guess here.
I hope this helps
Urs