Applying Custom Styles with HTMLeditor

Applying Custom Styles with HTMLeditor

by Matt Cromwell -
Number of replies: 5
I was seeking a way to allow my faculty to choose styles within the HTML editor for common things that happen thoughout the courses. The most common for us is giving feedback to correct or incorrect responses within the Lesson module. What I wanted was to provide a small graphic for a correct answer and a different one for an incorrect answer without having the faculty have to go to "insert image-->browse...etc". Meaning they could just apply a style from the drop-down window instead.

By:
  1. making a slight addition to the HTMLarea file,
  2. adding a new language string, and
  3. a using the :before pseudo element in my css sheet
I got what I was looking for. Here's a step-by-step.

3 Steps:

STEP 1: add a few lines to your HTMLarea file : "\lib\editor\htmlarea.php"

around line 188 (from the latest 1.5.3+ build) you see:

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"

Add a new echo line with a new string name:
(e.g. "<?php echo $strcorrect ?>": "span class='correct'", )
You can use whatever html language you like for the second half of the call, I chose 'span' because it's more flexible with it's line spacing than 'div'. 'ID' could also be substituted no problem, it's up to you. Naturally, you'll just need to make sure that you're naming it correctly in your css file.
(Also make sure to add a comma at the end of the previous line)

Then around line 29 you'll see:
$strheading = get_string("heading", "editor");
$strnormal = get_string("normal", "editor");
$straddress = get_string("address", "editor");
$strpreformatted = get_string("preformatted", "editor");

This tells the file where to identify the language string.
Create a new language string call that corresponds with your echo
    $strcorrect = get_string("correct", "editor");

STEP 2: In your language file add a new string
e.g. \lang\en\editor.php
$string['correct'] = 'Correct';

STEP 3: In your css file make the style you wish to see.
It can be anything. I wanted my faculty to be able to have a unified look for the lesson module for correct and incorrect answers so I created a small gif and used the :before pseudo-element to get this result: (see attached).

here is my css code
span.right {
font: italic bold 18pt "Tahoma", "sans-serif";
color: lime;
}
span.right:before {
content: url(www.rootfolder///checkmark.gif);
display: inline;
}
span.wrong {
font: italic bold 18pt "Tahoma", "sans-serif";
color: maroon;
}
span.wrong:before {
content: url(www.rootfolder///wrong.gif);
display: inline;
}

I put the graphics in the root moodle pix folder and put the whole line there so that the css would work no matter which class the lesson is in.

I'm thrilled about this and I'm sure I'll find much more styles to add in the near future. It helps keep a good style throughout the site, and keeps my faculty from having to spend precious hours on things that they shouldn't have to know how to do (and spend more time with students instead).

~mc~
Attachment right-wong-css-screen.jpg
Average of ratings: -
In reply to Matt Cromwell

Re: Applying Custom Styles with HTMLeditor

by Matt Cromwell -
I just noticed that in older versions of HTMLarea, this hack breaks-down in IE but fine in FF.

After updating to the latest (1.5.3+) HTMLarea files, this hack works in FF perfectly, but does not actually execute in IE. Fortunately, it doesn't break-down the editor though.

Further, the :before pseudo class doesn't show up in IE at all, so I changed the CSS to the following:
div.right {
    font: italic bold 18pt "Tahoma", "sans-serif";
    color: #A2EA0A;
    background: url(root/pix/checkmark.gif) no-repeat;
    display: block;
    min-height: 40px;
    padding-left: 40px;
    line-height: 1.55em;
}
div.wrong {
    font: italic bold 18pt "Tahoma", "sans-serif";
    color: maroon;
    background: url(root/pix/wrong.gif) no-repeat;
    display: block;
    min-height: 40px;
    padding-left: 40px;
    line-height: 1.55em;
}

Just one more reason for me to encourage my faculty to switch to FF wink

~MC~
In reply to Matt Cromwell

Re: Applying Custom Styles with HTMLeditor

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Matt,

This is quite interesting. Unfortunately the HTML editor is not accessible to the Answer and Response fields in current versions of Lesson (1.5.3+ nor 1.6 beta).sad You can check the Use editor box, but the HTML editor window is not displayed. You have to resort to coding the HTML tags by hand, e.g. <span class=right>That is a correct answer.</span> but it rather defeats the purpose of the first part of your workaround, the drop-down list of styles available to HMTL editor.

See this thread and this bug report.

Hopefully Mark is working on this and will make the HTML editor available to 1.6 any time soon.

Joseph

PS It looks like the pseudo-classses before and after will be implemented in MSIE 7.wink

In reply to Joseph Rézeau

Re: Applying Custom Styles with HTMLeditor

by Matt Cromwell -
I'm not exactly sure what you're saying.

True, you have to click the use editor box to get the HTML screen to be available in the editor window. After I clicked the box and refreshed the page using the "Redisplay Page" button at the bottom, the HTML editor is there.

I wouldn't have posted this hack if it didn't work (though, as I mentioned it doesn't technically work in IE at the moment).

In the screenshot below you can see that the use editor box is checked and the editor is visible. You can also see that the scroll-down menu has the word "correct" in it and the information box at the bottom of the editor shows that the highlighted text is set to "div=right".

I'm not sure why you can't see the results of that div class in the editor itself, but once the page is saved, the style shows clearly (as you can see in the screenshot from my first post).

So it does work in FF perfectly well as far as results are concerned. It would be nice to see the changes in the HTMLeditor before saving the page, but I have no idea why it's working that way.

Has anyone else tried my hack successfully? (or unsucessfully?)
Attachment HTMLEditorinLesson.jpg
In reply to Matt Cromwell

Re: Applying Custom Styles with HTMLeditor

by Matt Cromwell -
Sorry, just a "bump" to see if anyone else has tried my hack. If you read my posts above you should see the results and how to do it exactly.

Matt C.
In reply to Matt Cromwell

Re: Applying Custom Styles with HTMLeditor

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Matt,

>After I clicked the box and refreshed the page using the "Redisplay Page" button at the bottom, the HTML editor is there.

Which version of Moodle are you using?

I maintain that the HTML editor does not show up in version 1.5.3 stable nor in 1.6 beta 5. which is a pity! Other than that your workaround is fine.

Joseph