Skip to main content

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.

Jump to: navigation, search

Difference between revisions of "Eclipse4/CSS"

(Editing the CSS in eclipse)
m (Hide the Quick Access bar)
(14 intermediate revisions by 4 users not shown)
Line 7: Line 7:
 
== Editing the CSS in eclipse ==
 
== Editing the CSS in eclipse ==
  
You can use our light-weight CSS editor on the Appearance preference page.  Go to the E4 install site and install the ''E4 CSS editor (Incubation)''.  After a restart, you can go to the ''General > Appearance'' Preference page and modify the CSS.  Some changes require another restart to take effect, some are instantaneous.
+
You can use our light-weight CSS editor to modify your look and feel.  Go to the E4 install site and install the ''E4 CSS editor (Incubation)''.  After a restart, you can go to the ''General > Appearance'' Preference page and modify the CSS.  Some changes require another restart to take effect, some are instantaneous.
 +
 
 +
* E4 update site http://download.eclipse.org/e4/updates/0.12
 +
** this link goes in ''Help>Install New Software'' not a browser.
 +
 
  
 
[[Image:CssPreferenceEditor.png]]
 
[[Image:CssPreferenceEditor.png]]
 +
 +
== Modifying your own style sheet ==
 +
 +
You can customize some of the new look and feel by editing the style sheet on the ''General > Appearance'' Preference page.
 +
 +
=== Removing customizations ===
 +
 +
Use the '''Restore Defaults''' button to remove any customizations you've added to the style sheets and reset it to what's currently in ''plugins/org.eclipse.platform''.
 +
 +
=== Switch to single editor tab mode  ===
 +
 +
You can switch to single editor tab mode by adding the following CSS
 +
 +
#org-eclipse-ui-editorss CTabFolder.MPartStack {
 +
    swt-single: true;
 +
}
 +
 +
=== Switching tab styles ===
 +
 +
The Classic theme  supports both 2.1 and 3.x style tabs.  You would edit the '''swt-simple''' property in your style sheet in ''.MPartStack''.  It depends on the '''swt-tab-renderer''' being set to ''null''.
 +
 +
.MPartStack {
 +
  swt-tab-renderer: null;
 +
  swt-selected-tabs-background: #FFFFFF #ECE9D8 100%;
 +
  swt-simple: true;
 +
  swt-mru-visible: true;
 +
}
 +
 +
=== Reducing the tab font size ===
 +
 +
You can change the tab font size by editing the existing ''.MPartStack'' entry:
 +
 +
<source lang="css">
 +
.MPartStack {
 +
font-size: 9;
 +
swt-simple: false;
 +
swt-mru-visible: false;
 +
}
 +
</source>
 +
 +
=== Hide the Quick Access bar  ===
 +
 +
<source lang="css">
 +
#SearchField {
 +
    visibility: hidden;
 +
}
 +
</source>
 +
'''[[Bug:]]''' This does not what you might expect. This CSS snippet just makes the field invisible. It is becomes colored as the toolbar background. But [[it still takes the same place in the toolbar.]] If you expect to get more free place in the toolbar, you won't get it. This happens on Windows 7.
 +
 +
== Using GUI Style Editor ==
 +
[[image:ChromeTheme.png]]
 +
 +
[https://github.com/jeeeyul/eclipse-themes Jeeeyul's Eclipse Themes - Chrome] provides convinced way to modify CSS with WYSISYG editor.
 +
 +
 +
 +
= CSS implementation details =
 +
 +
* [[E4/CSS]]
 +
* [[E4/CSS/SWT Mapping]]
 +
* [[Eclipse4/RCP/CSS]]

Revision as of 13:15, 2 January 2013

CSS in Eclipse 4.2

Some of the preferences from the General > Appearance > Colors and Fonts Preference page have been overridden by the CSS themes used in Eclipse 4.2.

The Eclipse SDK uses themes to group CSS style sheets for styling the workbench. They can be found in INSTALL/plugins/org.eclipse.platform_4.2.0.qualifier/css.

Editing the CSS in eclipse

You can use our light-weight CSS editor to modify your look and feel. Go to the E4 install site and install the E4 CSS editor (Incubation). After a restart, you can go to the General > Appearance Preference page and modify the CSS. Some changes require another restart to take effect, some are instantaneous.


CssPreferenceEditor.png

Modifying your own style sheet

You can customize some of the new look and feel by editing the style sheet on the General > Appearance Preference page.

Removing customizations

Use the Restore Defaults button to remove any customizations you've added to the style sheets and reset it to what's currently in plugins/org.eclipse.platform.

Switch to single editor tab mode

You can switch to single editor tab mode by adding the following CSS

#org-eclipse-ui-editorss CTabFolder.MPartStack {
    swt-single: true;
}

Switching tab styles

The Classic theme supports both 2.1 and 3.x style tabs. You would edit the swt-simple property in your style sheet in .MPartStack. It depends on the swt-tab-renderer being set to null.

.MPartStack {
  swt-tab-renderer: null;
  swt-selected-tabs-background: #FFFFFF #ECE9D8 100%;
  swt-simple: true;
  swt-mru-visible: true;
}

Reducing the tab font size

You can change the tab font size by editing the existing .MPartStack entry:

 .MPartStack {
 	font-size: 9;
 	swt-simple: false;
 	swt-mru-visible: false;
 }

Hide the Quick Access bar

#SearchField {
     visibility: hidden;
}

Bug: This does not what you might expect. This CSS snippet just makes the field invisible. It is becomes colored as the toolbar background. But it still takes the same place in the toolbar. If you expect to get more free place in the toolbar, you won't get it. This happens on Windows 7.

Using GUI Style Editor

ChromeTheme.png

Jeeeyul's Eclipse Themes - Chrome provides convinced way to modify CSS with WYSISYG editor.


CSS implementation details

Copyright © Eclipse Foundation, Inc. All Rights Reserved.