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.
To add a custom skin that you can use in your Portal do the following:
or
.css
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.
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;
} |
images
images
folder
.css extension.
/* 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;
}
Now you see the header customized with your banner and 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;
}
|
In this example we demonstrate how to customize a footer. We like to change the copyright text and the footer background.
/* 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;
}Now you also see the Portal footer displayed with your custom copyright and footer background:

Figure:
Customized Portal Footer
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:
skin/skin sub-folder and provide the path in the style sheet file (e.g. background-image:
url("./images/custom-logo.png");).
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.
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:
images folder
login.css
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;
}
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;
} |
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>;
}
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:
Your changes should now be applied to 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:

Figure: Custom skin with changed font applied to the
Portal layout
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
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;
} |
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
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:
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.
The Stardust 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:
To retrieve Japanese translations, download file ipp-product-nls.jar
from the following location:
Perform the following steps to change the property value in the according properties file:
portal-common-messages_locale.properties file in the
downloaded JAR file.portalFramework.title = XYZ Application
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:

Figure: Portal with custom application name
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
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:

Figure:
White-labeled Skin Example
Stardust 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 Stardust 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 Stardust 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:
modern.variables.less: contains LESS variables with Portal skin
defaultsmodern.less: style sheet using the default Stardust
Portal LESS variablesmodern.index.less: top level LESS file, which is provided to
the LESS compilercompile.bat: compilation batch file using compilation utilities
less.js and rhino.js
Figure: LESS Theme Builder content
To create a new style sheet with custom settings:
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.compile.bat.modern-new.css in
the LESS folder, which you can upload to a custom skin in the
Portal.
The following LESS variables are available:
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.
compile.bat file to create a modern-new.css
style sheet.
/* 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;
}LESS folder and select the modern-new.css
file.

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


You now see the new skin applied to the Portal.

Figure: Custom Skin created with LESS variables
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.
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.