Blocks of background color needed - any ideas?

Blocks of background color needed - any ideas?

by seaghan moriarty -
Number of replies: 4
I have a few teachers entering text/images etc. in a course. They think that the look of Moodle is pretty boring - and they are correct big grin

I would like to enable them to write 2 paragraphs and then put a nice background colour and border behind the text. In this way, they could write 2 screen of text and have 3 or 4 blocks of color.

I have 2 parts to my question:

1. The WYSIWYG Editor:
Can I add a style to any of the stylesheets so that this CSS style might be selectable in a dropdown, like the H1 H2 H3 etc.?

2. I tried to modify the H1 H2 directly using CSS and it is a real mess trying to find what does what to whom (even with Firebug & Greasemonkey to examine CSS sad) I would like it if someone could give me step-by-step directions to how to achieve this.

I'm not sure which of the 2 approaches above might work - or a combination. Yes, I have CSS experience, but the complexity of Moodle styles is a very very big challenge unfortunately.

Can anyone help me - or suggest a direction to try??
Average of ratings: -
In reply to seaghan moriarty

Re: Blocks of background color needed - any ideas?

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Hello,
The right way to go for entering nicely-formatted (CSS) documents on a Moodle course is not to use the HTML editor which, as you have found out, is rather limited. Way to go is to use a proper HTML software (there are loads of them around, some free, some commercial) and to author your document locally on your computer, then to upload it to the Files directory of your course. According to your needs, you will incorporate your CSS styles in each document or as an external file (is you plan to use the same CSS styles for more than one document).
I do it all the time, and hardly ever use Moodle's HTML editor for editing the "compose as a Web page" resource type.
Moodle's HTML editor should be reserved for forum discussions, authoring questions, etc and other places where a minimal formatting is required. People are expecting too much of this otherwise useful tool!
Joseph
Average of ratings: -
In reply to seaghan moriarty

Re: Blocks of background color needed - any ideas?

by Andrew King -

Hi Seaghan.

I've been looking into adding extra functionality to the text editor, but my experience in PHP etc... is limited unfortunately! I'd be interested in finding out how to get additional styles in the wysiwyg dropdown if you find out though.

Hopefully I have understood you correctly, you are trying to enable your teachers to add a background colour and border to paragraphs that they are writing.

Do you need to use CSS for this?

This solution uses a table with 2 rows.
You can format the table cells by using the cell properties button in the expanded editor.

Using this method you don't need to play with any CSS, plus your teachers can add any colours that they like, and all from within Moodle.

Hope that helps.

Average of ratings: -
In reply to Andrew King

Re: Blocks of background color needed - any ideas?

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Hi Andrew and Sheaghan.
Here's one method for adding styles to the HTML editor drop-down list of paragraph styles. The style you want to add must already exist in one of your course's current theme CSS files.

Example usign Moodle 1.7 and the formal_white theme.

Let's suppose you have declared this style in one of the formal_white CSS files:

.noteImportante {
 color:#FF0000; /*red*/
}

In file \moodle\lib\editor\htmlarea\htmlarea.php about line 200 you add the line marked red in the block below (do not forget the comma at the end of the previous line!)

 this.formatblock = {
 "":"",
 "<?php echo $strheading ?> 1": "h1",
 "<?php echo $strheading ?> 2": "h2",
 "<?php echo $strheading ?> 3": "h3",
 "<?php echo $strheading ?> 4": "h4",
 "<?php echo $strheading ?> 5": "h5",
 "<?php echo $strheading ?> 6": "h6",
 "<?php echo $strnormal ?>": "p",
 "<?php echo $straddress ?>": "address",
 "<?php echo $strpreformatted ?>": "pre",
 "NoteImportante": "div class=noteimportante"
 };

Save file htmlarea.php. Back in your Moodle course, empty the browser cache and refresh page. Go somewhere in your course where the HTML editor is available (forum, etc.) Type some text. Click the paragraph styles dropdown list where you can see the new NoteImportante style displayed there. Click anywher in your paragraph and apply this style. Nothing happens because the HTML editor cannot display external styles (it cannot access the course's theme stylesheets). But if you click the Toggle HTML Source button you can see that the <div tag has been added:

<div class="noteimportante">Ceci est un <span style="font-style: italic;">paragraphe</span> en style NoteImportante</div>

Save your text (or post it to a forum if it's a post) and ... now you can see that your style has been applied. It works, but unfortunately is not WISIWYG in the HTML editor...

Joseph

Note.- this is a translation from a French method I posted to the French forum; sorry no time to rework the screenshots in English, I hope this will do.wink

Attachment image00.jpg
Average of ratings: -
In reply to Joseph Rézeau

Re: Blocks of background color needed - any ideas?

by seaghan moriarty -
Joseph and Andrew,

thank you big grin so much for your help!!

1) I did not know the table properties were only available in enlarged mode (thank you!)

2) I tried the CSS and htmlarea.php hack. I think my cache has not emptied, so I expect to see the extra list options soon smile

3) I'm also looking at eXe [1] as a way to enable teachers to produce 'nice looking' content, instead of plain text.

more later - thanks!

[1] http://www.exelearning.org/
Average of ratings: -