Sample CSS file for customizing styles

To apply customized style to Identity Service Center, you must create a cascading stylesheet (CSS) file. This topic provides information about four sample CSS file.

Custom.css

This sample Custom.css file is the main css file that imports other css files.

@import "LoginPage.css";
@import "HomePage.css";
@import "Header.css";

LoginPage.css

This sample file contains style data for the login page.

/* 
This page contains Sample css file that provides information to customize styles in the Identity Service Center login page.  
You must create a new Custom.css file in the .../itim/custom/ui/css directory. 
For a trial, import this Sample.css file in the Custom.css file that you created to view the effect of the customized styles in the Identity Service Center login page.
*/
 
.oneui .loginForm .page{
	max-height: auto;
}

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

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

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

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

.dijitRtl .languageField {
    float: left;
}

/*
To change Login form properties edit below 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;
}

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

/*
To change Login button properties edit below 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;
}

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

HomePage.css

This sample file contains style data for the home page.

/*
To change the Background color of Home Page edit below class
*/
.SVCENTER_HOMEPAGE .itimui{
    height: 100%;
    background: #E0F8F7; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #F2F2F2 1%, #E0F8F7 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#F2F2F2), color-stop(100%,#E0F8F7)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,#F2F2F2 1%,#E0F8F7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,#F2F2F2 1%,#E0F8F7 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #F2F2F2 1%,#E0F8F7 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,#F2F2F2 1%,#E0F8F7 100%); /* W3C */
}

/*
To change the Navigation card properties edit below class
*/
.navcard {
    display: inline-block;
    width: 312px;
    margin: 0 0 0 20px;
}

/*
To change the Navigation card Border edit below class
*/
.navCardBorder {
    box-shadow: 0 2px  12px rgba(0,0,0,2);
}

/*
To change the property of navigation card new window icon edit below class
*/
.navcard .navCardBorder .textArea .newWindowIcon {
    position: absolute;
	right: 7px;
	top: 7px;
}

.dijitRtl .navcard .navCardBorder .textArea .newWindowIcon {
    right: auto;
    left: 7px;
}

