Creating and Customizing a Sign-in Page

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

Designing and Enabling the New Custom Sign-in Page

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.

Top of page

Procedure: How to Design the Page

Decide on whether you will use a background image, a color (solid or gradient), or both.
Create a mockup in image editing software that can handle layered PNG files or PSD files, such as Adobe® Fireworks® or Adobe® Photoshop®, respectively. The Open Source Software GIMP can be used to edit the .psd file.
1. Open the provided sample multi-layer image.
2. Replace the background image in the Custom Background layer with your image or colors.
3. Set the alpha transparency to the desired percentage.
  Note: Not all images will require you to set the alpha transparency. Generally, the value will be between 50-75%.
4. If necessary, resize the canvas to fit your image.
5. Customize the form, as described in How to Customize the Form.
6. Export your image as a .gif or .png to preserve transparency.
7. Place your image in \ibi\WebFOCUS81\config\web_resource\signin\images.

Top of page

Procedure: How to Customize the Form

For the form background:
1. Change the background color of the Form Area Background object in the Form Layer to suit your color scheme.
2. Position the form background as desired. Depending on the text you edit in the next step, you may need to resize this box.
For the form elements:
1. Determine whether or not the Remember Me feature is used in your installation. If so, turn on the Remember element in the Form Layer.
2. Change the text, as needed in the Form Layer.
3. Style and position all form elements in the Form Layer.
For the error message:
1. Turn on the error message sublayer.
2. Style and position the error message background and text.
Turn off the Form Layer, as these items will be generated at run time.

Top of page

Procedure: How to Enable the New Custom Sign-in Page

The last step is to enable the new page that you have created. Use the following steps to complete this task.

Sign in to WebFOCUS with an administrative account.
Launch the WebFOCUS Administration Console.
Click Configuration, and then click Application Settings.
Click Security.
Set IBI_Customized_Signin_Page to true, as shown in the following image.
Click Save.
Sign out of WebFOCUS.

Setting the Text Labels

How to:

Set the Text and Links

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.

Top of page

Procedure: How to Set the Text and Links

Browse to \ibi\WebFOCUS81\config\web_resource\signing\.
In a text editor, such as Notepad ++, edit the customsignin.xml file.

Change the text in the desired elements.

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?

Editing the CSS File to Position and Style Page Elements

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.

Top of page

Procedure: How to Edit the CSS

Browse to \ibi\WebFOCUS81\config\web_resource\signin\
In a text editor, such as Notepad ++, edit the customsignin.css file.

Edit the desired elements.

Note:

