public interface Skinning
setStyleName() or
 setBackgroundColor(), or you can
 skin all
  components of the same class at once, by using Canvas.setDefaultProperties()
  to change the defaults for the class.
  
 
 
  CSSStyleName for more details
 about correct
       usage.
  skin_styles.css)
  load_skin.js)
  
         skin_styles.css
         load_skin.js
         images/
             ListGrid/
                 sort_ascending.gif
                 ...
             Tab/
             ... other directories containing
                 component or shared media ...
  
  Custom Sass Skinning discussion
  
  Smart GWT can make use of CSS3 features to render user interface component 
  details such as rounded corners, gradients and drop-shadows. Prior to the wide adoption
  of CSS3 by browsers such UI details could only be achieved by writing out HTML structures
  including images.
  Using images is a less efficient approach - it leads to a more complex DOM structure and
  increased server load to retrieve media.
  
Smart GWT's most recent builtin skins (the Flat series, comprising Tahoe, Stratus, Twilight and Obsidian), will always rely on CSS3 features for certain appearance details. If loaded in a browser with no CSS3 support (such as Internet Explorer 8), developers can expect to see some degradation in appearance (lack of certain drop-shadows, rounded edges becoming square, etc).
Three of Smart GWT's other most commonly used skins, Enterprise, EnterpriseBlue and Graphite will conditionally make use of CSS3 features. These skins have a "CSS3 mode" in which many images required by the skin are replaced with CSS3 settings that appear nearly identical to the image-based appearance.
  For these skins, CSS3 mode is automatically used in modern browsers such as 
  Firefox, Chrome, Safari, IE 9 in standards mode, and IE 10+.
  Internet Explorer version 8 and earlier does not have sufficient
  CSS support to create a close match to the existing image-based skin, so CSS3 mode is not
  enabled by default. If CSS3 mode is manually enabled for IE when not automatically enabled,
 this will result in a degraded appearance that is similar across IE6, 7, and 8: rounded
 elements
  such as tabs will become square, and backgrounds will have lower quality if not disappear.
  
  To override the default decision on whether to use CSS3 support, set the JavaScript global
  variable isc_css3Mode before any of the Smart GWT libraries are loaded.  For
  example:
  
    <script>isc_css3Mode = "on";</script>
  
  Possible settings are:
  For more control than the above settings provide, you can create a custom skin based on one
  of the above 3 skins and modify load_skin.js - whether CSS3 mode is used is controlled by a
  JavaScript variable useCSS3 defined in this file.
  
  Smart GWT provides APIs that allow the general spaciousness of an application 
  to be increased beyond the design of the loaded skin.  You can see the feature in use in our
 online showcase, by loading
 a sample 
  and picking options from the Density picker shown above it.
  
  The Density mechanism effectively zooms the application, by calling
 Canvas.resizeFonts() and Canvas.resizeControls(), APIs which
 uniformly alter the 
  sizes of fonts in the skin's CSS-styles, and the heights of most builtin widgets, by the 
  pixel amounts passed to them.  These calls must be made after the skin is loaded, but before
  any components have been created.
  
  You can apply any amounts you wish, to get your desired look - the Densities available in 
  the online Showcases are achieved with the following calls 
  to resizeFonts and resizeControls:
  
| Density | Settings | 
|---|---|
| Dense | resizeFonts(0) & resizeControls(0) | 
| Compact | resizeFonts(1) & resizeControls(2) | 
| Medium | resizeFonts(2) & resizeControls(4) | 
| Expanded | resizeFonts(2) & resizeControls(6) | 
| Spacious | resizeFonts(3) & resizeControls(10) | 
Smart GWT also makes use of a CSS technique known as "spriting" to improve performance when rendering certain user interface images. This technique improves performance when rendering a number of small images within an application. Instead of loading a separate image file for each element, this technique involves creating a single composite image file consisting of smaller images sewn together, and using css background-sizing and offset to display the desired portion of this larger image within elements on a page.
  This reduces the overall file size for the media as the combined image's size will 
  typically be significantly less than the sum of the sizes of the smaller images. It also
  allows the browser to issue a single HTTP request for the composite image instead of
  separate requests for each image element showing parts of this composite image.
 For example, the up and down arrow images of a SpinnerItem in
  the normal, "Focused", and "Disabled" states can be combined into one image. The file size of
  the combined image is typically ~65% smaller than the sum of the file sizes of the 6
  constituent images, and a single HTTP request provides media for all 6 states.
  
Spriting typically results in reduced load times and eliminates noticeable delays in changes of component appearance while the browser downloads a required image. It is natively supported in all browsers.
  One consideration when using spriting is how to handle images being rendered at different
  sizes on the page. Simply increasing the size of an element using CSS to display a 
  portion of a larger background image will not change the scale of that image - instead 
  more of the image will be revealed to the user. This can result in visual glitches,
  for example, the user may be able to see other sprited elements from the larger
  background image.
  If the "native" size of the image sprite is known as well as the desired rendered size
  scaling can be achieved. For Smart GWT image attributes that support the special
 sprited image URL format, this can be
 specified, allowing the image to
  be rendered at various sizes.
  
  Our Flat series of skins (Tahoe, Stratus, Twilight
  and Obsidian) make use of the sprite-URL capability to ensure that sprited images 
  appear correctly regardless of the size at which they are being drawn.
  The Enterprise, EnterpriseBlue, and Graphite skins 
  also support spriting of user interface images, but do so via settings embedded in the css 
  applied to certain elements instead of using the sprite-URL capability. As such if certain 
  component metrics (such as the height of a component or padding) are changed, then the image 
  sprites may no longer work. In this case, spriting can be disabled by setting the JavaScript 
  global variable isc_spriting to "off" before any of the Smart GWT libraries 
  are loaded.
  For example:
  
    <script>isc_spriting = "off";</script>
  
  Possible settings are:
  