/*
To change the Navigation card properties edit below class
*/
.navcard .navCardBorder .textArea {
    border: 1px solid #fff;
    outline: 2px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 1.5em;
    height: 143px;
    overflow: hidden;
    padding: 22px;
    position: relative;
    vertical-align: top;
    width:266px;
    margin-bottom: 22px;
    background: #81BEF7; /* Old browsers */
    background: -moz-linear-gradient(top, #81BEF7 0%, #A9D0F5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81BEF7), color-stop(100%,#A9D0F5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #81BEF7 0%,#A9D0F5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #81BEF7 0%,#A9D0F5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #81BEF7 0%,#A9D0F5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #81BEF7 0%,#A9D0F5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81BEF7', endColorstr='#A9D0F5',GradientType=0 ); /* IE6-9 */
}

/*
To change the selected Navigation card properties edit below class
*/
.navcard .navCardBorder .textArea:hover {
    border: 1px solid #fff;
    outline: 2px solid rgba(0, 0, 0, 0.2);
    background: #81BEF7 ; /* Old browsers */
    background: -moz-linear-gradient(top, #81BEF7  0%, #58D3F7 20%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81BEF7 ), color-stop(20%,#58D3F7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #81BEF7  0%,#58D3F7 20%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #81BEF7  0%,#58D3F7 20%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #81BEF7  0%,#58D3F7 20%); /* IE10+ */
    background: linear-gradient(to bottom, #81BEF7  0%,#58D3F7 20%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81BEF7 ', endColorstr='#58D3F7',GradientType=0 ); /* IE6-9 */
}

.navcard .navCardBorder .textArea:focus {
	outline: 2px solid #8CCAE3;
	border: 1px solid #0297D1;
}

.dijitRtl .navCardBorder .textArea .name {
    text-align: right;
}

.navcard .navCardBorder .textArea .desc {
    color: #222;
    font-size: .7em;
    word-wrap: break-word;
    margin-bottom: 10px;
    text-align: left;
}

.navcard .navCardBorder .textArea .name {
    font-size: 1.35em;
    font-weight: bold;
    word-wrap: break-word;
    text-align: left;
    color: #045FB4;
    margin-bottom: 10px;
}

.dijitRtl .navCardBorder .textArea .desc {
    text-align: right;
}

.navcard .navCardBorder .textArea .iconStrip {
    position: absolute;
    bottom: 15px;
    left: 22px;
}

.dijitRtl .navcard .navCardBorder .textArea .iconStrip {
    right: 22px;
}

.navcard .navCardBorder .textArea .navCardCount {
	display: inline-block;
    position: relative;
  	width: 100px;
  	left: 100px;
  	top: 25px;
}

:lang(ja) .navcard .navCardBorder .textArea .navCardCount {
	top: 0px;
}

.dijitRtl .navcard .navCardBorder .textArea .navCardCount {
	right: 70px;
}

.navcard .navCardBorder .textArea .count {
 	color: #ee5334;
  	font-size: 48px;
  	font-weight: bold;
  	text-align: center;
  	left: 55px;
}

.navcard .navCardBorder .textArea .navCardCount .countText {
	font-family: 'Arial';
	font-size: 13px;
	font-weight: bold;
	word-wrap: normal;
	color: #00649b;
	position: relative;
	bottom: 15px;
	padding: 10px 0px 0px 0px;
	text-align: center;
	
.oneui .dijitMenuBar .dijitMenuItem {
  padding: 6px 10px 7px 10px;
  margin: 0 3px 0 2px;
  color: #A9BCF5;
  margin-left: -1px;
}
	
}
.oneui .dijitMenuTable .oneuiMenuColumn tr:first-child .dijitMenuArrowCell,
.oneui .dijitMenuTable .oneuiMenuColumn tr:first-child .dijitMenuItemIconCell,
.oneui .dijitMenuTable .oneuiMenuColumn tr:first-child .dijitMenuItemLabel,
.oneui .dijitMenuTable .oneuiMenuColumn tr:first-child .oneuiMenuHeadingLabel{
		border-top: 1px solid #A9BCF5;
}

Header.css

This sample file contains style data for the header.

/*
To change the Primary Header color edit below class
*/
.oneui .idxHeaderContainer .idxHeaderPrimary {
  background-color: #0B4C5F;
  background-image: none;
}

/*
To change the Header logo and Size edit below class
*/
.oneui .idxHeaderContainer .idxHeaderPrimary .idxHeaderLogo {
    background-image: url('/itim/ui/custom/ui/images/headerLogo.png');
    background-color: rba(0,0,0,0);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100px 25px;
}

/*
To change the Header logo and Size edit below class
*/
.dijitRtl .oneui .idxHeaderContainer .idxHeaderPrimary .idxHeaderLogo {
    float: center;
    background-image: url('/itim/ui/custom/ui/images/headerLogo.png');
    background-color: rba(0,0,0,0);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100px 25px;
}

/*
To change the secondary Header properties edit below class
*/
.itimSSNavHeader {
	background: #A9D0F5; /* Old browsers */
	background: -moz-linear-gradient(top, #A9D0F5 0%, #819FF7 80%, #A9D0F5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A9D0F5), color-stop(80%,#819FF7), color-stop(100%,#A9D0F5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #A9D0F5 0%,#819FF7 80%,#A9D0F5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #A9D0F5 0%,#819FF7 80%,#A9D0F5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #A9D0F5 0%,#819FF7 80%,#A9D0F5 100%); /* IE10+ */
	background: linear-gradient(to bottom, #A9D0F5 0%,#819FF7 80%,#A9D0F5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A9D0F5', endColorstr='#819FF7',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: 34px;
    padding-top: 7px;
    padding-left: 0;
    min-width: 980px;
}


.itimSSNavHeader .MenuBar{
    background:transparent;
    border:none;
    display: inline-block;
}
.oneui .itimui .idxHeaderContainer .idxHeaderNavigationHome {
    width: 15px;
}

.oneui .itimui .idxHeaderContainer .dijitMenuItemHover .idxHeaderNavigationHome {
    width: 15px;
}

.dijitRtl .oneui .itimui .idxHeaderContainer .idxHeaderNavigationHomeButtonOnly.cssForHebrew {
	background-position: -151px -5px;
}

.dijitRtl .oneui .itimui .idxHeaderContainer .dijitMenuItemHover .idxHeaderNavigationHomeButtonOnly.cssForHebrew{
	background-position: -217px -5px;
}

.oneui .itimui .idxHeaderContainer .idxHeaderPrimary .idxHeaderDropDown .idxHeaderDropDownArrow{
	display:none;
}

.oneui .itimui .idxHeaderContainer .idxHeaderPrimary li.idxHeaderPrimaryAction .idxHeaderUserName{
	cursor:default;
}