Change font of standard message window

Hi,

Yes, I face the same issue as well. I'm using Lectora Enterprise Edition. Can I use HTML code to change the fonts in the standard message windows? If yes, how can I do it? Thanks.

Yes, you can. Lectora's output seems to always use a class called "DLG_window" (without quotes) to style the font of the pop-up message window. If you add a cascading style sheet you can alter the style. Try the following:

1. open notepad and type:

/*Change font in standard pop-up window*/

.DLG_window{

font-family: "Arial";

font-size: 24px;

color:blue;

}

2. Save this as lectora.css (make sure you change the extension from .txt to all files)

3. In your lectora project add an HTML Extension. In its properties choose type: cascading style sheet and then file: browse for file and select the lectora.css file you just saved.

4. Your display messages should now be formated using the css you added.

A few things to note.

1. You can only alter font characteristics. You cannot alter the style of the pop-up box itself without adding a custom dialog using something like jQuery User Interface (http://jqueryui.com/dialog/).

2. You cannot alter individual pop-up messages. They will ALL have the new formatting. Again, if you want to totally customize your pop-ups look into jQuery User Interace.

If, for some reason, this is not working for you do a 'preview in browser' using Google Chrome. Hit F12 to open the console. Click the button in your lectora output to activate the pop up window and inspect the code to find out what the class of the modal window is. This is the class you need to alter (should be DLG_window).

I attached two examples; one with customization, one without.

Hope this helps.

Darrel

undefined

Thanks, Darrel! It's not so much that I'm wary of editing that file, per se, but, if I took that approach, wouldn't I have to remember to re-edit it each time I re-published the course? If so, then that would be a non-starter for me, I think. And thanks for the offer for the JQuery help...JQuery is beyond my current skill-set, but I don't want to impose on you like that and I think that, by the time I researched and figured it out, I could just as well have gone the more manual route of creating my own text box pop-up windows (which is probably what I'll end up doing). But, again, I really appreciate the info and offer!!

I really don't know why they made the default for a message box for the text to be center justified... *sigh*

Hi, Darrel - great post above! I have a similar need...I want to change the justification in the message box so that the text is left-justified, instead of centered. I'm guessing that the general process would be the same, but I don't know what the terms are that I should use to specify the justification parameter. Would you be able to tell me that?

I'm afraid you can't use CSS to tackle this one but there are more than one way to shine a penny. As I see it, you have two choices. You can either use jQuery with jQuery UI to create your own modal pop-ups or you can perform a simple hack to the published travantis-dialog.js file. Note that altering the published file will result in ALL your message boxes in the project being similarly justified.

If you want to use the jQuery option, which is a bit more complicated, let me know and I will try to help you through it.

If you are not weary of editing the published file (it's quite easy and you can always re-publish if necessary) and do not mind all the message boxes text in this project being justified the same way, here's what you do.

Publish your project like normal then use a text editor, like notepad, to open the trivantis-dialog.js found in the html folder.

Next, do an edit-find and search for: jsDlgMsgBox.prototype.onInitDialog = function()

A couple of lines below that you should see:

var textTable = "

I bypass this situation by showing a text box rather than using the standard message window. This way, I can make the message as custom as I want!

Yes - that's what I've always done, but, in this case, I'm short on time and experimenting with using some of the built-in functionality that Lectora has now (which it didn't used to have years ago, and why I got into the habit of creating all of my own feedback functionality, text/message boxes, etc.). In this case, I'm short on screen space, too, so I'd need to build them as pop-up message windows (which I've done before, too, but which, again, is more time-consuming).

But thanks for taking the time to reply! :)

Thanks, I'm glad I was able to help.

Thanks, Darrel - you are AWESOME! :D

Make that doubly awesome!

And why are we both working so late... (Or maybe it's earlier where you are? It's 9;34pm here...)

By the way, using the CSS selector above you can change many styling features of the message box. In the attached example I set the background color to red and the text color to white.

The .awt file is also included in the files for you.

Darrel

Great exchange, thanks @klaatu for helping!

It was bothering me so I had to figure it out.

[id^="mb_message_div_"] undefined

}

Add the above to your own CSS sheet as I explained in the original post (Aug 27). It works every time and you will not need to edit published files.

Hope this helps.

Darrel

undefined

It's correct. I assume you copy and pasted what I have in the post (which I would have done). The reason why it is not working is that for some reason the quotes get messed up when you copy and paste. Go to your CSS file and replace the quotes.

Let me know. I also attached a CSS sheet, but try to fix yours first.

Hmmmm....just tried your code, Darrel, and it didn't work...perhaps I didn't do it correctly? I *just* used the code you posted in the final comment (plus the commented out header)...did I also need to include some of the code from your original post about the font?

This is exactly what I had in my lectora.css file (I bolded it here for easier distinction...too bad this forum doesn't allow for font colors...):

undefined

Did I do something wrong, or did you, or does this just not work? I tried it both in preview and after publishing the course to HTML and running it "from scratch."

Thanks, again, for any help! :)