In this section: |
Using a three step process, you can create and customize a sign in page that is specific to your company or organization. The three steps include:
These steps are described in more detail on the Technical Support site. For specific information and guidance on creating a custom sign in page, see https://techsupport.informationbuilders.com
How to: |
The packaged custom sign in page, as shown in the following image, is made up of a background image that contains a dialog box for the sign in credentials.
The background image is centered in a div class, providing some space around the image. To design your page, see How to Design the Page.
Note: Not all images will require you to set the alpha transparency. Generally, the value will be between 50-75%.
The last step is to enable the new page that you have created. Use the following steps to complete this task.
How to: |
WebFOCUS provides you with the ability to change the text of all labels on the Sign In page. It also gives you the ability to include up to two custom links in the menu bar.
The following tables provide you with the element, XML tag name, and the default value for that element (which can be changed). The value you enter does not include the XML CDATA wrapper.
Note: If you do not see your changes in this section or the CSS section taking effect, you may need to clear the cache in your browser.
Main Page Elements |
XML Tag |
Default Value |
---|---|---|
Page Title |
<signin_custom_page_title> |
BI Portal Sign In |
Menu Item 1 Text |
<signin_menu_button1> |
menu1 |
Menu Item 1 Link |
<signin_menu_button1_link> |
http://www.informationbuilders.com/ |
Menu Item 2 Text |
<signin_menu_button2> |
menu2 |
Menu Item 2 Link |
<signin_menu_button2_link> |
http://www.informationbuilders.com/ |
Frame (Form Area) Title |
<signin_custom_frame_title> |
Sign In to the BI Portal |
User Name Label |
<signin_user_name_label> |
User Name: |
Password Label |
<signin_password_label> |
Password: |
Sign In Button Text |
<signin_button> |
Sign In |
Remember Me Option |
<remember_me_checkbox> |
Remember me on this computer |
Change Password Dialog Elements |
XML Tag |
Default Value |
---|---|---|
Title Text |
<signin_custom_change_password_frame_title> |
Change Password |
User Name Label |
<signin_change_password_user_name_label> |
User Name |
Old Password Label |
<signin_change_password_old_password_label> |
Old Password |
New Password Label |
<signin_change_password_new_password_label> |
New Password |
Confirm Password Label |
<signin_change_password_confirm_password_label> |
Confirm New Password |
Sign In Button Text |
<signin_change_password_sigin_button> |
Sign In |
Cancel Button Text |
<signin_change_password_cancel_button> |
Cancel |
Already Signed In Dialog Elements |
XML Tag |
Default Value |
---|---|---|
Title Text |
<signin_custom_user-already-signin_frame_title> |
User is already signed in |
Message Text |
<signin_custom_user-already-signin_message> |
An active session for this user already exists. Would you like to continue to sign in, and cancel the other session? |
How to: |
You have a lot of flexibility when you lay out the custom sign-in page. Styling and positioning are done exclusively in CSS.
Note:
http://server:port/ibi_apps/
http://server:port/ibi_apps/web_resource/signin.
The following table provides the elements you can edit, their CSS class name, and suggested attributes you may wish to change.
Main Page Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Page Background Color |
body, html |
Either Gradient or Solid:
|
Page Background Color (continued) |
body, html (continued) |
|
Sign In Background Image |
.signin-background-image |
|
.signin-box |
Note: Top and left can be used to relatively center the image and all the controls, if desired. | |
Menu Bar Position |
.signin-custom-menu-bar-position |
|
Menu Bar Styling |
.signin-custom-menu-bar |
|
Menu Bar Separator Styling |
.signin-menu-bar-separator |
|
Frame Title Position |
.signin-custom-frame-title |
|
Frame Title Styling |
.signin-custom-frame-label |
|
User Name Label Position |
.signin-custom-username-label-position |
|
User Name Label Styling |
.signin-custom-username-label |
|
User Name Input Control Position |
.signin-custom-username-editbox |
|
User Name Input Control Styling |
.signin-custom-username-editbox-input |
|
Password Label Position |
.signin-custom-password-label-position |
|
Password Label Styling |
.signin-custom-password-label |
|
Password Input Control Position |
.signin-custom-password-editbox |
|
Password Input Control Styling |
.signin-custom-password-editbox-input |
|
Remember Me Option Position |
.signin-custom-remember-me-position |
|
Remember Me Option Styling |
signin-custom-remember-me |
Set desired styling, such as font family, size, color, and so on. |
Sign In Button Label Styling |
.signin-button-label |
Set desired styling, such as font family, size, color, and so on. |
Sign In Button Position |
.signin-custom-button-signin-position |
|
Sign In Button Styling |
.signin-custom-button-signin |
|
.signin-button, .button |
Note: If you need to resize any objects, use the same class on which you set the position.
Error Message Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Error Message Position |
.signin-custom-error-position |
|
Error Message Styling |
.signin-custom-error-message |
|
Error Message Image |
.signin-custom-error-image |
|
The styling of the elements in the following two tables are inherited from the main page elements. This means the buttons, labels, and controls match to the main page.
Change Password Dialog Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Dialog Styling and Position |
.signin-custom-change-password-position |
|
Dialog Title Bar |
.signin-custom-change-password-title-position |
|
Dialog Title Label |
.signin-custom-change-password-title-label |
Set desired styling, such as font family, size, color, and so on. |
Dialog Title Icon |
.signin-custom-change-password-title-image |
Set the image. |
User Name Label Position |
.signin-custom-change-password_username-label-position |
|
User Name Input Control Position |
.signin-custom-change-password_username-editbox-position |
|
Old Password Label Position |
.signin-custom-change-password_old-password-label-position |
|
Old Password Input Control Position |
.signin-custom-change-password_old-password-editbox-position |
|
New Password Label Position |
.signin-custom-change-password_new-password-label-position |
|
New Password Input Control Position |
.signin-custom-change-password_new-password-editbox-position |
|
Confirm New Password Label Position |
.signin-custom-change-password_confirm-password-label-position |
|
Confirm New Password Input Control Position |
.signin-custom-change-password_confirm-password-editbox-position |
|
Confirm New Password Input Control Position |
.signin-custom-change-password_confirm-password-editbox-position |
|
Sign In Button Position |
.signin-custom-change-password-button-signin-position |
|
Cancel Button Position |
.signin-custom-change-password-button-cancel-position |
|
User Already Signed In Dialog Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Dialog Styling and Position |
.signin-custom-user-already-signin-position |
|
Dialog Title Label |
.signin-custom-user-already-signin-label-position |
|
Dialog Title Icon |
.signin-custom-user-already-signin-title-image |
|
Sign In Button Position |
.signin-custom-user-already-signin-button-signin-position |
|
Cancel Button Position |
.signin-custom-user-already-signin-button-cancel-position |
|
The following is a walkthrough, using the sample image, to implement a custom sign-in page. This assumes you have already performed the design and enable steps.
Note: The following table shows only the elements that changed in the example. Enter the value shown in the Example Value column into the XML file.
Main Page Elements |
XML Tag |
Example Value |
---|---|---|
Page Title |
<signin_custom_page_title> |
Information Builders Sign In |
Menu Item 1 Text |
<signin_menu_button1> |
Summit 2013 |
Menu Item 1 Link |
<signin_menu_button1_link> |
http://www.informationbuilders.com/summit |
Menu Item 2 Text |
<signin_menu_button2> |
IBI |
Frame (Form Area) Title |
<signin_custom_frame_title> |
Information Builders Sign In |
User Name Label |
<signin_user_name_label> |
Customer Name |
Password Label |
<signin_password_label> |
Password |
Remember Me Option |
<remember_me_checkbox> |
Remember me |
Note: The Remember me option is not enabled by default, but is set in the example files, in case you enable it.
Change Dialog Elements |
XML Tag |
Example Value |
---|---|---|
User Name Label |
<signin_change_password_user_name_label> |
Customer Name: |
Note:
http://server:port/ibi_apps/
http://server:port/ibi_apps/web_resource/signin.
The following tables contain the changes you need to make to style the Sign In page and two dialog boxes. Before each table is a screenshot of what you should see when you complete those changes.
Main Page Elements |
CSS Class or HTML Tag |
Values to be Added, Changed, or Deleted |
---|---|---|
Page Background Color |
body, html |
background: #000000; Delete all gradient lines. |
Sign In Background Image |
.signin-background-image |
background-image: url("images/customsignin.gif"); width: 960px; height: 638px; |
.signin-box |
width: 960px; height: 638px; | |
Menu Bar Position |
.signin-custom-menu-bar-position |
top: 220px; left: 475px; |
Menu Bar Styling |
.signin-custom-menu-bar |
color: #ffffff; font: 11px Tahoma, Verdana, Arial, Sans-Serif; |
Menu Bar Separator Styling |
.signin-menu-bar-separator |
color: #ffffff; This class is located at the bottom of the CSS file. |
Frame Title Position |
.signin-custom-frame-title |
top: 245px; left: 370px; |
Frame Title Styling |
.signin-custom-frame-label |
color: #ffffff; |
User Name Label Position |
.signin-custom-username-label-position |
text-align: left; top: 275px; left: 370px; |
User Name |
.signin-custom- |
color: #ffffff; |
User Name Input Control Position |
.signin-custom-username-editbox |
width: 221px; top: 295px; left: 370px; Note: To show all edges properly, the width must be at least 5px. |
User Name Input Control Styling |
.signin-custom-username-editbox-input |
width: 216px; |
Password Label Position |
.signin-custom-password-label-position |
text-align: left; top: 330px; left: 370px; |
Password Label Styling |
.signin-custom-password-label |
color: #ffffff; Delete font-size:12px; |
Password Input Control Position |
.signin-custom-password-editbox |
width: 221px; top: 350px; left: 370px; Note: Width is 5px more than that of the control to show all edges. |
Password Input Control Styling |
.signin-custom-password-editbox-input |
width: 216px; |
Remember Me Option Position |
.signin-custom-remember-me-position |
width: 216px; top: 388px; left: 490px; Note: Top is 2px less than the value in the artwork, due to HTML rendering. Width and left are matched to the input controls, with right text alignment to align right edge. |
Remember Me Option Styling |
signin-custom-remember-me |
color: #ffffff; font-size:12px; |
Sign In Button Position |
.signin-custom-button-signin-position |
color: #ffffff; |
Sign In Button Styling |
.signin-custom-button-signin |
color: #ffffff; border: 1px solid #223AA7; border-radius: 10px; |
Sign In Button Styling |
a.signin-custom-button-signin |
background-color: #223AA7; width: 96px; Delete background line. Delete padding-right line. |
a.signin-custom-button-signin span |
padding: 3px 0px 3px 0px; Delete line-height line. |
The following image and table provide information on resolving error messages.
Error Message Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Error Message Background Styling & Position |
.signin-custom-error-position |
width: 340px; height: 27px; top: 240px; left: 310px; background-color: #ff0000; border: 1px solid #ff0000; border-radius: 10px; behavior: url(web_resource/signin/PIE.htc); |
Error Message Text Styling & Position |
.signin-custom-error-message |
color: #ffffff; font-size: 11px; top: 5px; width: 340px; text-align: center; Delete left: 20; Note: Top is the difference between the top of the box and the top of the text in your image editing software. Width here must match the width of class above. |
Error Message Image |
.signin-custom-error-image |
display: none; Note: This was done to have no image. |
Note: If you need to resize any objects, use the same class on which you set the position.
Styling of elements in the Change Password dialog box, as well as the Already Signed in dialog box, are inherited from the main page elements. This means that the buttons, labels, and controls match to the main page.
The following image and table provide information on changing passwords.
Change Password Dialog Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Dialog Styling and Position |
.signin-custom-change-password-position |
top: 220px; left: 353px; background-color: #565352; color: #ffffff; border: 1px solid transparent; border-radius:25px; -webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); -moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); behavior: url(web_resource/signin/PIE.htc); Note: The visibility: hidden; line will need to be deleted, added again, or commented out during testing. |
Dialog Title Bar |
.signin-custom-change-password-title-position |
background-color: #223AA7; |
Dialog Title Icon |
.signin-custom-change-password-title-image |
visibility: hidden; |
Sign In Button Position |
.signin-custom-change-password-button-signin-position |
height: 25px; top: 190px; left: 100px; |
Cancel Button Position |
.signin-custom-change-password-button-cancel-position |
height: 25px; top: 190px; left: 200px; |
The following image and table provide information on working with the Already Signed In dialog box.
Already Signed In Dialog Elements |
CSS Class or HTML Tag |
Suggested Changes |
---|---|---|
Dialog Styling and Position |
.signin-custom-user-already-signin-position |
height: 130px; top: 305px; left: 332px; background-color: #565352; border: 1px solid transparent; border-radius:25px; -webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); -moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); behavior: url(web_resource/signin/PIE.htc); Note: The visibility: hidden; line will need to be deleted, added again, or commented out during testing. |
Dialog Title Label |
.signin-custom-user-already-signin-label-position |
width: 270px; color: #ffffff; |
Dialog Title Icon |
.signin-custom-user-already-signin-title-image |
visibility: hidden; |
Sign In Button Position |
.signin-custom-user-already-signin-button-signin-position |
height: 25px; top: 100px; left:100px; |
Cancel Button Position |
.signin-custom-user-already-signin-button-cancel-position |
height: 25px; top: 100px; left: 200px; |
WebFOCUS |