You can apply your own custom Cascading Style Sheet (CSS)
to the rendering of your
HCL Leap
application. To create a custom theme,
you must be familiar with the basic concepts of CSS.
Elements are assigned specific class names, prefaced by
lf in
the custom theme. The following code is an example of a
Leap custom
theme.
/* Form - centered with a drop shadow*/
.lfMn .lfAppFormArea .lfFormBox {
-moz-box-shadow: 5px 5px 12px #AEA4A4;
-webkit-box-shadow: 5px 5px 12px #AEA4A4;
box-shadow: 5px 5px 12px #AEA4A4;
margin-right: auto;
margin-left: auto;
}
/* Text (item titles) - medium blue */
.lfMn .lfFormLabel {
color: #094291 !important;
}
/* Section - title bar red background and white text */
.lfMn .lfFormFieldSectionTitle {
background: #cd111f !important;
color: white !important;
font-size: 13px !important;
font-weight: bold !important;
}
.lfMn .lfFormFieldSectionTitle .lfFormLabel {
color: white !important;
}
/* Tabs - dark-blue background with white text */
.lfMn .lfFormFieldTabFolder .lfFormFieldTab {
background:#1556a8;
border-top-color:#666;
border-right-color:#666;
border-left-color:#666;
}
.lfMn .lfFormFieldTabFolder .lfFormFieldTab * {
color: white;
}
/* Tabs (selected) - white background with black text */
.lfMn .lfFormFieldTabFolder .lfFormFieldTabChecked,
.lfMn.lotusui .lfFormFieldTabFolder .lfFormFieldTabCheckedHover,
.lfMn.lotusui .lfFormFieldTabFolder .lfFormFieldTabCheckedError {
background: white;
border-top-color:#ccc;
border-right-color:#ccc;
border-left-color:#ccc;
}
.lfMn .lfFormFieldTabFolder .lfFormFieldTabChecked * {
color: #222 !important;
}
/* Button (Submit) - light blue background */
.lfMn .lfFormBtn.lfFormActionSubmitBtn {
font-size: 12px;
background: #93bef3;
border: 1px solid #222;
font-weight: bold;
}
.lfMn .lfFormBtn.lfFormActionSubmitBtn * {
font-weight: bold;
}
/* Button (Page Navigation) - dark blue background with white text*/
.lfMn .lfPageNavigation .lfFormBtn {
background: #1556a8 !important;
border: 1px solid #222;
}
.lfMn .lfPageNavigation .lfFormBtn *,
.lfMn .lfPageNavigation .lfFormBtn *
{
color: white !important;
font-weight: bold;
}
Class Names
View Responses layout
Class
names for the View Responses layout are:
- .lfAppForm
- .lfAppFormArea
- .lfAppMainArea
- .lfAppOverviewArea
- .lfBanner
- .lfFormTitleBar
- .lfMn.lfAppArea
The following graphic shows where the class names for various parts of the
View
Responses section are located.
Single form launch layout
Class
names for the Single form launch layout are:
- .lfAppForm
- .lfAppFormArea
- .lfAppMainArea
- .lfBanner
- .lfFormBody
- .lfFormBox
- .lfFormFooter
- .lfFormTitleBar
- .lfMn.lfSingleFormArea
The following graphic shows where the class names for various parts of the Single form launch
layout are located.
Form items - general
General
class names are:
- .lfFormField
- .lfFormFieldError
- .lfFormFieldHint
- .lfFormFieldRequiredMarker
- .lfFormLabel
The following graphic shows where the class names for general form items are located.
In addition to the general
lfFormField class,
each form item has a unique class name:
- Attachment – lfFormFieldAttachment
- Button – lfFormFieldButton
- Check box – lfFormFieldCheckBox
- Choice Slider - lfFormFieldChoiceSlider
- Currency – lfFormFieldCurrency
- Date – lfFormFieldDate
- Drop-down – lfFormFieldDropDown
- Email – lfFormFieldEmail
- HTML fragment – lfFormFieldHTML
- Image – lfFormFieldImage
- Line – lfFormFieldHorizontalLine
- Media – lfFormFieldMedia
- Multi-line entry – lfFormFieldParagraph
- Number – lfFormFieldNumber
- Numeric Slider - lfFormFieldHorizontalSlider
- Page navigator – lfFormFieldPageNavigator
- Password – lfFormFieldPassword
- Text – lfFormFieldRichText
- Section – lfFormFieldSection
- Select many – lfFormFieldSelectMany
- Select one – lfFormFieldSelectOne
- Single-line entry – lfFormFieldSingleLine
- Survey – lfFormFieldSurvey
- Tabbed folder – lfFormFieldTabFolder
- Table – lfFormFieldTable
- Time – lfFormFieldTime
- Time stamp – lfFormFieldTimestamp
- Web link – lfFormFieldStaticWeblink
- Website – lfFormFieldWebSiteAddress
Required form items also have an extra
lfFormFieldRequired class.
The
lfFormFieldInvalid class is added to form
items that are invalid.
Section
Class
names for Section are:
- .lfFormFieldSection
- .lfFormFieldSectionBody
- .lfFormFieldSectionTitle
The following graphic shows where the class names used
in creating a Section are located.
Survey
Class names for
Survey are:
- .lfFormFieldSurvey
- .lfFormFieldSurveyQuestion
- .lfFormFieldSurveyQuestionText
- .lfFormFieldSurveyTable
- .lfFormFieldSurveyTitle
- .lfFormRequired
The following graphic shows where the class names used
in creating a Survey are located.
Tabbed Folder
Class names
for Tabbed Folder are:
- .lfFormFieldTab
- .lfFormFieldTabChecked
- .lfFormFieldTabContent
- .lfFormFieldTabFolder
The following graphic shows where the class names used
in creating a Tabbed Folder are located.
Buttons
Class names for
Buttons are:
- .lfFormBtn
- .lfFormActionBtn
- .lfFormActionCancelBtn
- .lfFormActionSubmitBtn
- .lfFormBackBtn
- .lfFormFieldButton
- .lfFormNextBtn
- .lfPageNavigation
The following graphic shows where the class names for
creating buttons on a form are located.
Dialogs
Class names for
Dialogs are:
- .lfDialog
- .lfDialogContent
- .lfDialogFooter
- .lfDialogTitle
The following graphic shows where the class names for
creating dialog windows are located.
Usage details
Your custom CSS is the last
style sheet that is applied in an application. However, you must ensure
that your CSS rules are more specific (higher weighted) than the ones
already specified in the base CSS rules.
- In some cases, you must append the !important declaration
to your rules to override the Leap base
rules. For example, to change the font color of all item titles use .lfMn
.lfFormLabel {color: #094291 !important}.
- In some cases you must add the universal, “*”,
selector to your rules. For example, to change the font color of all
buttons use .lfMn .lfFormBtn * {color: white}
To reference image files that are contained within the same application, use a relative URL of
../image/.... For example, to reference the image named
background.jpg contained within your application, use
url('../image/background.jpg'). For more information about referencing image
files within an application, see Managing the files associated with your application
Note: Pop-up menus and dialogs are direct
childs of the main body, even when they appear to be otherwise. These
child menus and dialogs must be styled to match the main body.
Best Practices
There are no technical limitations
to the CSS rules that can be applied to a form; however there are
the following best practices:
- All CSS rules must begin with the .lfMn class
selector. This is important for forms that might be shown within
the context of another web page, such as in the IBM®
WebSphere®
Portal
environment.
- Base your CSS rules around class names that are prefixed with “lf”.
For example: lfFormFieldSingleLine. These class
names that are likely to remain consistent between Leap releases.
- Your custom styles are not restricted, so you must be specific
with your selectors. Selectors that are too broad affect all aspects
of theLeap interface, including all dialogs and all elements
within the View Responses interface.
- Your CSS must target the browsers that are supported by Leap.
- If possible, avoid CSS rules that affect the size and positioning
of elements. You might want to specify some custom padding and margins,
but it is your responsibility to ensure that no erroneous cropping
or extra scroll-bars are displayed. We recommend that you limit your
theme to the following properties:
- background color
- background image – typically for background gradients
- color
- font
- font size
- border – typically none or one pixel width
Styling individual form items
Each item
on the form is assigned a unique class name. The syntax for this class
name is <
form id>-<
page id>-<
item
id>. For example, a class name of
F_Form1-P_Page1-F_EmailAddress is
applied to the item with an ID of
F_EmailAddress,
on the page with an ID of
P_Page1, on the form
with an ID of
F_Form1. You can use these unique
class names to style specific items in your application.
Note: It
is possible that two separate applications each have an item with
the same unique class name.
Using custom CSS class names
You can assign
a custom CSS class name to any form, page, item, or stage action button
in your application. You can then use the custom CSS class names in
your custom theme. Setting custom CSS class names is done in the Advanced tab
of the Edit Properties window. Specify the custom
class names, which are separated by spaces, in the Custom
CSS class names field. Custom class names can also be
added to, or removed from, items dynamically with the JavaScript™ API.
Testing your custom CSS changes
Use a CSS
development tool to test your custom CSS changes. Most web browsers
contain such a tool, which you can use to discover the wanted styling
class. You can even make CSS rule modifications online, so you immediately
see how a change affects the form visually. After the rules are determined,
copy them to your custom CSS file for uploading into your Leap application.
If you do not have access to
a CSS development tool, an alternative approach is to place the CSS
file on a web server. Reference the web location when you add the
CSS file to your Leap application. You can modify the CSS file on the
web server, then refresh the Leap application to pick up the changes. This approach
quickly tests style changes without requiring you to repeatedly upload
a new CSS file into your application, save the application, and then
redeploy.