Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "E4/UI/Running CSS demos"
(→CSS'ified RCP Mail Application) |
|||
| Line 2: | Line 2: | ||
=== CSS'ified RCP Mail Application === | === CSS'ified RCP Mail Application === | ||
| − | [[Image:e4_css_mail.jpg]] | + | [[Image:e4_css_mail.jpg]] <br> |
This is the RCP mail app example, with CSS goodness added. Also acts as an example of how to add CSS to your application. | This is the RCP mail app example, with CSS goodness added. Also acts as an example of how to add CSS to your application. | ||
| + | Features: | ||
| + | * Entirely styled with a CSS stylesheet. | ||
| + | * Notice the date is in italics, this is to indicate that the message is unread. Clicking on the mail icon in the toolbar will mark the message as read, and the italics will go away. This demonstrates use of changing the CSS class name of an element to switch which style it uses: | ||
| + | |||
| + | <pre>.messageDateUnRead { | ||
| + | font-style: italic; | ||
| + | } | ||
| + | |||
| + | .messageDateRead { | ||
| + | font-style: normal; | ||
| + | } | ||
| + | </pre> | ||
=== CSS SWT Editor === | === CSS SWT Editor === | ||
Revision as of 18:10, 6 February 2009
There are three CSS examples available.
CSS'ified RCP Mail Application
This is the RCP mail app example, with CSS goodness added. Also acts as an example of how to add CSS to your application.
Features:
- Entirely styled with a CSS stylesheet.
- Notice the date is in italics, this is to indicate that the message is unread. Clicking on the mail icon in the toolbar will mark the message as read, and the italics will go away. This demonstrates use of changing the CSS class name of an element to switch which style it uses:
.messageDateUnRead {
font-style: italic;
}
.messageDateRead {
font-style: normal;
}
CSS SWT Editor
This Java application provides a number of SWT controls and an editor text area with a live stylesheet. Try modifying the style sheet to see the changes in the widgets.
CSS Nebula Example
We have CSS support for styling the Nebula Gallery widget (as seen in the e4 photo demo). This little example is like the SWT editor above, but for styling the Gallery widget.