Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Stardust/Knowledge Base/Customization/Portal/Applying custom skinning to Stardust Portal
Contents
- 1 To apply branding on login page like shown in the image below use login.css
- 2 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
- 3 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
- 4 To change the color and background color of text on mouse hover of perspective name
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;
}
.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:
