Explore the community Forums Lectora Lectora Questions & Answers Change font of standard message window

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #271208 Score: 0
    Profile photo of dgnewbie
    dgnewbie
    Member
    @dgnewbie

    Hi there,is there any way tocahnge the font of the standard message windows? I have a bvutton that launches a standard message window – at the momnet the window displays Times New Roman font – my title has Arialfont throughout. I tried changing the default font for the title but it didn’t have anyeffect on the message windows.ThanksDeb

    #299118 Score: 0
    Profile photo of tila72000
    tila72000
    Member
    beginner
    intermediate
    friend finder
    contributor
    wise owl
    curious george
    1 pt
    @tila72000

    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.

    #299132 Score: 2
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

     

    This post has received 2 votes up.
    #302163 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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?

    #302167 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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 = “<table width=100% height=100% border=0><tr valign=’middle’>”;
    textTable += “<td align=’center’ width=*>”;

    Change the ‘center’ to ‘left’ and save. Viola, all your message box text are now left justified. I do not necessarily condone modifying the published files because you can really make a mess of things but this is fairly straight forward and may save you some time.

    Hope this helps.

    Darrel

    • This reply was modified 3 years, 11 months ago by Profile photo of Darrel Somoza Darrel Somoza.
    • This reply was modified 3 years, 11 months ago by Profile photo of Darrel Somoza Darrel Somoza.
    #302170 Score: 0
    Profile photo of Annette Williams
    Annette Williams
    Member
    beginner
    intermediate
    advanced
    contributor
    LUC16
    LUC16 Attendee
    wise owl
    curious george
    entry
    LUC17 Presenter
    16 pts
    @amwdmw

    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!

    #302171 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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! 🙂

    #302172 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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*

    #302174 Score: 2
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

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

    [id^=”mb_message_div_”] > table > tbody >tr >td{
    text-align:left;
    }

    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

     

    This post has received 2 votes up.
    #302175 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    Thanks, Darrel – you are AWESOME! 😀

    #302176 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

    This post has received 1 vote up.
    #302178 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

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

    #302179 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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…)

    #302190 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @jvalley4735

    Great exchange, thanks @klaatu for helping!

    #302199 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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…):

     

    /*Change justification in standard pop-up window*/
    [id^=”mb_message_div_”] > table > tbody >tr >td{
    text-align:left;
    }

     

    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! 🙂

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.