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:
*/
To change Header title properties edit below class:
*/
To change language field properties edit below class:
*/
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:
*/
/* 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);
}
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
*/
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;
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;
.navcard .navCardBorder .textArea .name { font-size: 1.35em;
.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;
:lang(ja) .navcard .navCardBorder .textArea .navCardCount { top: 0px;
}
.dijitRtl .navcard .navCardBorder .textArea .navCardCount { right: 70px;
}
.navcard .navCardBorder .textArea .count { color: #ee5334;
.navcard .navCardBorder .textArea .navCardCount .countText { font-family: ’Arial’;
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);
To change the Header logo and Size edit below class
*/
.dijitRtl .oneui .idxHeaderContainer .idxHeaderPrimary .idxHeaderLogo { float: center;
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%;
.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;
}