Creating and Using Custom Skins

You have the option to change the default appearance of the Stardust Portal by creating custom skins, which you can select in the Portal Configuration view.

This chapter covers the following:

Creating Custom Skins

To create a custom skin:

  1. Switch to the Resource Management View of the Administration Perspective.
  2. Create a skin folder under the provided skins folder. The name of the custom skin will be the name of the created folder accordingly.

  3. A skin consists of one or more style sheet css files. Create the according style sheet(s) and upload to the custom skin folder. Refer to section Example Style Sheet for an example how such a style sheet could look like.

  4. Also upload files needed for the style sheet, e.g. create an images folder, where you upload the required image files too.

Now you can see your custom skin in the Skin section of your Portal Configuration view.


Figure: Select your custom skin.

Example Style Sheet

The following sections shows example style sheet classes for a custom skin overriding the default appearance.

Launch Headers

      .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;
      }

Main Header Image

      .banner{
        height: 70px;
        width 100%;
        background: #FFFFFF url(./images/banner.jpg) left no-repeat;
        border-bottom: 3px solid #FFFFFF;
      }

      .topMenu{
        height: 23px;
        line-height:23px;
        background:url(../images/menuTop-BG.jpg) top repeat-x;
        border-top:1px solid #666666;
        border-bottom:1px solid #000000;
        color:#DDDDDD;
      }

      .topMenuTd{
        border-left:1px solid #666666;
        white-space: nowrap;
        vertical-align: top;
      }

Fonts

      .iceOutTxt, .iceOutLbl {
        font-family:Arial, Helvetica, sans-serif;
        font-size:11px;
        color: #000000;
      }
      body, table {
        font-family:Arial, Helvetica, sans-serif;
        font-size:11px;
      }

View Tab Set - Active Tab

      .icePnlTbOn .portalTbActiveLbl
      {
        color: #000000;
      }

View Tab Set - Inactive Tab

      .icePnlTbOff .portalTbLbl
      {
        color: #808080;
      }

Headings Inside View

      .heading .iceOutTxt
      {
        font-size: 11px;
        font-weight: bold;
        color: #708090;
      }

Labels on Form

      .label-form {
        color: #708090;
        font-weight: normal;
      }

      .iceDatTblCol .iceCmdLnk span.iceOutTxt {
        color: #00629A;
      }

Buttons

      .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

.copyright-symbol {
    color: red;
}

Copyright Message Color

.copyright-message {
    color: blue;
}

Hide/Show Product Version

.product-version {
    display: none;
}

Applying a Customizable Branding to the Login Page

As per requirement, you can customize the look and feel of the login page. You need to create a login.css file and include it in the resources. Once you change the configuration setting, the login page gets customized.

Perform the following steps, to customize the login page:

  1. Create a style sheet file named login.css
  2. Include the style sheet file in the Resource Management view. For detail instructions, please refer to these steps. Note that if you want to include the images for the login page, create a folder named <images> under the skin/skin sub-folder and provide the path in the style sheet file.
  3. In the Configuration settings, click the Portal Configuration.
  4. Select the newly added skin folder name from the Portal Skins panel of the Portal Configuration settings
  5. Select Everyone from Apply To drop-down list. For more information, please refer to the chapter Portal Configuration.
  6. Click Save
  7. Log out of the Stardust Portal. The login page displays the new look and feel.

The default name of the style sheet file should be login.css. If you specify any other name, then you need to configure it in carnot.properties. Specify the key Carnot.Login.Skin.StyleSheet=<login css file name> in the carnot.properties file. Include the file in the Resources folder and apply configuration settings to everyone.

Example - Use Case

In this example, we want to display the blue color banner on the login page. To achieve this, perform the following steps:

  1. Create an image file named banner.jpg which has a rectangle with blue color
  2. Add the following script to create a login.css file 
    	.iceOutTxt, .iceOutLbl {
    	font-family: Verdana;
	color: blue;
	}
	div#loginBox .logo {
    	background: url("./images/banner.jpg") repeat scroll left top transparent;
   		border-bottom: 1px solid #CCCCCC;
    	clear: both;
    	color: #708090;
    	font-weight: bold;
    	height: 70px;
    	line-height: 70px;
    	width: auto;
	}
  3. Login to Stardust Portal
  4. Switch to the Administration perspective and open the Resource Management view
  5. Create a sub-folder named blue under the skins folder

  6. Create a sub-folder named images under the folder blue
  7. Add banner.jpg to images folder
  8. Add login.css to blue folder

  9. Open the Portal Configuration dialog
  10. Select Everyone from the Apply To drop-down list
  11. Click the Portal Configuration view
  12. Select blue from the Select Skin drop-down list
  13. Save the configuration
  14. Log out of the Stardust Portal. The login page displays the blue banner as shown in the following screenshot.

Hiding the Logout Button

To hide the Logout button, create a custom skin as described above. Add a style sheet, e.g. hidelogout.css, or extend an existing style sheet where you set the portal-ui-session-control class to display: none:

.portal-ui-session-control {
    display: none;
}

If the Logout link is not visible, the Alert Panel that will appear when clicking the Alerts link, needs to be repositioned. Thus, additionally add the following class:

.portalAlertsPanel{
    right: 5px;
}

Hiding the Logout button
Figure: Enter the class to hide the Logout button

Now the Logout button is hidden in the Portal.

Hiding the Logout button
Figure: Hiding the Logout button

Importing a Skin provided as Plugin Jar

In case you like to import a skin that is defined via a plugin jar, you have to add this jar file to the lib folder of your runtime environment. The defined skin then is available and can be selected in the Portal Configuration view. Section Creating a Portal Skin to be provided as Plugin Jar of chapter Using the Portal Framework in the Online Documentation - Programming Guide Creating a Portal Skin to be provided as Plugin Jar of chapter Using the Portal Framework in the Programming Guide describes the structure that is required for the usage of such a plugin.