Jump to content
  • 0

Custom Login



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?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 1

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">
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">
Link to comment
Share on other sites

  • 1

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:

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:

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...