Creating and Using Custom Skins

You have the option to change the default appearance of the Infinity Process Platform 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

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

  1. Switch to the Resource Manager View of the Administration Perspective.
  2. Create a skin sub-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:
  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 the Portal Configuration view.


Figure: Select your custom skin.

Customizing the Skin via Style Sheet Settings

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

Action Style Sheet Class and Mechanism
Changing the logo
.sg-common-menu {
    background-image: url("./images/custom-logo.png");
}
.sgMenu img {
    visibility: hidden;
}
Hiding the product name (background image)
.sg-common-menu {
    background-image: none;
}
Hiding the Process Portal brand label
.brand {
    display: none !important;
}
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/custom-logo.png");
}
Changing the background
.sg-common-menu .top-bar-container,
.sg-top-bar > div.navbar-inner > div.container-fluid,
.sg-tabs-bar,
.sg-top-bar .nav,
.navbar-inner,
.sg-controls > ul {
  background-color: <color> !important;
}
Hiding the logged-in user
.sg-logged-in-user  {
   display: none;
}
Hiding alerts
.sg-alerts {
   display: none;
}

Example Use Case for a customized Header

  1. Switch to the Administration perspective and open the Resource Manager 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 custom-logo.png optionally of size 70x44 px

  4. Upload the custom-logo.png and header-bg.png image files to the images folder
  5. Create a style sheet file by selecting Create New File and renaming the new file with a .css extension.

  6. Open the file and add the following code in the editor:
    /* Changing the logo */
    .sg-top-bar .logo-container {
       background-image: url("./images/custom-logo.png");
        width: 70px;
        height: 44px;
    }
    
    /* Hiding the Process Portal brand label */
    .brand, .brand-title {
       display: none !important;
    }
    
    /* Header */
    .sg-condensed .sg-common-menu .menuHeader,
    .sg-top-bar .top-bar-container,
    .sg-top-bar > div.navbar-inner > div.container-fluid,
    .sg-tabs-bar,
    .sg-top-bar .nav,
    .navbar-inner,
    .sg-controls > ul {
      background-color: blue !important;
    }
    

  7. The custom skin folder now looks as follows:

  8. Open the Portal Configuration dialog
  9. Select Everyone from the Apply To drop-down list
  10. Click the Portal Configuration view
  11. Select your custom skin from the Select Skin drop-down list
  12. Save the configuration
  13. Log out of the Infinity Portal
  14. Clean your Browser cache
  15. Re-login

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

Customized Portal Header
Figure: Customized Portal Header

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

Action Style Sheet Class and Mechanism
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 build information
.sg-build-info {
        display: none;
}
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;
}

Example use case for a customized Footer

In this example we demonstrate how to customize a footer. We like to change the copyright text and the footer background.

  1. Switch to the Administration perspective and open the Resource Manager view
  2. 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 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;
    }
  3. Open the Portal Configuration dialog
  4. Select Everyone from the Apply To drop-down list
  5. Click the Portal Configuration view
  6. Select your custom skin from the Select Skin drop-down list
  7. Save the configuration
  8. Log out of the Infinity Portal and re-login

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

Customized Portal Footer
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 Manager 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/custom-logo.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 Infinity Process Platform 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.:

    Custom Login Image

  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 Infinity Process Platform 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:

