[e4-dev] Stylin'!

[Kevin McGuire <Kevin_McGuire@xxxxxxxxxx>]

Hi all,

1) As of today's 3pm build, pretty well all aspects of the new tab look
will be styleable.  That is, there are no hard coded values to speak
of.

To give you an idea, in bold are some
of the more interesting properties you can change:

ETabFolder {
        background-color:
rgb(246, 246, 251);
        simple:
true;
        maximize-visible:
false;
        minimize-visible:
false;
        webby-style:
true;
        margin:
2px;        
        tab-margin-offset:
4px;

        border-color:
rgb(201, 200, 204)
/* Can be expressed individually
        border-top-color:
rgb(201, 200, 204);
        border-bottom-color:
rgb(201, 200, 204);
*/        
}

ETabFolder.active {
        background-color:
rgb(224, 226, 235);
}
   
ETabItem {
        color:
black;
        background-color:
rgb(241, 240, 245);  /* unselected tabs can have diff color than folder
background */
        font:
normal;
        padding-top:
4px;
        padding-bottom:
4px;
        margin-top:
3px;
        margin-left:
2px;
        margin-right:
0px;
        border-color:
rgb(208, 207, 212);
}

ETabItem:selected {
        background-color:
rgb(255, 255, 255) rgb(246, 245, 250); 
        padding-top:
7px;  /* make the selected tab a bit taller */
}

ETabItem.active {
        background-color:
rgb(241, 240, 245);
}

ETabItem.active:selected {
        background-color:
rgb(255, 255, 255) rgb(255, 247, 229); 
}

Note that color values can be in the
form rgb(), #RRGGBB, or colorName.

You can find the stylesheet in 
        org.eclipse.e4.ui.examples.legacy.workbench/css/webby.css.
 

If you've downloaded the self hosting
SDK, you can find it on disk in:
        eclipse\plugins\org.eclipse.e4.ui.examples.legacy.workbench_0.9.0.vSomeBuildDate\css\webby.css


2) Changes in the style sheet will be
picked up in the self hosting workbench but you need to tell it that the
style sheet changed.  To do so, there is a menu 
        Window->Reload
Style Sheet 

This will re-read the style sheet in
and update the UI [1].  Thus you can modify the style sheet on disk
and then click the menu to live update the workbench look.  You
don't need to restart Eclipse.


3) If you decide to create a new CSS
file, you''ll need to change the following property in org.eclipse.e4.ui.examples.legacy.workbench/plugin.xml:
         <property
         
     name="applicationCSS"
         
     value="platform:/plugin/org.eclipse.e4.ui.examples.legacy.workbench/css/webby.css">
         </property>

to point to your new file.  This
of course will require a restart in order to be picked up.


I encourage you to play with the styling
capability and come up with your own look to the workbench.  Submit
it via a bug and share it with others!

Regards,
Kevin

[1] Time permitting, this might get
upgraded to prompting for sibling css files, see bug
278877