Sample CSS file for customizing the Identity Service Center login page

To apply customized style to Identity Service Center, you must create a cascading stylesheet (CSS) file. You can download and modify the Sample.css file. You can then upload the file to view the effects of the customized style changes that you make for the Identity Service Center login page.

You can upload multiple .css files to the css directory. The Custom.css file that you create is the main .css file that imports other .css files. For example,

@import "LoginPage.css";
@import "HomePage.css";
@import "Header.css";
See Customizing cascading styles.

Sample.css

oneui .loginForm .page{
	max-height: auto;
}

Product logo size

To change product logo size, edit the following class.
*/
.page .product_logo{
	height: 40px;
	width: 120px;
}

/*

Header title properties

To change Header title properties, edit the following class.
*/
.loginColumn .headertTitle{
	font-size:1.67em;
	font-weight:normal;
	font-color:#222222;
	margin-bottom: 10px;
}

/*

Language field properties

To change language field properties, edit the following class.
*/
.languageField{
	padding:10px 0px !important;
	float: right;
	
}

.dj_ie9 .languageField{
	margin: 50px !important;
}

.dijitRtl .languageField {
    float: left;
}

/*

Login form properties

To change Login form properties, edit the following class.
*/
.oneui .loginForm {
  text-align: center;
  background: #A9A9F5;
  background: -moz-linear-gradient(center top, #e8e8e8 0%, #b9b9b9 100%);
  background: -webkit-linear-gradient(top, #e8e8e8 0%, #b9b9b9 100%);
  background: -ms-linear-gradient(top, #e8e8e8 0%,#b9b9b9 100%);
  background: linear-gradient(to bottom, #e8e8e8 0%,#b9b9b9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#b9b9b9',GradientType=0 );
  box-shadow: 2px 0px 4px #000 inset;
 }

/*

Login page properties

To change Login button properties, edit the following class.
*/
.loginForm .page{
	display: inline-block;
	text-align: left;
	margin: auto;
	padding: 20px;
	/* max-height: 48em; */
	border: medium solid #999999;
	background: #CEECF5;
}

/*

Login button properties

To change Login button properties, edit the following class.
*/
.oneui .loginBtn .idxSpecialButton .dijitButtonNode {
    background-color: greenyellow;
    background-image: -moz-linear-gradient(top, green, red);
    background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(#008abf),to(#085884));
    background-image: -webkit-linear-gradient(top, red 0%, #085884 100%);
    background-image: -o-linear-gradient(top, #008abf 0%, #085884 100%);
    background-image: -ms-linear-gradient(top, #008abf 0%, #085884 100%);
    background-image: linear-gradient(top, #008abf 0%, #085884 100%);
    border: 1px solid #0a5f8e;
    color: #ffffff;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.35);
} 

.dijitRtl .page{
	text-align: right;
}

.mainLogin{
	margin-top: 0px;
	white-space: nowrap;
}

.loginColumn{
	display: inline-block;
	padding-right: 8px;
	min-width: 0px;
}

.dijitRtl .loginColumn{
	display: inline-block;
	padding-left: 8px;
	padding-right: 0px;

/*

Login page footer

To change Login page Footer properties, edit the following class.
*/
.loginForm .footer .footerText {
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
}

/*