| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="default.css" media="screen" /> |
| </head> |
| <body> |
| |
| <h2>Theming</h2> |
| |
| <p> |
| RAP widgets can be extensively styled to create a custom look & feel. |
| This is done using CSS-syntax, so there is no need to touch any Java-code. |
| </p> |
| <p> |
| Theming can influence the layout by adding custom padding, define fonts, |
| colors and images used by widgets, and even create rounded borders, gradients |
| and animations. |
| </p> |
| |
| <h3>Animations</h3> |
| <p> |
| You can see animations in this example in different places: |
| <dl> |
| <dt>Hover-effect on Buttons</dt> |
| <dd> |
| The buttons in the second row show an animated hover effect. |
| </dd> |
| <dt>Sliding Menus</dt> |
| <dd> |
| Click on the items in the toolbar to see differently styled and animated |
| menus. |
| </dd> |
| <dt>Fading Tooltips</dt> |
| <dd> |
| Staying over any of the button will fade-in a tool-tip. |
| </dd> |
| <dt>Fading overlay for modal Shells</dt> |
| <dd> |
| Clicking the "About"-button in the upper left will open a modal |
| dialog with an animated overlay. |
| </dd> |
| </dl> |
| </p> |
| |
| <h3>Custom Variants</h3> |
| <p> |
| Using <em>custom variants</em>, single widgets can be styled differently from |
| others, as demonstrated on this page. A custom variant is a name that can |
| be attached to widgets in Java code and referred to in the CSS, just like |
| classes in HTML. |
| </p> |
| |
| </body> |
| </html> |
