It's All About the Platform.

  • March 11, 2014

Skyros - The New Release 8 Skin

Richard Bingham
Senior Development Manager

Why A New Skin?

The name Skyros, named after the Greek island, embodies some of the key visual aspects in this new look and feel; specifically, a fresh, lighter weight and cleaner appearance. Skyros leverage's the newest standard in page stylesheets, CSS3, and is less image-based than the earlier FusionFX-simple skin, improving speed, flexibility, and consistency. As you can see in the screenshots below, this includes changes to things like borders & gradients in all pages.

It is also easier to customize, for example all colors have been organized into related anchor and derivative groups, making extensive changes much easier. This will be especially important to support the forthcoming online skin editor tool, with Skyros the first step towards this.

Specific design changes includes a focus on current UI visual design trends, such as a flatter, cleaner display. It uses light and/or white color themes, with a few touches of well-placed color. In addition reduced use of gradients and borders replaces background images, enhancing the lighter weight feel. The shift from using images helps customization since regenerating images to fit with the changes are no longer required.

Obviously support for the existing FusionFX-simple continues alongside Skyros, at least until Release 9. The following same screens illustrate the visual and style differences.

Fusion Applications (Purchasing) in Release 7 

Fusion Applications (Purchasing) in Release 8

Skin Customization

For example, suppose you want to change text colors across the entire application, up until now you'd need to set the property for each ADF
component. With Skyros this is now included in the new skin stylesheet itself, making things much more controllable.

In moving properties like colors and borders into the skin there are a few DOM changes to the UI, however these affect only the visual design and no functionality whatsoever.

If you have made customizations (extended .css file) to you FusionFX-simple skin, you can migrate them into Skyros by recreating them (using the JDeveloper-like Skin Editor) and redeploying the related trinidad-skins.xml file with the changed 'extends line' pointing to your new value of 'skyros-v1.desktop'. More detail can be found in the Extensibility Guide.

The actual setting still for the currently active skin is still the profile option FND_CSS_SKIN_FAMILY, and whilst it may be possible to set this at levels other than 'site', it is not recommended.

Similarly all
references to in-line style attributes have been removed in the transition to Skyros and as such this needs to be reflected in any custom UI's that have been added as well, such as specifying an image height
and width values.


Generally speaking skin customization still requires a certain amount of back-end system access, and as such offers more support for on-premises deployments. As mentioned above, this will change with the browser-based skin editor currently being developed and tested for inclusion in Release 9, and where SaaS deployments will then offer support for run-time CSS adjustments.

If you have a new deployment or have not already extended the Release 7 (FusionFX-simple) skin, then Skyros will
automatically be set as the default skin. If the FusionFX-simple skin was extended then it will
continue as the skin after the upgrade, until explicitly changed.

In addition, for migrations between instances you may notice that the Customization Set Migration export feature now includes all skin customizations, starting in Release 8.

One last thing to note, for older non-CSS3 supported browsers, such as IE7, you
may not see some of the Sykros changes. From our testing we found the following UI components have been observed as not displaying the new formats: rounded buttons, gradients, shadows of buttons dialogs and tabs. We recommend you work with your desktop provider to move to a modern compliant browser.


Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.