Using a HTML Extension to change the look of popup dialogs

wheels

We are working on making this formatting part of Lectora, but meanwhile you can do some CSS to customize your course dialogs.

If you want to change the look of the dialogs, you can change the CSS styles by using an HTML Extension.

See attached library object with such an HTML Extension.

Please download DialogStyle.wwo and insert it into your title at the title level.

See the attached screenshot to see how the popup dialogs would look.

The changes are:

• Title bar is removed.
• Added black borders (10px) at the top and bottom.
• Added space​ (20px) above the first line of text and below the button.
• Increased the button size to 100 x 30.
• Added space between the last line of text and the button.
• Changed the button text to bold.

If you look at the contents of HTML Ext., there are background colors for the dialog and for the button. But they are commented out and just there if you want to use it. You can tweak any of the values in this HTML Ext. These values will affect all dialogs in all responsive views (Desktop, tablets, phones).

Here is the content of that HTML Extension:

 

<style>
/*----- Title bar -----*/
.TrivDlgTitleText
{
    display: none;      /* remove the title bar */
}

/*----- Inside the dialog -----*/
.TrivDlgText
{
    padding: 20px;      /* add spacing above the first line and below the button */
}

/*----- Entire dialog -----*/
.DLG_Triv_content
{
    border-top: 10px solid black !important;          /* black bar at top    */
    border-bottom: 10px solid black !important;    /* black bar at bottom */
    /*background-color: lightblue;                         entire dialog background color */
}

/*----- OK button -----*/
.TrivDlgBtn
{
    height: 30px !important;                       /* button height */
    width: 100px !important;                      /* button width */
    margin-top: 20px !important;                /* spacing above the button */
    font-weight: bold !important;
    /* background-color: lightsteelblue !important;    button color */
}
</style>

 

This only works in Lectora Online.

Also see tips to formatting messages here

tmiller8924

Hi Joe, I realize this post is from last year, but I was wondering if I save the .wwo file at the same level as the .awt project file? Or would it be saved in the HTML folder? Also, what would the HTML look like if I want to call the .TrivDlgTitleText style?

Thanks!
Tammy

wheels

Hey Tammy,

Well, that post is specifically for Lectora Online, and the wwo is a library object which is similar to a awo file for Lectora Desktop. Unfortunately the wwo and the styling specified above do not work with Lectora Desktop. But it was pretty easy (for me) to come up with something similar for Lectora Desktop...

Click on the Title level object when you are in Lectora (or where-ever you want these styles to apply) then go to the INSERT ribbon and click HTML Extension. Set the Type to Meta Tags and put the following style snippet in there:

<style>
/*----- Title bar -----*/
.DLG_titleBarLine
{
    display: none;      /* remove the title bar */
}

/*----- Inside the dialog -----*/
.DLG_content
{
    padding-top: 20px;      /* add spacing above the first line and below the button */
    padding-bottom: 20px;
}

/*----- Entire dialog -----*/
.DLG_window
{
    border-top: 10px solid black !important;          /* black bar at top    */
    border-bottom: 10px solid black !important;    /* black bar at bottom */
    /*background-color: lightblue;                         entire dialog background color */
}

/*----- buttons -----*/
.DLG_window input[type*=button]
{
    height: 30px !important;                       /* button height */
    width: 100px !important;                      /* button width */
    margin-top: 20px !important;                /* spacing above the button */
    font-weight: bold !important;
    border-radius: 10px !important;                   /* round corners */
    /* background-color: lightsteelblue !important;    button color */
}
</style>

I've also attached an image of how it looks in Lectora.

Now create a button with a display message action, go into run mode, and click the button to see how the styles look.

Hope this helps!
- Joe