To test at any point, save and go to
```
http://server:port/ibi_apps/
```
Ensure that your browser zoom is at 100%.
Positioning and styling information for all elements can be obtained by selecting the corresponding element inside of your imaging editing software. You may need to slightly adjust the positioning.
Image URLs are relative to the directory containing the CSS file (\ibi\WebFOCUS81\config\web_resource\signin\). The URL to that directory is
```
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: Gradient Replace all instances of #064e96 with your start color. Replace all instances of # ff7200 with your end color. Solid Delete the bottom eight lines of code in the body, html class, which read: background: -webkit-gradient(linear, 0 0, 0 100%, from(#064e96) to(#ff7200)); /old webkit/ background: -webkit-linear-gradient(#064e96, #ff7200); /new webkit/background: -moz-linear-gradient(#064e96, #ff7200); /gecko/
Page Background Color (continued)	body, html (continued)	Solid (continued) background: -ms-linear-gradient(#064e96, #ff7200); /IE10/background: -o-linear-gradient(#064e96, #ff7200); /opera 11.10+/ background: linear-gradient(#064e96, #ff7200); /future CSS3 browsers/ -pie-background: linear-gradient(#064e96, #ff7200);behavior: url(web_resource/signin/PIE.htc); Change the color in the remaining background attribute to your desired color.
Sign In Background Image	.signin-background-image	Change the image Set width to the image width Set height to the image height
Sign In Background Image	.signin-box	Set width to the image width Set height to the image height 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	Set top Set left
Menu Bar Styling	.signin-custom-menu-bar	Set desired styling, such as font family, size, color, and so on.
Menu Bar Separator Styling	.signin-menu-bar-separator	Set desired styling, such as font family, size, color, and so on. To hide the separator, set color to transparent.
Frame Title Position	.signin-custom-frame-title	Set top Set left
Frame Title Styling	.signin-custom-frame-label	Set desired styling, such as font family, size, color, and so on.
User Name Label Position	.signin-custom-username-label-position	Set top Set left
User Name Label Styling	.signin-custom-username-label	Set desired styling, such as font family, size, color, and so on.
User Name Input Control Position	.signin-custom-username-editbox	Set top Set left
User Name Input Control Styling	.signin-custom-username-editbox-input	This controls styling, you should apply background colors here.
Password Label Position	.signin-custom-password-label-position	Set top Set left
Password Label Styling	.signin-custom-password-label	Set desired styling, such as font family, size, color, and so on.
Password Input Control Position	.signin-custom-password-editbox	Set top Set left
Password Input Control Styling	.signin-custom-password-editbox-input	This controls styling, you should apply background colors here.
Remember Me Option Position	.signin-custom-remember-me-position	Set top Set left
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	Set top Set left
Sign In Button Styling	.signin-custom-button-signin	Set border radius, size, and color Set font
Sign In Button Styling	.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	Set top Set left
Error Message Styling	.signin-custom-error-message	Set desired styling, such as border radius, font family, size, color, and so on.
Error Message Image	.signin-custom-error-image	Set the image Uncomment the :visibility: hidden; line to hide the image, but keep the space it takes. Use display: none; to remove the image, including the space it occupies.

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	Set top Set left Set desired styling, such as font family, size, color, and so on.
Dialog Title Bar	.signin-custom-change-password-title-position	Set background color
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	Set top Set left
User Name Input Control Position	.signin-custom-change-password_username-editbox-position	Set top Set left
Old Password Label Position	.signin-custom-change-password_old-password-label-position	Set top Set left
Old Password Input Control Position	.signin-custom-change-password_old-password-editbox-position	Set top Set left
New Password Label Position	.signin-custom-change-password_new-password-label-position	Set top Set left
New Password Input Control Position	.signin-custom-change-password_new-password-editbox-position	Set top Set left
Confirm New Password Label Position	.signin-custom-change-password_confirm-password-label-position	Set top Set left
Confirm New Password Input Control Position	.signin-custom-change-password_confirm-password-editbox-position	Set top Set left
Confirm New Password Input Control Position	.signin-custom-change-password_confirm-password-editbox-position	Set top Set left
Sign In Button Position	.signin-custom-change-password-button-signin-position	Set top Set left
Cancel Button Position	.signin-custom-change-password-button-cancel-position	Set top Set left

User Already Signed In Dialog Elements	CSS Class or HTML Tag	Suggested Changes
Dialog Styling and Position	.signin-custom-user-already-signin-position	Set top Set left Set desired styling, such as font family, size, color, and so on.
Dialog Title Label	.signin-custom-user-already-signin-label-position	Set desired styling, such as font family, size, color, and so on. You may want to adjust left if you do not use an icon.
Dialog Title Icon	.signin-custom-user-already-signin-title-image	Set the image Delete the visibility: hidden; line to show the image.
Sign In Button Position	.signin-custom-user-already-signin-button-signin-position	Set top Set left
Cancel Button Position	.signin-custom-user-already-signin-button-cancel-position	Set top Set left

Top of page

Procedure: How to Set the Text Labels

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.

Browse to \ibi\WebFOCUS81\config\web_resource\signin\.
In a text editor, such as Notepad++, edit the customsignin.xml file.

Change the text in the following elements.

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:

Launch WebFOCUS in a browser. The following image appears:

Top of page

Procedure: How to Edit the CSS File

Browse to \ibi\WebFOCUS81\config\web_resource\signin\.
In a text editor, such as Notepad ++, edit the customsignin.css file.

Edit desired elements.

Note:

To test at any point, save and go to
```
http://server:port/ibi_apps/
```
Ensure that your browser zoom is at 100%.
Positioning and styling information for all elements can be obtained by selecting the corresponding element inside of your imaging editing software. You may need to slightly adjust the positioning.
Image URLs are relative to the directory containing the CSS file (\ibi\WebFOCUS80\config\web_resource\signin\). The URL to that directory is
```
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;
Sign In Background Image	.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.
Sign In Button Styling	a.signin-custom-button-signin span	padding: 3px 0px 3px 0px; Delete line-height line.

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;

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;