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

#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
73 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-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

  • This reply was modified 7 months, 3 weeks ago by Profile photo of Joe Wieloch Joe Wieloch.
Attachments: