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 describes how to add custom skins and how to create custom skins using style sheets.

• Adding Custom Skins
• Customizing the Portal Header
• Customizing the Portal Footer
• Applying a Customizable Branding to the Login Page
• Changing the overall Font in the Portal
• Changing the overall Color
• Importing a Skin provided as Plugin Jar
• Changing the Skin in advanced Scenarios

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. The following sections give an overview on style classes you can use for specific requirements. Create a style sheet for your custom skin in one of the following ways:
   • Create it in a separate editor and upload it to the custom skin folder.

     

     or

   • add and edit a new style sheet in the folder directly by right-clicking the skin folder and selecting Create New File > CSS

     

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

   

After a re-login you can see your custom skin in the Select Skin drop-down list of Portal Configuration view.

Figure: Select your custom skin.

Customizing the Portal Header

You can use the following style classes and mechanism to customize your Portal header appearance:

.sg-common-menu {
    background-image: url("./images/customlogo.png");
    width: 560px;
    height: 80px;
}
.sgMenu img {
    visibility: hidden;
}

.sg-common-menu {
    background-image: none;
    width: 560px;
    height: 80px;
}

.brand {
    display: none !important;
}

.sg-common-menu {
    background-image: url("./images/customlogo.png");
    width: 560px;
    height: 80px;
}

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

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

.sg-alerts {
   display: none;
}

Example Use Case for a customized Header

1. Switch to the Administration perspective and open the Resource Management view
2. Create a new custom skin folder with subfolder images
3. Create an image file with your custom banner style. In our example this is an image named xyz-banner.png of size 560x70 px

   

4. Create an image file with your custom header style. In our example we use an image named header-bg.png having just a blue background (see header-bg.png)
5. Upload the xyz-banner.png and header-bg.png image files to the images folder
6. Create a style sheet file by selecting Create New File > CSS

   

7. Open the file and add the following code in the editor:

   /* Changing the logo */
   .sg-common-menu {
      background-image: url("./images/xyz-banner.png");
      width: 560px;
      height: 80px;
   }
   
   .sgMenu img {
      border: 0 none;
   }
   
   .sgMenu img {
      visibility: hidden;
   }
   
   /* Hiding the Process Portal brand label */
   .brand {
      display: none !important;
   }
   
   /* Changing the background */
   .navbar .nav.pull-right,.app>header .container-fluid {
      background: url("./images/header-bg.png") 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;
   }
   
   .sidebar{
      top:130px;
   }
   .sidebar-content-inner{
      overflow:hidden;
   }

   

8. The custom skin folder now looks as follows:

   

9. Open the Portal Configuration dialog
10. Select Everyone from the Apply To drop-down list
11. Click the Portal Configuration view
12. Select your custom skin from the Select Skin drop-down list
13. Save the configuration
14. Log out of the Stardust Portal and re-login

Now you see the header customized with your banner and header:

Figure: Customized Portal Header

Customizing the Portal Footer

You can use the following style classes and mechanism to customize your Portal footer:

.sg-footer-bar .container-fluid .sg-copyright{
 background: none !important;
}

.sg-footer-bar .container-fluid .sg-copyright{
 background:  url("./images/custom-header-bg.jpg") !important;
}

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

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

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

.sg-footer-bar .nav>li>a {
visibility:hidden;
}

 .sg-footer-bar .container-fluid {
    background: url("./images/custom-header-bg.jpg") top repeat-x !important;
}

Example use case for a customized Footer

In this example we demonstrate how to customize a footer. We like to change the copyright text, the footer background and the color bar image, which appears on the left side of the footer.

1. Switch to the Administration perspective and open the Resource Management view
2. Edit the style sheet we created in section
3. Create an additional image file with a custom color bar. In our example we simply created an image named color-bar.png of size 120x40 px filled with a selected background color

   

4. Upload the color-bar.png image file to the images folder

   

5. Edit your custom style sheet file and extend it with the following code:

   /* Changing the footer background */
   .sg-footer-bar .container-fluid {
      background: url("./images/header-bg.png") top repeat-x !important;
   }
   
   /* Changing the footer color bars image */
   .sg-footer-bar .container-fluid .sg-copyright{
      background:  url("./images/color-bar.png") no-repeat !important;
   }
   
   /* Changing the copyright information in the footer */
   
   .sg-footer-bar .container-fluid span{
      word-spacing:-999px;
      letter-spacing: -999px; 
   }
   
   .sg-footer-bar .container-fluid span:after {
      content: "XYZ Copyright";
      letter-spacing: normal;
      padding: 14px;
      word-spacing: normal;
   }
   
   /* Hiding the build information */
   .sg-build-info {
      display: none;
   }

6. Open the Portal Configuration dialog
7. Select Everyone from the Apply To drop-down list
8. Click the Portal Configuration view
9. Select your custom skin from the Select Skin drop-down list
10. Save the configuration
11. Log out of the Stardust Portal and re-login

Now you also see the Portal footer displayed with your custom copyright and footer background:

Figure: Customized Portal Footer

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.
3. If you want to include 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 (e.g. background-image: url("./images/customlogo.png");).
4. In the Configuration settings, click Portal Configuration
5. Select the newly added skin folder name from the Portal Skins panel of the Portal Configuration settings
6. Select Everyone from Apply To drop-down list. For more information, please refer to chapter Portal Configuration.
7. Click Save
8. Log out of the Stardust Portal. The login page displays the new look and feel.

Using another Style Sheet Name for the customized Login

The default name of the style sheet file should be login.css. If you specify any other name, you need to configure it in your carnot.properties file. Specify the key Carnot.Login.Skin.StyleSheet key with the name of your login style sheet file:

Carnot.Login.Skin.StyleSheet=<your login css file name>

Upload the file in the Resources folder as described above and apply configuration settings to everyone.

Example - Use Case

In this example, we want to display a login page using a custom banner, a custom font and a custom color. We use a striking font Stencil to make the font changes significantly visible. To achieve this, perform the following steps:

1. Create a custom skin folder as described above
2. Create an image file named mylogin.png which a custom color and the font style for the login text, which you will use for the other login box content, e.g.:

   

3. Upload the image file to your custom skin images folder
4. In your custom skin folder add an empty stylesheet file named login.css

   

5. Open the login.css style sheet and add the following classes:

   /* Use the custom logo */
   div#loginBox .logo {
      background: url(./images/mylogin.png);
      height: 40px;
   }
   
   /* Use custom font in Portal title*/
   div#loginBox .portalTitle {
      color: #5d8bb9;
      font-family: Stencil,Arial,sans-serif;
      font-size: 20px;
      font-weight: bold;
   }
   
   /* Use custom font in login screen text */
   .iceOutLbl {
      font-family: Stencil,Arial,sans-serif;
      color: #5d8bb9;
   }
   
   /* Use custom font, color and a border radius in button */
   div#loginBox .buttonContainer input {
      border-radius: 3px;
      background: #5d8bb9;
      color: white;
      font-family: Stencil,Arial,sans-serif;
   }
   
   /* Use custom font in table link for Forgot Password */
   table {
      font-family: Stencil,Arial,sans-serif;
   }
   

6. In the Portal Configuration view select your custom skin. Make sure to have Everyone selected in the Apply To drop-down list
7. Save the configuration
8. Log out of the Stardust Portal. The login page displays the custom banner, text style and color as shown in the following screenshot:

   

Changing the overall Font in the Portal

To change the font that appears in your Portal, you can use the classes in the following table:

