Explore the community Forums Lectora Online Lectora Online Questions & Answers Using a HTML Extension to change the look of popup dialogs

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #404507 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    51 pts
    @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

    • This topic was modified 1 year, 1 month ago by Profile photo of Joe Wieloch Joe Wieloch.
    • This topic was modified 1 year, 1 month ago by Profile photo of Joe Wieloch Joe Wieloch.
    #427268 Score: 0
    Profile photo of Tammy Miller
    Tammy Miller
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    advanced
    @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

    #427272 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    51 pts
    @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: 20px;      /* add spacing above the first line and below the button */
    }
    
    /*----- 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

    Attachments:
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.