I’ve been learning about styling using CSS in Eclipse 4. I’m capturing some of the steps that I’ve been following with these posts. Think of this as more of a journal than any sort of “how to” on the topic.
The CSS Spy is a handy resource for figuring out how to refer the various parts of the user interface and sorting out the kinds of properties that you can apply. It lets you drill into the properties of the various UI elements, but doesn’t yet let you actually modify any values and modify many of them. [correction: CSS Spy lets you change some of the properties]
Rather than install the CSS spy into my Eclipse for RCP and RAP Developers Juno M5 instance (available on the “Developer Downloads” page), I pulled the code from the e4 Incubator project‘s Tools Git repository, and have been running it in a debug launch of Eclipse. Being incubator code, it’s a little rough around the edges, but it’s still a pretty useful bit of software.
The first rough bit that I encountered was the key sequence to open the CSS Spy: Alt+Ctrl+F4 means something to Fedora 14 and, instead of getting the CSS Spy, keying that particular combination switched me to a new terminal. Instead, I used the handy “Quick Access” feature to open the CSS Spy (just type “CSS Spy” into the entry field and click on the corresponding entry in the popup).
The CSS Spy provides a handy hierarchical breakdown of the workbench UI. It shows the part type, its corresponding CSS Class and–if specified–the CSS Id. When you click on an entry in the tree, it outlines the corresponding UI element in the workbench. In the above snapshot, I’ve highlighted the CTabFolder that’s shown highlighted in red. This particular instance of CTabFolder has the “MPartStack” CSS Class and id “topLeft”. Using this information, I can apply styles as generally or specifically as I’d like.
There are several other parts that share the same CSS class. I can style them all with an class entry in my CSS file:
.MPartStack {
font-size: 11;
simple: false;
mru-visible: false;
outer-keyline-color: #B4B4B4;
background-color: #E2E2E2;
}
I can specifically target the “topleft” MPartStack by including the id in my CSS file:
.MPartStack#topleft {
outer-keyline-color: #000000;
}
With this combination of styles, the “topleft” stack will be outlined in black (#000000), but all other stacks will be oulined in a medium-darkish grey (#B4B4B4). The “topleft” stack will inherit all of the remaining properties from the more general entry.
One of the things I started exploring today is how one might set the background colour of an element to a colour defined by the system. i.e. how do you leverage system properties when stylin’? More–hopefully–on this later.
