Home » Eclipse Projects » Remote Application Platform (RAP) » [New Target Problem] Custom Theming of CTabFolder(Problem with CTabItem:selected)
[New Target Problem] Custom Theming of CTabFolder [message #907211] |
Mon, 03 September 2012 14:34  |
Eclipse User |
|
|
|
I've got a problem with my css file to custom the display of CTabFolder.
I speak about "TabFolder" from Views into a RAP Perspective.
The theme for "CTabItem:selected" doesn't work with RAP Targets 1.5.0-M7 and 2.0.0-M1!?
Remarks; the same theme works into the RAP Target 1.5.0M2
Here is my css (part):
CTabItem {
font: bold 12px sans-serif; /* WORKS */
color: gray; /* WORKS */
background-color: transparent; /* WITH A COLOR, DOESN'T WORK !!! */
background-image: none; /* WORKS */
padding: 5px; /* WORKS */
spacing: 0px; /* WORKS */
text-shadow: none; /* WORKS */
}
CTabItem:selected {
color: white; /* DOESN'T WORK */
background-color: #4282AD; /* DOESN'T WORK */
background-image: gradient( /* DOESN'T WORK */
linear, left top, left bottom,
from( black ),
color-stop( 52%, black ),
color-stop( 48%, #4282AD ),
to( #4282AD )
);
}
I need help / ideas
Thanks in advance
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #907929 is a reply to message #907211] |
Tue, 04 September 2012 11:05   |
Tim Buschtoens Messages: 396 Registered: July 2009 |
Senior Member |
|
|
Hi.
It seems to work fine for me. What is displayed instead of the values
you give? (E.g. when the item is selected, what color is the text, if
its not white?) Also, is this part of a complete theme or a
contribution? How do you register it?
Greetings,
Tim
Am 03.09.2012 16:34, schrieb Francis Delsinnes:
> I've got a problem with my css file to custom the display of CTabFolder.
> I speak about "TabFolder" from Views into a RAP Perspective.
>
> The theme for "CTabItem:selected" doesn't work with RAP Targets 1.5.0-M7
> and 2.0.0-M1!?
> Remarks; the same theme works into the RAP Target 1.5.0M2
>
> Here is my css (part):
>
> CTabItem {
> font: bold 12px sans-serif; /* WORKS */
> color: gray; /* WORKS */
> background-color: transparent; /* WITH A COLOR, DOESN'T WORK
> !!! */
> background-image: none; /* WORKS */
> padding: 5px; /* WORKS */
> spacing: 0px; /* WORKS */
> text-shadow: none; /* WORKS */
> }
>
> CTabItem:selected {
> color: white; /* DOESN'T WORK */
> background-color: #4282AD; /* DOESN'T WORK */
> background-image: gradient( /* DOESN'T WORK */
> linear, left top, left bottom,
> from( black ),
> color-stop( 52%, black ),
> color-stop( 48%, #4282AD ),
> to( #4282AD )
> );
> }
>
>
> I need help / ideas
> Thanks in advance
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #907962 is a reply to message #907929] |
Tue, 04 September 2012 13:45   |
Eclipse User |
|
|
|
Currently:
the text color of my selected tab is not "white" but "black"...
the background of my selected tab is a gradient between light-blue and mid-blue (not my gradient)
I've defined an extension into the MANIFEST (plugin.xml)
=> "org.eclipse.rap.ui.themes"
with a css file
with an Id and a string name
I've configured the extension "org.eclipse.rap.ui.branding" to use my theme's Id.
Actually, all css are fine computed for RWT controls but for the specific part of the RAP workbench (CTabFolder, CTabItem), it doesn't work!
Here is the content of my customTheme.css file
ProgressBar {
background-color: white;
border: 1px solid #74808C;
}
ProgressBar-Indicator {
background-color: #4282AD;
}
Button[PUSH], Button[TOGGLE], Button[RADIO] {
border: 1px solid #74808C;
color: #262626;
background-image: gradient(
linear, left top, left bottom,
from( #FFFFFF ),
color-stop( 48%, #FEFEFE ),
color-stop( 52%, #FEFEFF ),
to( #BDC5D9 )
);
}
Button[PUSH]:hover, Button[TOGGLE]:hover, Button[RADIO]:hover {
border: 1px solid #BDC5D9;
color: #4282AD;
background-image: gradient(
linear, left top, left bottom,
from( #BDC5D9 ),
color-stop( 52%, #FEFEFF ),
color-stop( 48%, #FEFEFE ),
to( #FFFFFF )
);
}
Button[FLAT] {
border: none;
color: transparent;
background-image: none;
}
Button[FLAT]:hover {
border: none;
color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #BDC5D9 ),
color-stop( 52%, #FEFEFF ),
color-stop( 48%, #FEFEFE ),
to( #FFFFFF )
);
}
Button[PUSH]:disabled, Button[TOGGLE]:disabled, Button[FLAT]:disabled, Button[RADIO]:disabled {
border: 1px solid #BDC5D9;
color: #74808C;
background-image: none;
background-color: white;
}
Composite {
animation: none;
background-color: transparent;
background-image: none;
border: none;
box-shadow: none;
opacity: 1;
padding: 0px;
}
Composite[BORDER] {
border: none;
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #4282AD ),
color-stop( 20%, #4282AD ),
color-stop( 80%, black ),
to( black )
);
padding: 0px;
spacing: 0px;
}
DateTime {
background-color: white;
border: none;
color: #262626;
}
DateTime-Calendar-Day:hover {
background-color: #4282AD;
border: none;
color: #FFFFFF;
}
DateTime-Calendar-Day:selected {
background-color: #FAB75F;
color: #525252;
}
DateTime-Calendar-Navbar {
border: 1px solid #5FBCFA;
background-color: #4282AD;
color: #FFFFFF;
}
DateTime-Calendar-Navbar:disabled {
border: 1px solid #5F5F5F;
background-color: #424242;
color: #FFFFFF;
}
Combo, CCombo {
border: none;
background-image: none;
background-color: white;
}
Combo-Field, CCombo-Field {
padding: 2px;
}
Combo-List, CCombo-List {
border: none;
box-shadow: 0px 0px 5px rgba( 84, 136, 48, 0.85 );
}
Combo-FocusIndicator, CCombo-FocusIndicator {
background-color: white;
margin: 0px 0px 0px 0px;
}
Combo-Button-Icon, CCombo-Button-Icon {
background-image: url( icons/comboButton.png );
}
Menu {
border: 2px solid #5FBCFA;
border-radius: 5px;
background-image: none;
background-color: white;
box-shadow: 0px 0px 10px rgba( 95, 188, 250, 0.85 );
opacity: 1;
}
MenuItem:hover {
background-color: #7aaed1;
background-image: none;
color: black;
}
Shell-Titlebar {
color: white;
font: bold 12px sans-serif;
background-image: gradient(
linear, left top, left bottom,
from( black ),
to( #4282AD )
);
}
Shell, Shell:inactive {
border: 2px solid black;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba( 0, 0, 0, 0.45 );
}
Shell:maximized {
border: none;
box-shadow: 0px 0px transparent;
}
Shell[SHEET] {
border: none;
}
Widget-ToolTip {
border: 1px solid #5FBCFA;
background-image: none;
background-color: white;
color: #646464;
box-shadow: 0px 0px 10px rgba( 95, 188, 250, 0.45 );
}
Table {
background-color: white;
background-image: none;
border: 1px solid gray;
color: black;
}
Table-GridLine:horizontal {
color: #74808C;
}
Table-GridLine:vertical {
color: #4282AD;
}
TableColumn {
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #4282AD ),
color-stop( 52%, black ),
color-stop( 48%, black ),
to( black )
);
color: white;
font: bold 12px sans-serif;
padding: 5px;
}
TableColumn:hover {
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #7aaed1 ),
color-stop( 52%, #7aaed1 ),
color-stop( 48%, #7aaed1 ),
to( white )
);
color: black;
font: bold 12px sans-serif;
padding: 5px;
}
TableItem:even {
background-color: #d5dfe6;
background-image: none;
}
TableItem:selected {
background-color: #7d8d99;
background-image: none;
color: white;
}
TableItem:hover {
background-color: #7aaed1;
background-image: none;
color: black;
}
TableItem:selected:hover {
background-color: #597f99;
background-image: none;
color: white;
}
Table-Cell {
padding: 1px;
spacing: 0px;
}
Label, Label[BORDER] {
border: none;
background-image: none;
background-color: transparent;
}
Label[BORDER] {
color: white;
}
Text {
background-image: none;
background-color: white;
padding: 0px;
}
Text[MULTI] {
padding: 10px;
}
Sash {
border: none;
background-color: #4282AD;
}
ExpandBar {
border: none;
color: white;
}
ExpandItem {
border: none;
}
ExpandItem-Header {
border: none;
background-image: gradient(
linear, left top, left bottom,
from( #4282AD ),
color-stop( 20%, #4282AD ),
color-stop( 80%, #424242 ),
to( #424242 )
);
}
ExpandItem-Header:expanded {
border: none;
background-image: gradient(
linear, left top, left bottom,
from( #7aaed1 ),
color-stop( 52%, #7aaed1 ),
color-stop( 48%, #7aaed1 ),
to( white )
);
}
ExpandItem-Button {
background-image: url( icons/noexpanded.png );
}
ExpandItem-Button:hover {
background-image: url( icons/noexpandedHover.png );
}
ExpandItem-Button:expanded {
background-image: url( icons/expanded.png );
}
ExpandItem-Button:expanded:hover {
background-image: url( icons/expandedHover.png );
}
Group {
background-color: white;
border: none;
font: bold 13px sans-serif;
}
Group-Frame {
border: 1px solid #805a20;
border-radius: 5px;
margin: 15px 0px 0px 0px;
padding: 10px 2px 2px 2px;
}
Group-Label {
border: 1px solid #d99936;
border-radius: 2px;
background-color: white;
margin: 0px 0px 0px 0px;
padding: 2px 5px 2px 5px;
}
ScrollBar[VERTICAL] {
background-color: transparent;
background-image: gradient(
linear, left top, right top,
from( #d5dfe6 ),
color-stop( 5%, white ),
color-stop( 5%, white ),
to( #d5dfe6 )
);
border: none;
width: 16px;
}
ScrollBar[HORIZONTAL] {
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #d5dfe6 ),
color-stop( 5%, white ),
color-stop( 5%, white ),
to( #d5dfe6 )
);
border: none;
width: 16px;
}
ScrollBar-Thumb[VERTICAL] {
background-color: transparent;
background-image: gradient(
linear, left top, right top,
from( #d5dfe6 ),
color-stop( 20%, #d5dfe6 ),
color-stop( 80%, white ),
to( white )
);
border: 1px solid #7d8d99;
}
ScrollBar-Thumb[HORIZONTAL] {
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #d5dfe6 ),
color-stop( 20%, #d5dfe6 ),
color-stop( 80%, white ),
to( white )
);
border: 1px solid #7d8d99;
}
ScrollBar-UpButton, ScrollBar-DownButton {
background-color: transparent;
cursor: pointer;
}
ScrollBar-UpButton[VERTICAL] {
background-image: url( icons/scrollDown.png );
}
ScrollBar-DownButton[VERTICAL] {
background-image: url( icons/scrollUp.png );
}
ScrollBar-UpButton[HORIZONTAL] {
background-image: url( icons/scrollRight.png );
}
ScrollBar-DownButton[HORIZONTAL] {
background-image: url( icons/scrollLeft.png );
}
ToolBar, ToolBar[BORDER] {
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #4282AD ),
color-stop( 20%, #4282AD ),
color-stop( 80%, black ),
to( black )
);
border: none;
color: white;
opacity: 1;
padding: 0px;
spacing: 0px;
}
ToolItem {
animation: none;
background-color: transparent;
background-image: none;
border: none;
color: white;
opacity: 1;
}
ToolItem:hover {
border: none;
background-color: transparent;
background-image: gradient(
linear, left top, left bottom,
from( #7aaed1 ),
color-stop( 52%, #7aaed1 ),
color-stop( 48%, #7aaed1 ),
to( white )
);
color: black;
}
ToolItem-DropDownIcon {
background-image: url(icons/down.png);
border: none;
}
ToolItem-Separator {
width: 0px;
}
CTabFolder {
border-color: white;
border-radius: 5px;
}
CTabItem {
font: bold 12px sans-serif;
color: gray;
background-color: transparent;
background-image: none;
padding: 10px;
spacing: 10px;
}
CTabItem:selected {
color: white;
background-color: #4282AD;
background-image: gradient(
linear, left top, left bottom,
from( black ),
color-stop( 52%, black ),
color-stop( 48%, #4282AD ),
to( #4282AD )
);
}
CoolItem-Handle {
border: none;
width: 0px;
}
Thanks for your response.
|
|
| | | |
Re: [New Target Problem] Custom Theming of CTabFolder [message #907986 is a reply to message #907211] |
Tue, 04 September 2012 13:59   |
Eclipse User |
|
|
|
If you need the registration, see the two last extensions from my plugin.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
<extension
id="viewapp"
point="org.eclipse.core.runtime.applications">
<application
thread="main"
cardinality="singleton-global"
visible="true">
<run
class="test.process.client.explorer.Application">
</run>
</application>
</extension>
<extension
point="org.eclipse.ui.perspectives">
<perspective
name="RAP Perspective"
class="test.process.client.explorer.Perspective"
id="ActivitiRapExplorer.perspective">
</perspective>
</extension>
<extension
point="org.eclipse.ui.views">
<view
allowMultiple="false"
class="test.process.client.explorer.MyInstancesView"
id="ActivitiRapExplorer.MyInstancesView"
name="My Instances"
restorable="true">
</view>
<view
allowMultiple="false"
class="test.process.client.explorer.MyProcessesView"
id="ActivitiRapExplorer.MyProcessesView"
name="My Processes"
restorable="true">
</view>
</extension>
<extension
point="org.eclipse.rap.ui.branding">
<branding
servletName="bpmExplorer"
themeId="test.process.client.explorer.customTheme"
defaultEntrypointId="ActivitiRapExplorer.viewapp"
title="Activiti Rap Explorer"
id="test.process.client.explorer.branding">
</branding>
</extension>
<extension
point="org.eclipse.rap.ui.themes">
<theme
file="css/customTheme.css"
id="test.process.client.explorer.customTheme"
name="Custom Theme">
</theme>
</extension>
</plugin>
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #908416 is a reply to message #907211] |
Wed, 05 September 2012 10:46   |
Eclipse User |
|
|
|
Hi Francis,
Workbench has its own default theme (completely different from RWT)
witch is defined in the org.eclipse.rap.ui\plugin.xml file (see
org.eclipse.ui.themes extension point). The values from the the
workbench theme is set by the Java code. In RAP all properties set by
the code override the properties set by the RWT theme... or in other
words... the properties set by the Workbench theme override the
properties set by the RWT theme. In your case this is valid for CTabItem
selection foreground color, background color and background gradient
(see Workbench theme properties like
org.eclipse.ui.workbench.ACTIVE_TAB_TEXT_COLOR,
org.eclipse.ui.workbench.ACTIVE_TAB_BG_END...).
HTH,
Ivan
On 9/3/2012 5:34 PM, Francis Delsinnes wrote:
> I've got a problem with my css file to custom the display of CTabFolder.
> I speak about "TabFolder" from Views into a RAP Perspective.
>
> The theme for "CTabItem:selected" doesn't work with RAP Targets
> 1.5.0-M7 and 2.0.0-M1!?
> Remarks; the same theme works into the RAP Target 1.5.0M2
>
> Here is my css (part):
>
> CTabItem {
> font: bold 12px sans-serif; /* WORKS */
> color: gray; /* WORKS */
> background-color: transparent; /* WITH A COLOR, DOESN'T WORK
> !!! */
> background-image: none; /* WORKS */
> padding: 5px; /* WORKS */
> spacing: 0px; /* WORKS */
> text-shadow: none; /* WORKS */
> }
>
> CTabItem:selected {
> color: white; /* DOESN'T WORK */
> background-color: #4282AD; /* DOESN'T WORK */
> background-image: gradient( /* DOESN'T WORK */ linear,
> left top, left bottom,
> from( black ),
> color-stop( 52%, black ),
> color-stop( 48%, #4282AD ),
> to( #4282AD )
> );
> }
>
>
> I need help / ideas
> Thanks in advance
--
Ivan Furnadjiev
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #908906 is a reply to message #908416] |
Thu, 06 September 2012 08:00   |
Eclipse User |
|
|
|
Thanks for your information.
=> Now, I set custom colors for the workbench directly by code.
Into the ApplicationWorkbenchWindowAdvisor class
Method: @Override public void preWindowOpen() { ... }
after the settings of IWorkbenchWindowConfigurer object.
Remark: with the previous versions of RAP targets, the css theme was also applied to the Workbench Parts like the Views.
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #908923 is a reply to message #908416] |
Thu, 06 September 2012 08:27   |
Eclipse User |
|
|
|
Hi Francis,
> Remark: with the previous versions of RAP targets, the css theme was
> also applied to the Workbench Parts like the Views.
>
Which versions exactly? I'm not aware of any change in this direction.
Best,
Ivan
On 9/5/2012 1:46 PM, Ivan Furnadjiev wrote:
> Hi Francis,
> Workbench has its own default theme (completely different from RWT)
> witch is defined in the org.eclipse.rap.ui\plugin.xml file (see
> org.eclipse.ui.themes extension point). The values from the the
> workbench theme is set by the Java code. In RAP all properties set by
> the code override the properties set by the RWT theme... or in other
> words... the properties set by the Workbench theme override the
> properties set by the RWT theme. In your case this is valid for
> CTabItem selection foreground color, background color and background
> gradient (see Workbench theme properties like
> org.eclipse.ui.workbench.ACTIVE_TAB_TEXT_COLOR,
> org.eclipse.ui.workbench.ACTIVE_TAB_BG_END...).
> HTH,
> Ivan
>
> On 9/3/2012 5:34 PM, Francis Delsinnes wrote:
>> I've got a problem with my css file to custom the display of CTabFolder.
>> I speak about "TabFolder" from Views into a RAP Perspective.
>>
>> The theme for "CTabItem:selected" doesn't work with RAP Targets
>> 1.5.0-M7 and 2.0.0-M1!?
>> Remarks; the same theme works into the RAP Target 1.5.0M2
>>
>> Here is my css (part):
>>
>> CTabItem {
>> font: bold 12px sans-serif; /* WORKS */
>> color: gray; /* WORKS */
>> background-color: transparent; /* WITH A COLOR, DOESN'T WORK
>> !!! */
>> background-image: none; /* WORKS */
>> padding: 5px; /* WORKS */
>> spacing: 0px; /* WORKS */
>> text-shadow: none; /* WORKS */
>> }
>>
>> CTabItem:selected {
>> color: white; /* DOESN'T WORK */
>> background-color: #4282AD; /* DOESN'T WORK */
>> background-image: gradient( /* DOESN'T WORK */ linear,
>> left top, left bottom,
>> from( black ),
>> color-stop( 52%, black ),
>> color-stop( 48%, #4282AD ),
>> to( #4282AD )
>> );
>> }
>>
>>
>> I need help / ideas
>> Thanks in advance
>
--
Ivan Furnadjiev
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
Re: [New Target Problem] Custom Theming of CTabFolder [message #908957 is a reply to message #908923] |
Thu, 06 September 2012 09:52   |
Eclipse User |
|
|
|
About RAP Targets and CSS theme applied to Workbench Parts:
An example: fonts and colors for CTabItem (applied to Views of perspectives)
-------------------------
1.4.0, 1.4.1
-------------------------
CTabItem {
font
color
background-color
}
-------------------------
1.5.0 Release
-------------------------
CTabItem {
color
}
-------------------------
1.5.0-M2
-------------------------
CTabItem {
font
color
background-color
}
-------------------------
1.5.0-M3, 1.5.0-M4, 1.5.0-M5, 1.5.0-M6, 1.5.0-M7, 2.0.0-M1
-------------------------
CTabItem {
color
}
-------------------------
|
|
| |
Goto Forum:
Current Time: Fri Feb 07 20:37:30 GMT 2025
Powered by FUDForum. Page generated in 0.05239 seconds
|