3.3.8.1.2. Default skin

The default skin of eXo Platform is in $PLATFORM_TOMCAT_HOME/webapps/eXoResources.war or $PLATFORM_JBOSS_HOME/standalone/deployments/platform.ear/platform-ui-web-eXoResources.war. The main files associated with the skin are:

WEB-INF/gatein-resources.xml which defines the skin settings to use.
WEB-INF/web.xml which contains the resource filter with the display-name set.
skin/Stylesheet.css which contains the CSS class definitions for this skin.

Common style classes

Currently, eXo Platform customizes twitter bootstrap to build its skin. It uses LESS to generate CSS files. You can find the .less files here. eXo Platform also writes some new stylesheets and adds them to the less folder.

The general folder structure for the eXo Platform skin: /webapp/skin/less.

webapp
|- skin
|--- images
|--- less
|----- Core.less
|----- variables.less
|----- mixins.less
|----- reset.less
|----- components
|----------- style.less
|----- Portlets
|----------- portletName
|------------------ style.less
|----- PortletThemes
|----------- style.less

The followings are common classes overridden from bootstrap:

Core.less: Imports all other less files.

@import "reset.less";

@import "variables.less";

@import "mixins.less";

@import "Tabs/Style.less";

@import "Popup/Style.less";

...

variables.less: Defines the values of variables.

The image below shows the common variables which are used for eXo Platform and you can customize for the site.

Scaffolding
Variable names Values
@bodyBackground @white
@textColor @grayDark
@borderColor @grayDarkWhiteSmoke
Links
Variable names Values
@linkColor @blue
@linkColorHover @blue
Grid system
Variable names Values
@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@gridColumnWidth1200 70px
@gridGutterWidth1200 30px
@gridColumnWidth768 42px
@gridGutterWidth768 20px

Variable names	Values
@bodyBackground	@white
@textColor	@grayDark
@borderColor	@grayDarkWhiteSmoke

Variable names	Values
@linkColor	@blue
@linkColorHover	@blue

Variable names	Values
@gridColumns	12
@gridColumnWidth	60px
@gridGutterWidth	20px
@gridColumnWidth1200	70px
@gridGutterWidth1200	30px
@gridColumnWidth768	42px
@gridGutterWidth768	20px

Typography

Variable names	Values
@sansFontFamily	"Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily	Georgia, "Times New Roman", Times, serif
@monoFontFamily	Monaco, Menlo, Consolas, "Courier New", monospace
@baseFontSize	13px
@baseFontFamily	@sansFontFamily
@baseLineHeight	20px
@altFontFamily	@serifFontFamily

Tables
Variable names Values
@tableBackground transparent
@tableBackgroundAccent @grayLighter
@tableBackgroundHover @grayMediumWhiteSmoke
@tableBorder @borderColor

Variable names	Values
@tableBackground	transparent
@tableBackgroundAccent	@grayLighter
@tableBackgroundHover	@grayMediumWhiteSmoke
@tableBorder	@borderColor

Forms

Variable names	Values
@inputBackground	@white
@inputBorder	@borderColor
@inputBorderRadius	@baseBorderRadius
@inputDisabledBackground	@grayLighter
@formActionsBackground	@grayWhiteSmoke
@inputHeight	@baseLineHeight
@placeholderText	@grayLight

Buttons
Variable names Values
@btnBackground @white
@btnBackgroundHighlight @grayWhiteSmoke
@btnBorder @borderColor
@btnPrimaryBackground @blueLighter
@btnPrimaryBackgroundHighlight @blue
@btnPrimaryBorder @blueDark
Form states and alerts
Variable names Values
@warningBackground #FCF4D4
@warningBorder #edad00
@errorBackground #f7b5b5
@errorBorder #C72222
@successBackground #e6fade
@successBorder #39C522
@infoBackground #dee3fa
@infoBorder #215ab2

Variable names	Values
@btnBackground	@white
@btnBackgroundHighlight	@grayWhiteSmoke
@btnBorder	@borderColor
@btnPrimaryBackground	@blueLighter
@btnPrimaryBackgroundHighlight	@blue
@btnPrimaryBorder	@blueDark

Variable names	Values
@warningBackground	#FCF4D4
@warningBorder	#edad00
@errorBackground	#f7b5b5
@errorBorder	#C72222
@successBackground	#e6fade
@successBorder	#39C522
@infoBackground	#dee3fa
@infoBorder	#215ab2

Navbar

