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:

Adding Custom Skins

To add a custom skin that you can use in your Portal do the following:

  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.

Creating Style Sheets for your Custom Skin

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

Hiding the Copyright from Footer

.sg-footer-bar .sg-copyright {
        visibility: hidden;
}

Hiding the Build Information from Footer

.sg-build-info {
        display: none;
}

Hiding Alerts from Header

.sg-alerts {
        display: none;
}

Hiding the logged-in User from Header

.sg-sign-out {
        display: none;
}

.sg-common-menu {
    background-image: url("./images/banner.jpg");
}
.sgMenu img {
    visibility: hidden;
}

To hide the logo

.sg-common-menu {
        display: none;
}

White label your Portal Appearance

There are several style sheet classes that you can use to white label your Portal appearance. The tables in the following sections demonstrate the usage for header and footer appearance.

White label the Portal Header

Use the following style classes and mechanism to white label your Portal header:

Action Style Sheet Class and Mechanism
Changing the logo 
.sg-common-menu {
    background-image: url("./images/customlogo.png");
    width: 560px;
    height: 80px;
}
.sgMenu img {
    visibility: hidden;
}
Hiding the product name (background image) 
.sg-common-menu {
    background-image: none;
    width: 560px;
    height: 80px;
}
Changing the product name Product name comes from icon set at .sg-common-menu. Use your custom product name in a custom logo 
.sg-common-menu {
    background-image: url("./images/customlogo.png");
    width: 560px;
    height: 80px;
}
Changing the background 
.navbar .nav.pull-right, .app>header .container-fluid {
    background: url("./images/custom-header-bg.jpg") top repeat-x !important;
}

/* Header image size varies, to prevent overlap
 of Config panel nav and header pos:relative */
.app>header{
height:auto;
position:relative;
}

/* Navigation panel top will vary based  on Header ,
   HTML framework provides fixed top adjustment */
.app>nav{
top:auto;
}

/* Needs to be adjusted based on Header height */
.sg-content-wrapper{
margin-top: 40px;
}

/* Needs to be adjusted based on Header height */
.sidebar{
top:130px;
}

/* Hide scroll on sidebar */
.sidebar-content-inner{
overflow:hidden;
}

White label the Portal Footer

Use the following style classes and mechanism to white label your Portal footer:

Action Style Sheet Class and Mechanism
Hiding the color bars image 
.sg-footer-bar .container-fluid .sg-copyright{
 background: none !important;
}
Changing the color bars image 
.sg-footer-bar .container-fluid .sg-copyright{
 background:  url("./images/custom-header-bg.jpg") !important;
}
Hide Copyright information 
.sg-footer-bar .sg-copyright {
        visibility: hidden;
}
Changing Copyright information 
.sg-footer-bar .container-fluid span{
word-spacing:-999px;
letter-spacing: -999px; 
}

.sg-footer-bar .container-fluid span:after {
    content: "Sample Text";
    letter-spacing: normal;
    padding: 14px;
    word-spacing: normal;
}
Hiding the product version / build information 
.sg-footer-bar .nav>li>a {
visibility:hidden;
}
Changing the background 
 .sg-footer-bar .container-fluid {
    background: url("./images/custom-header-bg.jpg") top repeat-x !important;
}

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 
    .sg-common-menu {
   background-image: url("./images/banner.jpg");
   color: blue;
   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.

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 Extending the Stardust Portal Components in the Programming Guide describes the structure that is required for the usage of such a plugin.

Changing the Skin in advanced Scenarios

Note that for advanced scenarios for changing the UI, use developer tools and CSS3 techniques to come up with the desired CSS classes and add or override them in your custom skin.