Custom Login

[DAG4Debt]

Is there any way to customize the login screen? In particular, I don't want a stand-alone screen, but would much rather include the username and password fields at the top right corner of the home page. The problem is that the Capsio login screen automatically defaults where the username and password fields are one above the other and the login button is below that. This takes up too much space and can't be accomodated. I would like to put these fields and the button all on the same line so the login is as easy as possible and takes up minimum space on the homescreen. How can I make these modifications?

[HongTaiLang]

You can customize the login screen.

1. select "Custom" from the setup options in Authentication Wizard and check "Enable Advanced Options";

2. go to Configure Fields, insert Header/Footer, and add the following code in the Footer to hide the default Login button. Need to change "xip_ButtonID" to the appropriate button id.

<script type="text/javascript">
document.getElementById('xip_ButtonID').style.visibility='hidden';
</script>

3. Highlight username field, click Advanced tab, check "Continue Next element on same line";

4. insert a HTML Block under password, highlight password field, click Advanced tab, check "Continue Next element on same line";

5. add code to create your own Login button, for example:

<input id="xip_login_button" class="cbLoginButton" type="submit" onmouseout="cbButtonHover(this,'cbLoginButton');" onmouseover="cbButtonHover(this,'cbLoginButton_hover');" value="Login" name="xip_login_button">

[deeptimangla]

Yes, you can customize the login screen. To achieve the same, please follow the steps:

1. Use Custom Authentication option in the authentication wizard as it lets you select which fields will be used for Authentication and how they are displayed. It also gives you access to other customization options.

2. Add an HTML block just after the username and password fields and insert the following code:

<input type="submit" value="Login" alt="Login"/>

3. Insert Header and footer to the configure screen code and add the following code:

In Header :

<div style="float:right;">

In Footer:

</div>

4. Modify the “style†of the DataPage, enable Show advanced options. On the Source tab, select “All†:

a. Hide the default button by searching for .cbLoginButton class and adding the following code:

Display:none;

b. Change the style of the HTML block (.cbHTMLBlockContainer) in which your new button is contained. You can edit/remove border properties and padding accordingly.

Eg:  .cbHTMLBlockContainer
		{/*HTML Block Container Cell*/
		text-align: left;
		vertical-align: top;
		padding: 2px;
		}

c. And you can also edit in .cbFormTable class to remove borders and other properties accordingly.

Eg:  .cbFormTable
		{/*Form Table Attributes*/
		border-collapse: collapse;
		width: 100%;
		margin: 10px;
	}

Hope this helps!

[Kurumi]

Hi - Just wanted to share this solution for showing password in Login page: