Skip to main content

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.

Jump to: navigation, search

Difference between revisions of "Stardust/Knowledge Base/Customization/Portal/Applying custom skinning to Stardust Portal"

(Applying custom skinning to Stardust portal)
Line 47: Line 47:
 
<br>  
 
<br>  
  
[[Image:Loginpage.jpg]]
+
<br>
  
 
<br>  
 
<br>  
Line 53: Line 53:
 
'''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''' <br>  
 
'''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''' <br>  
  
<css />
+
<css />  
  
.panelHeaderTitle {<br> color: #708090;<br> font-weight: bold;<br> }
+
.panelHeaderTitle {<br> color: #708090;<br> font-weight: bold;<br> }  
  
.panelHeader .iceCmdLnk:hover {<br> cursor: hand;<br> text-decoration: none;<br> }
+
.panelHeader .iceCmdLnk:hover {<br> cursor: hand;<br> text-decoration: none;<br> }  
  
.iceCmdLnk .panelHeaderTitle:hover {<br> color: #B0232B;<br> font-weight: bold;<br> }<br> .action-link<br> {<br> color: #00629A;<br> }
+
.iceCmdLnk .panelHeaderTitle:hover {<br> color: #B0232B;<br> font-weight: bold;<br> }<br> .action-link<br> {<br> color: #00629A;<br> }  
  
.action-link:hover<br> {<br> color: #B0232B;<br> text-decoration: underline;<br> }<br>.banner{<br> height: 70px;<br> width 100%;<br> background: #FFFFFF url(./images/smc_newlogo.jpg) left no-repeat;<br> border-bottom: 3px solid #FFFFFF;<br> }
+
.action-link:hover<br> {<br> color: #B0232B;<br> text-decoration: underline;<br> }<br>.banner{<br> height: 70px;<br> width 100%;<br> background: #FFFFFF url(./images/smc_newlogo.jpg) left no-repeat;<br> border-bottom: 3px solid #FFFFFF;<br> }  
  
.iceOutTxt, .iceOutLbl {<br> font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br> font-size:11px;<br> <br> }<br>.body, table {<br> font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br> font-size:11px;<br> }<br> .heading .iceOutTxt<br> {<br> font-size: 11px;<br> font-weight: bold;<br> color: #708090;<br> }<br>.label-form {<br> color: #708090;<br> font-weight: normal;<br> }<br>.iceDatTblCol .iceCmdLnk span.iceOutTxt {<br> color: #00629A;<br> }<br>.button, .button-dis<br> {<br> color:#333333;<br> background: #FFFFFF url( "./css-images/button-background.png" ) bottom repeat-x;<br> border:1px solid #CCCCCC;<br> border-bottom:1px solid #999999;<br> border-right:1px solid #999999; <br> cursor: pointer;<br> }<br>.copyright-symbol {<br> color: red;<br>}<br>.copyright-message {<br> color: blue;<br>}
+
.iceOutTxt, .iceOutLbl {<br> font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br> font-size:11px;<br> <br> }<br>.body, table {<br> font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br> font-size:11px;<br> }<br> .heading .iceOutTxt<br> {<br> font-size: 11px;<br> font-weight: bold;<br> color: #708090;<br> }<br>.label-form {<br> color: #708090;<br> font-weight: normal;<br> }<br>.iceDatTblCol .iceCmdLnk span.iceOutTxt {<br> color: #00629A;<br> }<br>.button, .button-dis<br> {<br> color:#333333;<br> background: #FFFFFF url( "./css-images/button-background.png" ) bottom repeat-x;<br> border:1px solid #CCCCCC;<br> border-bottom:1px solid #999999;<br> border-right:1px solid #999999; <br> cursor: pointer;<br> }<br>.copyright-symbol {<br> color: red;<br>}<br>.copyright-message {<br> color: blue;<br>}  
  
.form-panel-label{<br>font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br>}<br>.form-panel-output{<br>font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br>}<br>.iceMnuItm a{<br> background-color: yellowgreen;<br> <br> color: white;<br>}
+
.form-panel-label{<br>font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br>}<br>.form-panel-output{<br>font-family:'Lucida Sans Unicode','Lucida Grande','Helvetica','Arial',sans-serif;<br>}<br>.iceMnuItm a{<br> background-color: yellowgreen;<br> <br> color: white;<br>}  
  
.iceMnuItm a:hover{<br> background-color: blue;<br>}<br>
+
.iceMnuItm a:hover{<br> background-color: blue;<br>}<br>  
  
[[Image:StardustPortal.jpg]]
+
<br>

Revision as of 02:53, 9 July 2013

 

To apply branding and font 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 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;
}


Back to the top