Using a HTML Extension to change the look of popup dialogs
- 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.
undefined /* 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 */
}
undefined
This only works in Lectora Online.
Also see tips to formatting messages here
Discussion (2)
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:
undefined /* 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 */
}
undefined
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
Discussions have been disabled for this post