Stardust/Knowledge Base/Customization/Portal/Applying custom skinning to Stardust Portal

To apply branding on login page like shown in the image below use login.css




.iceOutTxt, .iceOutLbl {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #555;
}
div#loginBox .logo {
background: url("./images/smc_newlogo.jpg") no-repeat left top transparent;
border-bottom: 1px solid #CCCCCC;
clear: both;
color: #708090;
font-weight: bold;
height: 65px;
line-height: 70px;
width: auto;
}
div#loginBox .portalTitle {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #708090;
font-weight: bold;
height: 70px;
line-height: 70px;
width: auto;
}
.iceFrm {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #555;
background:#999;;
background: url("./images/smc_pic.jpg") no-repeat left center transparent;
border: none;

}
div#loginBox .buttonContainer input{
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}
.iceCmdLnk, .iceOutLnk {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}

To apply a more sophisticated branding (full screen branding image and adjusted controls) login page like shown in the image below use this login.css






.iceOutTxt, .iceOutLbl {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #555;
}
div#loginBox {
width: 1200px;
}
div#loginBox .loginContent {

margin-left: 500;
}

div#loginBox .logo {
background: url("./images/smc_pic.jpg") no-repeat left top transparent;
border-bottom: 1px solid #CCCCCC;
clear: both;
color: #708090;
font-weight: bold;
height: 215px;
line-height: 70px;

}
div#loginBox .portalTitle {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #708090;
font-weight: bold;
height: 70px;
line-height: 70px;
width: auto;

}
.iceFrm {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
color: #555;;




}
div#loginBox .buttonContainer input{
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}
.iceCmdLnk, .iceOutLnk {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}




Points to remember:

Height of div#loginBox .logo should match height of image.

• Width of div#loginBox should match the width of the image.
• To adjust the position of other controls like 'Title', Label and input boxes, i used - 

div#loginBox .loginContent {

margin-left: 500;
}

To change font of the UI, menu’s background and color of text on mouse hover, branding on banner, color of links on mouse hover use smcskin5.css

.panelHeaderTitle {
color: #708090;
font-weight: bold;
}

.panelHeader .iceCmdLnk:hover {
cursor: hand;
text-decoration: none;
}

.iceCmdLnk .panelHeaderTitle:hover {
color: #B0232B;
font-weight: bold;
}
.action-link
{
color: #00629A;
}

.action-link:hover
{
color: #B0232B;
text-decoration: underline;
}
.banner{
height: 70px;
width 100%;
background: #FFFFFF url(./images/smc_newlogo.jpg) left no-repeat;
border-bottom: 3px solid #FFFFFF;
}

.iceOutTxt, .iceOutLbl {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
font-size:11px;

}
.body, table {
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
font-size:11px;
}
.heading .iceOutTxt
{
font-size: 11px;
font-weight: bold;
color: #708090;
}
.label-form {
color: #708090;
font-weight: normal;
}
.iceDatTblCol .iceCmdLnk span.iceOutTxt {
color: #00629A;
}
.button, .button-dis
{
color:#333333;
background: #FFFFFF url( "./css-images/button-background.png" ) bottom repeat-x;
border:1px solid #CCCCCC;
border-bottom:1px solid #999999;
border-right:1px solid #999999;
cursor: pointer;
}
.copyright-symbol {
color: red;
}
.copyright-message {
color: blue;
}

.form-panel-label{
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}
.form-panel-output{
font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;
}
.iceMnuItm a{
background-color: yellowgreen;

color: white;
}

.iceMnuItm a:hover{
background-color: blue;
}


To change the color and background color of text on mouse hover of perspective name

.topMenuIframeBar .menuItm a:hover {color: darkblue; }

Effect is:

.icePnlGrdCol2:hover {background-color: red; }
Effect is:

.icePnlGrdRow1:hover {background-color: red;}
Effect is: