Using a HTML Extension to change the look of popup dialogs
wheels
Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin Team
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
Comments
-
-
wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin TeamHey 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
Categories
- 35.8K All Categories
- 108 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 5 The Training Arcade®
- 5 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products