Skin Editor tool, which can be accessed online, or
 locally in your
 environment if you have a Pro or
 better 
  license. 
  
  For the most modern skins (Tahoe, Stratus, Twilight and 
  Obsidian), the recommended approach is to use the 
 Skin Editor tool, which provides UI for the
 majority of the skin 
  CSS and takes advantage of the Sass templates 
  provided with those skins.  You can also manually affect the Sass templates - see the 
 Custom Sass Skinning discussion for more
 detail on leveraging 
  that mechanism to customize a skin.
  
Starting from the name of the component
Given a Smart GWT component that you want to skin, open its JavaDoc:
Button.baseStyle
  Img.src
  "AutoChildren" and check the reference
 for the type of
 the AutoChild for settable properties.  For example, Window.minimizeButton is an
 ImgButton and therefore supports ImgButton.src.  
  Starting from a running example
Specific browsers offer alternate approaches to quickly discover the images or style names being used for a part of a Smart GWT component's appearance:
 Properties that refer to images by URL, such as Img.src and Button.icon, are
  specially interpreted in Smart GWT to allow for simpler and more uniform image URLs,
  and to allow applications to be restructured more easily.
  
  Unlike the URL used with an HTML <IMG> element, the image URL passed to a Smart GWT
 component is not assumed to be relative to the current page.  See SCImgURL for a
  full explanation of the default application image directory, and the meaning of the "[SKIN]"
  prefix.
  
  Default image URLs for Smart GWT components are specified in load_skin.js via
  JavaScript, using calls to  Class.addProperties() and
   Class.changeDefaults().  For example, the load_skin.js file
  from the "Enterprise" skin includes the following code to establish the media used by
  Window.minimizeButton:
  
     isc.Window.changeDefaults("minimizeButtonDefaults", {
          src:"[SKIN]/Window/minimize.png"
     });
  
  NOTE: These are JavaScript APIs and hence do not appear in SmartGWT JavaDoc - you may want to refer to the SmartClient Reference available at Isomorphic.com for these specific APIs.
Many Smart GWT components must know some image sizes in advance, in order to allow those components to autosize to data or content.
 For example, the ImgTabs used in TabSets are capable of automatically sizing
 to a variable length Tab.title.  To make
 this possible, Smart GWT must know the
  sizes of the images used as "endcaps" on each tab in advance.
  
  Like image URLs, image sizes are specified in load_skin.js.  The following code
  sample establishes the default size of the "endcaps" for tabs, by setting a default value
  for ImgTab.capSize:
  
      isc.ImgTab.addProperties({
          capSize:4
      })
  
  
Some components or areas within components, including buttons and the cells within a grid, are "stateful", meaning that they can be in one of a set of states each of which has a distinct visual appearance.
  Stateful components switch the CSS styles or image URLs they are using as they transition
  from state to state, appending state information as suffixes on the style names or URL.
 See Img.src and Button.baseStyle for details and examples.
  
Smart GWT has built-in logic to manage a series of state transitions, such as:
ImgButton.showRollOver, allow you to control whether the
 component will switch CSS style or image URL when the component transitions into a given state.
  
 A StretchImg is a Smart GWT component that renders out a
 compound image composed 
  of 3 image files: two fixed-size end-cap images and a stretchable center segment.  Like 
  stateful components, the names of each image segment is appended to the image URL as a 
  suffix.  See StretchImg.src for details.
  
 Similar to a StretchImg, an EdgedCanvas provides an
 image-based decorative edge
  around and/or behind another component, with up to 9 segments (a 3x3 grid).  Decorative
 edges can be added to any component by setting showEdges:true.
  EdgedCanvas is also used to construct drop-shadows, which can be enabled on any component 
  via showShadow:true.
  
In rare situations, such as trying to share a skin between a SmartClient and Smart GWT application, you may have a SmartClient class that has been defined to hold certain skin settings where there is no corresponding Smart GWT class. For example, you might have a SmartClient subclass of ListGrid called "LedgerGrid" that changes cell styles to appear more like a ledger.
In this case, you can generally use the Smart GWT class that is the nearest superclass of the SmartClient class (ListGrid in this case), then use a call to setScClassName("LedgerGrid") to cause the SmartClient class to be used as the underlying SmartClient class used by the GWT ListGrid instance.
If you're creating a custom skin, you can place JavaScript snippets such as those shown above in your custom skin's load_skin.js file. If you prefer not to create a custom skin for small customizations, you can execute JavaScript via a JSNI method in your Java code. With this latter approach, be sure to change "isc." to "$wnd.isc." wherever it appears, and to call the JSNI method before creating any SmartGWT components.
  In most cases, using newer CSS features such as CSS3 prefix attribute selectors or CSS3
  pseudo-classes in a skin will just work, provided the browser supports those CSS features.
  However, in some cases, Smart GWT needs to be able to extract style information from
  CSS style declarations. For this reason, only single class name selectors are officially
  supported (e.g. .myButton, .myButtonDown) and @-rules are not supported.