.iceOutTxt, .iceOutLbl, .iceInpTxtArea {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

body,label,table,tr,th,td,
   input,input[type="text"],input[type="password"],input[type=button],
   button,select,textarea {
      font-family: <your font family>,<alternative font family>,sans-serif;
}

.iceSelOneMnu, .iceSelMnyMnu {
   font-family: <your font family>,<alternative font family>,sans-serif;
}
      

.jstree a {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

.button {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

.propertiesPanelTitle {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

.popupDialogHdr .headerText {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

.iPopupDialogContentText, .propertiesPanelTitle,.iPopupDialogTitleText,.iPopupDialogControlButton  {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

.toolbar-section-footer {
   font-family: <your font family>,<alternative font family>,sans-serif;
}

Changing the font color

To change the color of your font appearing in specific areas, use the classes mentioned above and add the color class. For example to change the color of the text in the general appearance, add the following:

.iceOutTxt, .iceOutLbl, .iceInpTxtArea {
   font-family: <your font family>,<alternative font family>,sans-serif;
   color: <text color>;
}

body,label,table,tr,th,td,
   input,input[type="text"],input[type="password"],input[type=button],
   button,select,textarea {
      font-family: <your font family>,<alternative font family>,sans-serif;
   color: <text color>;
}

Example Usage for changing the Font

Create a custom skin folder as described in section Adding Custom Skins. Prepare an empty stylesheet file to add the customized font classes.

In this example we use a striking font Stencil to make the font changes significantly visible in the Portal.

To make the changes in the style sheet described below effective, do the following:

1. Select your custom skin in the Configuration view
2. Logout
3. Clean your browser cache
4. Re-login

Your changes should now be applied to the Portal.

• Changing the main font in the Portal
• Changing the font in menu selections
• Changing the font of the outline tree in the Business Modeler
• Changing the font of general buttons
• Changing the font of the properties panel title
• Changing the font of pop-up dialog headers
• Changing the font of pop-up dialog content in the Business Modeler
• Changing the font of the toolbar section footer in the Business Modeler

Changing the main font in the Portal

To set the Stencil font for the main Poral appearance, enter the following in your custom skin stylesheet:

.iceOutTxt, .iceOutLbl, .iceInpTxtArea {
   font-family: Stencil,Arial,sans-serif;
}

body,label,table,tr,th,td,input,input[type="text"],input[type="password"],input[type=button],button,select,textarea {
   font-family: Stencil,Arial,sans-serif;
}

Now the Portal layout looks similar as in the following screenshot:

Figure: Custom skin with changed font applied to the Portal layout

Changing the font in menu selections

To change the font appearing in menu selections, enter the following code:

.iceSelOneMnu, .iceSelMnyMnu {
   font-family: Stencil,Arial,sans-serif;
}

Now the set font appears in menu selections as shown in the following screenshot:

Figure: Changed font in menu selection

Changing the font of the outline tree in the Business Modeler

The followin class sets the font for the outline tree in the Business Process Modeler:

.jstree a {
   font-family: Stencil,Arial,sans-serif;
}

Figure: Changed font in the outline tree

Changing the font of general buttons

To set the font of general buttons, use the following code:

.button {
   font-family: Stencil,Arial,sans-serif;
}

Figure: Changed font example in buttons of Process Search

Changing the font of the properties panel title

Enter the following code if you like to change the font in the title of property panels in the Business Process Modeler:

.propertiesPanelTitle {
   font-family: Stencil,Arial,sans-serif;
}

Figure: Changed font in the properties dialog header

Changing the font in pop-up dialog headers

If you like to change the font in pop-up dialog headers, enter:

.popupDialogHdr .headerText {
   font-family: Stencil,Arial,sans-serif;
}

Figure: Changed font in the pop-up dialog header

Changing the font of pop-up dialog content in the Business Modeler

The following code changes the font in pop-up dialogs in the Business Modeler for text content and dialog title and panel title:

.iPopupDialogContentText, .propertiesPanelTitle,.iPopupDialogTitleText,.iPopupDialogControlButton {
   font-family: Stencil,Arial,sans-serif;
}

Figure: Changed font in a Business Modeler pop-up dialog

Changing the font of the toolbar section footer in the Business Modeler

You can also change the font in the toolbar section footer in the Business Process Modeler by using the following code:

.toolbar-section-footer {
   font-family: Stencil,Arial,sans-serif;
}

The toolbar then looks similar to the following screenshot:

Figure: Changed font in the toolbar footer of the diagram in the Business Modeler.

Changing the overall Color

To change the font that appears in your Portal, you can use the classes in the following table:

/* Portal Home tab*/
.sg-home {   
    background-color: <custom color>;
    background-image: none;
}

/* Tabs header background */
.sg-tabs-bar {
    background-color: <custom color>;
    background-image: none;
}

/* Tabs in header */
.sg-tabs-bar .nav-tabs > li.sg-tab {
    background-color: <custom color>;
    background-image: none;
}

/* Active tab in header */
.sg-tabs-bar .nav-tabs > li.sg-active > div {
    background-color: <custom color>;
    background-image: none;
}

/* Tab line in header */
 div[sg-tabs-bar] > .sg-subnav-bar {
    background-color: <custom color>;
}      

/* Sidebar title */
.sg-sidebar-title {
    background-color: <custom color>;
    background-image: none;
}

/* Sidebar toggle */
.sg-sidebar-toggle, .sg-sidebar-toggle-well {
    background-color: <custom color>;
}

/* Sidebar top menu */
.topMenu {
    background-color: <custom color>;
    background-image: none;
}      
     

/* Menu selection*/
.iceMnuItm a {   
    background-color: <custom color>;
    background-image: none;
}

/* Menu selection hover */
 .iceMnuItm a:hover {   
    background-color: <custom color>;
    background-image: none;
}      

Example Usage for changing Background Colors

In the following example we use a light purple color with different nuances to customize our Portal color. Create a new skin and enter a style sheet containing style classes to change the background color. Apply the new skin containing this style sheet as described in the previous sections.

For example use the following style settings:

/* Tab header */

/* Portal Home tab*/
.sg-home {   
    background-color: #b193c6;
    background-image: none;
}

/* Tabs header background */
.sg-tabs-bar {
    background-color: #936cad;
    background-image: none;
}

/* Tabs in header */
.sg-tabs-bar .nav-tabs > li.sg-tab {
    background-color: #b193c6;
    background-image: none;
}

/* Active tab with  tab line in header */
.sg-tabs-bar .nav-tabs > li.sg-active > div, div[sg-tabs-bar] > .sg-subnav-bar {
    background-color: #e0d1eb;
    background-image: none;
}     

/* Sidebar */

/* Sidebar title and top menu */
.sg-sidebar-title, .topMenu {
    background-color: #b193c6;
    background-image: none;
}

/* Sidebar toggle */
.sg-sidebar-toggle, .sg-sidebar-toggle-well {
    background-color: #b193c6;
}
     
/* Menu selection */
.iceMnuItm a {   
    background-color: #b193c6;
    background-image: none;
}

/* Menu selection hover */
 .iceMnuItm a:hover {   
    background-color: #936cad;
    background-image: none;
}

After applying the skin and re-login, your Portal layout looks similar to the following screenshots:

Figure: Navigation side bar with changed color

Figure: Menu selection with changed color

Figure: Portal tab header with changed color

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.