IBM Forms V8.0 Custom Themes IBM Corporation

Transcription

1 IBM Forms V8.0 Custom Themes

2 Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample

3 Overview 3 To create custom theme you must be familiar with the basic concept of CSS You can apply your own CSS to the rendering of your FEB application Element are assigned specific class names, prefaced by lf in the custom theme

4 Custom CSS 4 All visual aspects of a Forms Experience Builder Application can be modified via CSS Each Application can only have one Custom CSS active. Create CSS File and Add it to Files

5 Custom CSS Adding custom cascading style sheet (CSS) themes personalizes applications with the branding of your organization. Select your custom style sheet: Add a file from your computer Use from your computer. Use a file on the internet insert the URL of file location URL location can either: Import the file from the internet or Maintain a link to the file only 5

6 Custom CSS 6 Once CSS file is added, it will automatically show up in Style tab.

7 Custom CSS 7 Form at design time will not change

8 Runtime 8

9 Class Names - Single Form Launch Layout Single form launch layout - The following graphic shows where the class names for various parts of the Single form launch layout are located. Class names for the Single form launch layout are:.lfappform.lfappformarea.lfappmainarea.lfbanner.lfformbody.lfformbox.lfformfooter.lfformtitlebar.lfmn.lfsingleformarea 9

10 Class Names View Responses View Responses layout -The following graphic shows where the class names for various parts of the View Responses section are located. Class names for the View Responses layout are:.lfappform.lfappformarea.lfappmainarea.lfappoverviewarea.lfbanner.lfformtitlebar.lfmn.lfapparea 10

11 Class Names - General Form Items Form items general. The following graphic shows where the class names for general form items are located. General class names are:.lfformfield.lfformfielderror.lfformfieldhint.lfformfieldrequiredmarker.lfformlabel 11

12 Class Names Unique Class Names In addition to the general lfformfield class, each form item has a unique class name. A few are: Attachment lfformfieldattachment Button lfformfieldbutton Check box lfformfieldcheckbox Currency lfformfieldcurrency Date lfformfielddate Drop-down lfformfielddropdown lfformfield HTML fragment lfformfieldhtml Image lfformfieldimage Media lfformfieldmedia Multi-line entry lfformfieldparagraph Number lfformfieldnumber Page navigator lfformfieldpagenavigator Password lfformfieldpassword Text lfformfieldrichtext Section lfformfieldsection 12

13 Class Names Survey Class Survey The following graphic shows where the class names used in creating a Survey are located. Class names for Survey are:.lfformfieldsurvey.lfformfieldsurveyquestion.lfformfieldsuveyquestiontext.lfformfieldsurveytable.lfformfieldsurveytitle.lfformrequired 13

14 Class Names Tabbed Folder Class Tabbed Folder - The following graphic shows where the class names used in creating a Tabbed Folder are located. Class names for Tabbed Folder are:.lfformfieldtab.lfformfieldtabchecked.lfformfieldtabcontent.lfformfieldtabfolder 14

15 Class Names Button Class Buttons - The following graphic shows where the class names for creating buttons on a form are located. Class names for Buttons are:.lfformbtn.lfformactionbtn.lfformactioncancelbtn.lfformactionsubmitbtn.lfformbackbtn.lfformfieldbutton.lfformnextbtn.lfpagenavigation 15

16 Class Names - Dialog Dialogs - The following graphic shows where the class names for creating dialog windows are located. Class names for Dialogs are:.lfdialog.lfdialogcontent.lfdialogfooter.lfdialogtitle 16

17 How to Use Custom CSS Your custom CSS will be the last style sheet applied in your running application; however, you must ensure that your CSS rules are more specific (higher weighted) than those already specified in the Experience Builder's base CSS rules. In some cases it may be necessary to append the!important declaration to your rules in order to override the Experience Builder's base rules. For example, to change the font color of all item titles use.lfmn.lfformlabel {color: #094291!important} In some cases it may be necessary to add the '*' (universal) selector to your rules. For example, to change the font color of all buttons use.lfmn.lfformbtn * {color: white} 17

18 Custom CSS - Samples Change the font of all item labels.lfmn.lfformlabel { color: #115D94; font-family: Georgia; font-size: 16px; } Change the hint of all items.lfmn.lfformfieldhint { color: purple; } 18

19 Customize Themes - Best Practices 19 All rules must begin with the.lfmn selector Base your CSS rules around class names that are prefixed with "lf Your custom styles are not restricted, so you must be specific with your selectors Your CSS must target the browsers supported by Forms Experience Builder If possible, avoid CSS rules that affect the size and positioning of elements You may wish to specify some custom padding and margins but it will be your responsibility to ensure that no erroneous cropping or extra scrollbars appear. We recommend you limit your theme to the following properties: background-color background-image (typically for background gradients) color Font & font-size (within reasonable limits) border (typically none or 1px width)

20 Styling Individual Form Item 20 Each item on the form is assigned a unique class name Syntax for this class name is < form id >-< page id >-< item id> Note: It is possible that two separate applications each have an item with the same unique class name.

21 Styling Groups Form Item 21 Used this when you want to apply the same styles to a group of items You can achieve this to assign similar IDs to the items you want to style and then use the *= attribute selector in your custom CSS

22 Test Custom CSS 22 Use a CSS development tool to test your custom CSS If you do not have access to a CSS development tool, an alternative approach is to place the CSS file on a web server 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.

23 Testing Tools Firebug Fiddler Web Debugging Proxy which logs all HTTPS traffic between your computer and the internet Support for any browser Chrome Developer Tool 23 Inspect HTML and modify style and layout in real time Use the most advanced JavaScript debugger available for any browser Accurately analyze network usage and performance Based on WebKit Web Inspector Allow developer deep access into the internal of the browser and their web application

24 CSS Sample /* 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; } 24

25 Where to find more information IBM Forms Website Customer FEB CSS Android ading_style_sheets_feb_8 IBM Forms Wiki ipad Portal IBM Forms Catalog Experience Builder Download gner/beta/ 25

26 26