| <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> |