Action Style Sheet Class and Mechanism
Changing the main font appearance
/* Normal Text */
body,
   .panelHeaderTitle,
   .icePnlClpsblColpsdHdr .iceOutTxt,
   .icePnlClpsblHdr .iceOutTxt,
   .heading, .heading .iceOutTxt,h1,h2,
   table, input, button {
      font-family: <your font family>,<alternative font family>,sans-serif;
      font-size: size;
}
Font in menu selections
select, textarea {
   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

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

body,
   .panelHeaderTitle,
   .icePnlClpsblColpsdHdr .iceOutTxt,
   .icePnlClpsblHdr .iceOutTxt,
   .heading, .heading .iceOutTxt,
   h1, h2,
   table, input,button {
      font-family: Stencil, Arial, sans-serif;
      font-size: 11px;
}

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

Custom Font Example
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:

select, textarea {
   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 overall Color

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

Component Color Change Style Sheet Class and Mechanism
Header background color
.sg-common-menu .top-bar-container,
.sg-top-bar > div.navbar-inner > div.container-fluid,
.sg-tabs-bar,
.sg-top-bar .nav,
.navbar-inner,
.sg-controls > ul {
  background-color: <color> !important;
}
General color
body,
body[id='document:body'],
.sg-sidebar-content-well-inner {
  background-color: <color>;
  background: <color>;
}
body > .icePnlGrp,
.topMenuIframeBar,
.topMenu {
  background-color: <color> !important;
}
.iceSelOneMnu,
.iceSelMnyLb,
.iceSelMnyMnu,
.iceSelOneLb {
  background: <color>;
}
.outlineFixedDiv {
  background: <color>;
}
#outline,
#reportTree {
  background-color: <color> !important;
}
General text color
body,
.iceOutTxt,
.tbl,
.genericTableHdr .iceOutTxt,
td.iceDatTblCol.genericTableCol .iceOutTxt,
.tbl-col-sel-label {
  color: <color>;
}
Label text color
label,
.iceOutLbl,
.label-form,
.label-item,
.panel-label {
  font-size: 11px;
  font-weight: 600 !important;
  color: <color>;
}
Label value text color
.value-item {
  font-size: 11px;
  font-weight: 500;
  color: <color>;
}
Action link text color
a span.iceOutFrmt,
.action-link,
.tbl-row a,
a,
.listItem,
.tbl-tool-link,
.iceDatTblCol .iceCmdLnk,
.iceTreeRow a,
.iceTreeRow a .iceOutTxt,
.iceDatTblCol .iceCmdLnk span.iceOutTxt,
.switchMnuItm .iceOutTxt,
.iceMnuPopVrt .iceMnuPopVrtTopSubMenu .iceMnuPopVrtItem .iceMnuItmLabel {
  font-size: 11px;
  font-weight: normal;
  color: <color>;
}
Mega Menu background color
.sg-start-menu {
  background: <color>;
}
Icon color
.pi,
button.pi,
.iceOutTxt.pi,
.pi a,
.iceTreeRow a:before,
.iceCmdSrtHdr .iceCmdSrtHdrDesc,
.iceCmdSrtHdr .iceCmdSrtHdrAsc,
.genericTableSortColHdr {
  color: <color>;
}
.viewIconBase {
  color: ;
}
.pi-cmdLnk,
.pi-cmdLnk .pi,
.iceCmdLnk .pi,
.iceCmdLnk-dis .pi,
.iceMnuBarItem .pi {
  color: <color> !important;
}
button.pi[disabled='disabled']:hover,
button[disabled='disabled'] .pi:hover {
  color: <color>;
}
button.pi:hover,
button .pi:hover {
  color: <color>;
}
.pi-cmdLnk:hover,
.pi-cmdLnk:hover .pi,
.iceMnuBarItem .pi:hover {
  color: <color>;
}
a span.pi:hover,
.pi a:hover,
.iceCmdLnk:hover .pi,
.iceCmdLnk-dis .pi:hover,
.iceTreeRow a:hover:before {
  color: <color> !important;
}
Table color
/* Tables */
.iceDatTblColHdr,
.iceDatTblColHdr1,
.iceDatTblColHdr2,
.iceDatTblColGrpHdrCol,
.iceDatTblFtr {
  background: none;
}
.tbl-hdr-col,
.tbl-hdr-col.sorting,
.tbl-hdr-col.sorting_desc,
.tbl-hdr-col.sorting_asc {
  background: none !important;
}
.iceDatTblResBor {
  background: coltableResizserBackground;
}
.tbl-row.odd,
.genericTableRow1 {
  background: <color>;
}
.tbl-row.even,
.genericTableRow2 {
  background: <color>;
}
.tbl-row.even:hover,
.tbl-row.odd:hover,
.iceRowSelMouseOver {
  background: <color>;
}
.tbl-row-selected,
.iceRowSelSelected {
  background: <color> !important;
}
.dataFilterSummaryText,
.tbl-col-flt-title {
  color: <color> !important;
}
         
Unselected Tabs
.sg-tabs-bar .nav-tabs > li.sg-tab {
  background: <color>;
}
li.sg-tab {
  background: <color> !important;
}
.sg-tabs-bar .nav-tabs > li.sg-tab > div {
  color: <color>;
  text-shadow: none;
}
.sg-tabs-bar .nav-tabs > li.sg-tab > div:hover {
  background: <color>;
  color: <color>;
}
Selected Tabs
.sg-tabs-bar .nav-tabs > li.sg-active > div,
.sg-tabs-bar .nav-tabs > li.sg-active > div:hover {
  color: <color>;
  background: <color>;
}
div[sg-tabs-bar] > .sg-subnav-bar {
  background-color: <color>;
}
Sidebar
/* Sidebar title */
.sg-sidebar-title {
    background-color: <color>;
    background-image: none;
}

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

/* Sidebar top menu */
.topMenu {
    background-color: <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:

 /* Header */
.sg-common-menu .top-bar-container,
.sg-top-bar > div.navbar-inner > div.container-fluid,
.sg-tabs-bar,
.sg-top-bar .nav,
.navbar-inner,
.sg-controls > ul {
   background-color: #21083a !important;
   background-image: none;
}

.sg-close-menu-tab-container {
  background-color: #938c98;
}
.sg-close-menu-tab.enabled {
  color: #ffffff;
}
.sg-close-menu-tab.disabled {
  color: #aeaab3;
}
.sg-close-menu-tab.enabled:hover {
  background-color: #000000;
  color: #ffffff;
}
/* Mega Menu */
.sg-start-menu {
  background: #77707c;
}
/* Unselected Tab */
.sg-tabs-bar .nav-tabs > li.sg-tab {
  background: #777999;
}
li.sg-tab {
  background: #777999 !important;
}
.sg-tabs-bar .nav-tabs > li.sg-tab > div {
  color: #ffffff;
  text-shadow: none;
}
.sg-tabs-bar .nav-tabs > li.sg-tab > div:hover {
  background: #756f7b;
  color: #ffffff;
}
/* Selected Tab */
.sg-tabs-bar .nav-tabs > li.sg-active > div,
.sg-tabs-bar .nav-tabs > li.sg-active > div:hover {
  color: #333333;
  background: #dcdadf;
}
div[sg-tabs-bar] > .sg-subnav-bar {
  background-color: #dcdadf;
}
/* Portal Home tab*/
.sg-home {   
    background-color: #777999;
    background-image: none;
}

/* Sidebar */

/* Sidebar title */
.sg-sidebar-title {
    background-color: #b193c6;
    background-image: none;
}

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


Figure: Navigation side bar and Portal tab header with changed color

Changing the Portal Application Name

If you like to change the Portal application name, change the value in the language bundle. The property to define the Portal application name is portalFramework.title. Change the value of this property in the portal-common-messages_locale.properties file. There are two options to edit this property bundle:

  1. Editing the provided Language Bundle JAR
  2. Changing the Property in the Portal Plugin

For details on internationalizing the Process Portal, please refer to chapter Internationalizing the Process Portal of the Developer Handbook. Internationalizing the Process Portal of the Developer Handbook.

Editing the provided Language Bundle JAR

The Infinity Process Platform artifactory provides a stardust-product-nls.jar file, which contains all available specific languages bundles for the different components. You can download this file from the following location:

https://infinity.sungard.com/repository/ipp-releases/org/eclipse/stardust/product/stardust-product-nls/

To retrieve Japanese translations, download file ipp-product-nls.jar from the following location:

https://infinity.sungard.com/repository/ipp-releases/com/infinity/bpm/ipp-product-nls/

Perform the following steps to change the property value in the according properties file:

  1. Edit the language specific portal-common-messages_locale.properties file in the downloaded JAR file.
  2. Change the value of property portalFramework.title accordingly, e.g.:
    portalFramework.title = XYZ Application
  3. Add these changed JAR file to the WEB-INF/lib folder of your Web project. Rename it to start with an a, e.g. a-stardust-product-nls.jar, so that it takes precedence over other Portal jars.

The following screenshot shows an example with a changed Portal application name:

Custom Application Name
Figure: Portal with custom application name

Changing the Property in the Portal Plugin

To change the property directly in the Portal plugin, edit the portal-common-messages_locale.properties file in the ipp-portal-common.jar file, which resides in the lib folder of the org.eclipse.stardust.ide.wst.facet.portal_xxx plugin of your Eclipse installation.

Change the value of property portalFramework.title accordingly, for example:

portalFramework.title = XYZ Application

White-labeling your Portal

To white-label your Portal use a combination of the above stylesheets for customizing the header and footer. The following example stylesheets white-labels the Portal by using a white background, hiding the logo and copyright:

/* Hide the background image */
.sg-common-menu {
   background-image: none;
}

.sg-tabs-bar {
   background: none !important;
}

/* Hide the brand */
.brand {
    display: none !important;
}

/* Overwrite the specific background color (optional) */
.sg-common-menu .top-bar-container,
.sg-top-bar > div.navbar-inner > div.container-fluid,
.sg-top-bar .nav
 {
  background-color: white !important;
}

/* Hide the copyright info in the footer */
.sg-footer-bar .sg-copyright {
        visibility: hidden;
}

/* Hide the build info */
.sg-build-info {
        display: none;
}

Your Portal now looks similar as in the following screenshot:

White-labeled Skin Example
Figure: White-labeled Skin Example

Using LESS Variables to quickly adjust the Style

IPP provides a Theme Builder zip file, which you can use for a LESS-based simple styling of your Portal. LESS is a CSS preprocessor including the option for using variables. With the IPP Theme Builder tool, you can edit a LESS file containing predefined variables and compile it to a CSS file, which you can upload in the Infinity Portal as custom skin.

To use this tool, download the following zip file to a folder named C:/LESS: LESS-Suit.zip.

Note
Note that this folder needs to be C:/LESS as the compilation batch file refers to it. In case you like to unzip the file in another location, adjust its reference in the compile.bat file accordingly.

The zip includes the following files:

LESS Theme Builder
Figure: LESS Theme Builder content

Creating a Style Sheet with LESS Variables

To create a new style sheet with custom settings:

  1. Edit file modern.variables.less and change the variables to values as you like. See section LESS Variables List for a list of all provided variables categorized by components.
  2. Save the file and run compile.bat.
  3. You now find a newly created style sheet modern-new.css in the LESS folder, which you can upload to a custom skin in the Portal.

LESS Variables List

The following LESS variables are available:

Header

Tabs

Sidebar

Footer

General

Text and Actions

Buttons

Icons

Tables

Breadcrumbs

Example - Creating a custom Skin using LESS Variables

In the following example, we edit the modern.variables.less file and change some variable values with different font and color and add a background image, similar to the customizing settings in the preceeding style sheet examples.

/* Header */
@headerLogo: url("./images/custom-logo.png");
@headerBackgroundColor: #21083a;
@tabsBarBackground: ;
@utilityMenuColor: #ede5f3;

@appNameFontSize: 2em;
@appNameFontWeight: 400;
@appNameColor: #fff;

@megaMenuBackground: #77707c;

@tabMenuBackgroundColor: #938c98;
@tabMenuColor: #fff;
@tabMenuDisabledColor: #aeaab3;

@tabMenuBackgroundColorHover: #000000;
@tabMenuColorHover: #FFFFFF;

@overflowTabMenuCaretColor: #000000;

/* Tabs */
@unselectedTabBackground: #777999;
@unselectedTabColor: #fff;;
@unselectedTabBackgroundHover: #756f7b;
@unselectedTabColorHover: #fff;

@selectedTabBackground: #dcdadf;
@selectedTabColor: #333;

/* Sidebar */
@sidebarTitleBackground: #8a88a6;
@sidebarTitleColor: #FFF;

/* Footer */
@footerCopyrightBackground: none;

/* General */
@bodyBackgroundColor: #FFFFFF;

/* Text and Actions */
@textFontFamily: Stencil,Arial,sans-serif;
@textFontSize: 11px;
@textColor: #708090;

@labelFontSize: 11px;
@labelFontWeight: 600;
@labelColor: #708090;

@labelValueFontSize: 11px;
@labelValueFontWeight: 500;
@labelValueColor: #708090;

@actionLinkFontSize: 11px;
@actionLinkFontWeight: normal;
@actionLinkColor: #4a2865;;
@headingColor: #8a88a6;
@headingColorHover: #8a88a6;
@headingFontFamily: Stencil,Arial,sans-serif;
@headingFontSize: 14px;
@headingFontWeight: normal;

@dialogHeadingColor:#8a88a6;

/* Buttons */
@primaryButtonBackground: #24415E;
@primaryButtonColor: #FFF;
@secondaryButtonBackground: #FFF;
@secondaryButtonColor: #333;

/* Icons */
@iconColor: #8a88a6;
@tabIconColor : ;
@iconColorHover: #747bcf;

/* Tables */
@tableHeaderBackground: none;
@tableResizserBackground: #d3d5ef;

@tableOddRowBackground: #FFFFFF;
@tableEvenRowBackground: #F4F4F4;
@tableRowBackgroundHover: #ecedf9;
@tableSelectedRowBackground: #dadbf3;

@tableFilterTextColor : gray;

/* Breadcrumbs */
@breadcrumbsColor : #00629A;

You can download the modern.variables.less file containing variables with the example settings from here: modern.variables.less.

  1. Run the compile.bat file to create a modern-new.css style sheet.
  2. The style sheet now contains the values of the changed variables.
       /* Header */
    .sg-common-menu .top-bar-container,
    .sg-top-bar > div.navbar-inner > div.container-fluid,
    .sg-tabs-bar,
    .sg-top-bar .nav,
    .navbar-inner,
    .sg-controls > ul {
      background-color: #21083a !important;
    }
    /* Header Logo */
    .sg-common-menu {
      background-image: url("images/custom-logo.png");
    }
    /* Application Name */
    .sg-top-bar .brand {
      font-size: 2em;
      font-weight: 400;
      color: #ffffff;
    }
    .sg-close-menu-tab-container {
      background-color: #938c98;
    }
    .sg-close-menu-tab.enabled {
      color: #ffffff;
    }
    .sg-close-menu-tab.disabled {
      color: #aeaab3;
    }
    .sg-close-menu-tab.enabled:hover {
      background-color: #000000;
      color: #ffffff;
    }
    /* Mega Menu */
    .sg-start-menu {
      background: #77707c;
    }
    /* Tabs */
    .sg-tabs-bar {
      background:  !important;
    }
    .sg-overflow-menu-caret .caret {
      border-color: #000000 transparent !important;
    }
    /* Utility Menu */
    .navbar .nav > li > a,
    .navbar .noLinkSpan {
      color: #ede5f3;
    }
    .navbar .nav > li > a > i {
      color: #ede5f3;
    }
    /* Unselected Tab */
    .sg-tabs-bar .nav-tabs > li.sg-tab {
      background: #777999;
    }
    li.sg-tab {
      background: #777999 !important;
    }
    .sg-tabs-bar .nav-tabs > li.sg-tab > div {
      color: #ffffff;
      text-shadow: none;
    }
    .sg-tabs-bar .nav-tabs > li.sg-tab > div:hover {
      background: #756f7b;
      color: #ffffff;
    }
    /* Selected Tab */
    .sg-tabs-bar .nav-tabs > li.sg-active > div,
    .sg-tabs-bar .nav-tabs > li.sg-active > div:hover {
      color: #333333;
      background: #dcdadf;
    }
    div[sg-tabs-bar] > .sg-subnav-bar {
      background-color: #dcdadf;
    }
    /* Sidebar */
    .sg-sidebar-title {
      background: #8a88a6;
      color: #ffffff;
    }
    /* Footer copyright */
    .sg-footer-bar .container-fluid .sg-copyright {
      background: none;
    }
    /* General */
    body,
    body[id='document:body'],
    .sg-sidebar-content-well-inner {
      background-color: #ffffff;
      background: #ffffff;
    }
    body > .icePnlGrp,
    .topMenuIframeBar,
    .topMenu {
      background-color: #ffffff !important;
    }
    .iceSelOneMnu,
    .iceSelMnyLb,
    .iceSelMnyMnu,
    .iceSelOneLb {
      background: #ffffff;
    }
    .outlineFixedDiv {
      background: #ffffff;
    }
    #outline,
    #reportTree {
      background-color: #ffffff !important;
    }
    /* Normal Text */
    body,
    table,
    input,
    button {
      font-family: Stencil, Arial, sans-serif;
      font-size: 11px;
    }
    body,
    .iceOutTxt,
    .tbl,
    .genericTableHdr .iceOutTxt,
    td.iceDatTblCol.genericTableCol .iceOutTxt,
    .tbl-col-sel-label {
      color: #708090;
    }
    label,
    .iceOutLbl,
    .label-form,
    .label-item,
    .panel-label {
      font-size: 11px;
      font-weight: 600 !important;
      color: #708090;
    }
    .value-item {
      font-size: 11px;
      font-weight: 500;
      color: #708090;
    }
    /* Links */
    a span.iceOutFrmt,
    .action-link,
    .tbl-row a,
    a,
    .listItem,
    .tbl-tool-link,
    .iceDatTblCol .iceCmdLnk,
    .iceTreeRow a,
    .iceTreeRow a .iceOutTxt,
    .iceDatTblCol .iceCmdLnk span.iceOutTxt,
    .switchMnuItm .iceOutTxt,
    .iceMnuPopVrt .iceMnuPopVrtTopSubMenu .iceMnuPopVrtItem .iceMnuItmLabel {
      font-size: 11px;
      font-weight: normal;
      color: #4a2865;
    }
    /* Heading */
    .icePnlClpsblColpsdHdr .iceOutTxt,
    .icePnlClpsblHdr .iceOutTxt,
    .icePnlClpsblHdr .iceOutTxt {
      font-family: Stencil, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      color: #8a88a6 !important;
    }
    .panelHeaderTitle,
    .panelHeaderTitle:hover,
    .heading,
    .heading .iceOutTxt,
    h2 {
      font-family: Stencil, Arial, sans-serif;
      font-size: 14px !important;
      font-weight: normal !important;
      color: #8a88a6 !important;
    }
    .icePnlClpsblColpsdHdr .iceOutTxt:hover,
    .icePnlClpsblHdr .iceOutTxt:hover {
      font-family: Stencil, Arial, sans-serif;
      font-size: 14px !important;
      font-weight: normal !important;
      color: #8a88a6 !important;
    }
    .iceCmdLnk .panelHeaderTitle:hover {
      font-size: 14px !important;
      font-weight: normal !important;
      color: #8a88a6 !important;
    }
    a .heading,
    a h2:hover {
      font-size: 14px !important;
      font-weight: normal !important;
      color: #8a88a6 !important;
    }
    .popupDialogHdr .headerText {
      font-size: 14px !important;
      font-weight: normal !important;
      color: #8a88a6 !important;
    }
    .header,
    .popup-dlg-hdr-txt {
      color: #8a88a6 !important;
    }
    /* Primary Secondary Buttons */
    .iceCmdBtn:not(.secondary),
    .button {
      background: #24415e !important;
      color: #ffffff;
    }
    input.secondary,
    .button ~ .button {
      background: #ffffff !important;
      color: #333333 !important;
    }
    /* Icon Color */
    .pi,
    button.pi,
    .iceOutTxt.pi,
    .pi a,
    .iceTreeRow a:before,
    .iceCmdSrtHdr .iceCmdSrtHdrDesc,
    .iceCmdSrtHdr .iceCmdSrtHdrAsc,
    .genericTableSortColHdr {
      color: #8a88a6;
    }
    .viewIconBase {
      color: ;
    }
    .pi-cmdLnk,
    .pi-cmdLnk .pi,
    .iceCmdLnk .pi,
    .iceCmdLnk-dis .pi,
    .iceMnuBarItem .pi {
      color: #8a88a6 !important;
    }
    button.pi[disabled='disabled']:hover,
    button[disabled='disabled'] .pi:hover {
      color: #8a88a6;
    }
    button.pi:hover,
    button .pi:hover {
      color: #747bcf;
    }
    .pi-cmdLnk:hover,
    .pi-cmdLnk:hover .pi,
    .iceMnuBarItem .pi:hover {
      color: #747bcf;
    }
    a span.pi:hover,
    .pi a:hover,
    .iceCmdLnk:hover .pi,
    .iceCmdLnk-dis .pi:hover,
    .iceTreeRow a:hover:before {
      color: #747bcf !important;
    }
    /* Tables */
    .iceDatTblColHdr,
    .iceDatTblColHdr1,
    .iceDatTblColHdr2,
    .iceDatTblColGrpHdrCol,
    .iceDatTblFtr {
      background: none;
    }
    .tbl-hdr-col,
    .tbl-hdr-col.sorting,
    .tbl-hdr-col.sorting_desc,
    .tbl-hdr-col.sorting_asc {
      background: none !important;
    }
    .iceDatTblResBor {
      background: #d3d5ef;
    }
    .tbl-row.odd,
    .genericTableRow1 {
      background: #ffffff;
    }
    .tbl-row.even,
    .genericTableRow2 {
      background: #f4f4f4;
    }
    .tbl-row.even:hover,
    .tbl-row.odd:hover,
    .iceRowSelMouseOver {
      background: #ecedf9;
    }
    .tbl-row-selected,
    .iceRowSelSelected {
      background: #dadbf3 !important;
    }
    .dataFilterSummaryText,
    .tbl-col-flt-title {
      color: #808080 !important;
    }
    /* Breadcrumbs */
    .breadcrumbs a {
      color: #green;
    }
  3. Now upload this style sheet in your Portal:
    1. Switch to the Resource Manager View of the Administration Perspective.
    2. Create a skin sub-folder under the provided skins folder.
    3. Right-click the skin folder and select Upload.
    4. Browse to the LESS folder and select the modern-new.css file.

      Upload CSS File

    5. Create a subfolder images and upload an image custom-logo.png (or any other image, which you set as background image in the @headerLogo variable).

      Uploaded Skin Files

  4. Go to the Configuration Panel and select the skin.

    Select Skin

  5. Logout, clean your Browser cache and login again.

You now see the new skin applied to the Portal.

Custom Skin created with LESS variables
Figure: Custom Skin created with LESS variables

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 Infinity 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.