Variable names	Values
@navbarHeight	40px
@navbarBackground	darken(@navbarBackgroundHighlight, 5%)
@navbarBackgroundHighlight	#ffffff
@navbarText	#777
@navbarBrandColor	@navbarLinkColor
@navbarLinkColor	#777
@navbarLinkColorHover	@grayDark
@navbarLinkColorActive	@gray
@navbarLinkBackgroundActive	darken(@navbarBackground, 5%)
@navbarInverseSearchBackground	lighten(@navbarInverseBackground, 25%)
@navbarInverseSearchBackgroundFocus	@white
@navbarInverseSearchBorder	@navbarInverseBackground
@navbarInverseSearchPlaceholderColor	#ccc

Dropdowns
Variable names Values
@dropdownBackground @white
@dropdownBorder @borderColor
@dropdownLinkBackgroundHover @blueLighter

reset.less: Resets the default values and the h1, h2 ... h6 tags.

Variable names	Values
@dropdownBackground	@white
@dropdownBorder	@borderColor
@dropdownLinkBackgroundHover	@blueLighter

mixins.less: Defines mixins and functions. At present, eXo Platform reuses all mixins of bootstrap. The following mixins are often used:

For CSS3 properties:

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

For backgrounds:

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  color: @textColor;
  text-shadow: @textShadow;
  #gradient > .vertical(@primaryColor, @secondaryColor);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
  ...
}

For font:

#font > .sans-serif-bold(@fonSize,@fontWeight,@lineHeight);
  text-shadow: 0px 0px 1px @shadowColor ;

The followings are common mixins of eXo Platform:

For panel:

.uiBox() {
  .border-radius(@baseBorderRadius);
  .box-shadow(0px 2px 4px -1px rgba(35,44,48,0.18));
  border: 1px solid @tableBorder;
  background: @white;
  margin: 0 0 @baseLineHeight 0;
  .title {
    background-color:  @grayWhiteSmoke;
    border-bottom: 1px solid @tableBorder;
    .box-shadow(0 1px 2px rgba(13, 13, 13, 0.2));
    .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
    padding: 8px 10px;
    line-height: @baseLineHeight;
    margin: 0;
    word-wrap: break-word;
    .actionIcon {
      margin: -3px 0;
    }
    + .uiGrid tbody {
      .box-shadow(0px 0px 0px transparent);
    }
  }

.uiGrayLightBox(){
  padding: 8px 9px;
  border: 1px solid @tableBorder;
  background: @grayWhiteSmoke;
  .border-radius(@baseBorderRadius);
  .box-shadow(0px 1px 2px rgba(0,0,0,.06));
  label {
    display: inline-block;
  }
  input {
    margin-bottom: 0px;
  }
}

For creating effect when hovering on an icon:

.actionIcon(){
  .uiActionWithLabel;
  padding:2px 4px;
  vertical-align: middle;
  &:active,&:focus,&.active {
    #StatusElements > .StatusActive(0px 0px 10px 0 rgba(0, 0, 0, 0.15) inset);
  }
}

For Avatar:

.circleBorderAvatar(@size) {
  #gradient .vertical(@white, @btnBackgroundHighlight);
  .square(@size);
  .border-radius(100px);
  .box-shadow(0px 2px 4px rgba(13px, 13px, 13px, 0.27));
  border: 1px solid #b1b1b1;
  padding: 5px;

  img {
    .border-radius(100px);
    .square(@size);
  }
}

.roundedCornerAvatar(@size, @radius) {
  .square(@size);
  img {
    .border-radius(@radius);
    .square(@size);
  }
}

Besides, there are other sub-folders in the less folder. Each of them defines a component.

Common components

This section shows you the common components used for eXo Platform. Refer to eXo UX Guidelines to know how to use these common components.

Common components overridden from the bootstrap include:

Breadcrumbs
Button groups
Buttons
Dropdown
Form
LabelsBadges
Notifications (Alerts)
Pagination
Popover
Popup(Modals)
Progress bars
Sprites( icons)
Tables
Tabs
Tooltips
VerticalTabs(Accordion)

The followings are common components of eXo Platform:

CalendarBox
CalendarPicker
Gadget
LanguageSelector
Portlets
- SiteNavigationPortlet
- UIAccountPortlet
- UIApplicationRegistryPortlet
- UIOrganizationPortlet
- UITabbedDashboardPortlet
PortletThemes
Portal
- UIEditInlineWS
- UIPageBrowser
SearchInput
Tree
UIPage
UISelector
Vote
VtabInputSet
Wizard
Panel, Avatar which are defined in mixin.less.

Portlet themes

The general structure of portlet themes is as follows:

Less file: /webapp/skin/less/PortletThemes/Style.less.
Image folder: /webapp/skin/images/PortletThemes/.