Eclipse Community Forums: Remote Application Platform (RAP) » [New Target Problem] Custom Theming of CTabFolder

Home » Eclipse Projects » Remote Application Platform (RAP) » [New Target Problem] Custom Theming of CTabFolder(Problem with CTabItem:selected)

Show: Today's Messages :: Show Polls :: Message Navigator

[New Target Problem] Custom Theming of CTabFolder [message #907211]

Mon, 03 September 2012 14:34

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

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

Report message to a moderator

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/

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #907962 is a reply to message #907929]

Tue, 04 September 2012 13:45

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

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.

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #907965 is a reply to message #907929]

Tue, 04 September 2012 13:47

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

... double post ... (sorry)

[Updated on: Thu, 06 September 2012 08:03]

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #907966 is a reply to message #907929]

Tue, 04 September 2012 13:48

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

... double post ... (sorry)

[Updated on: Thu, 06 September 2012 08:06]

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #907975 is a reply to message #907211]

Tue, 04 September 2012 13:51

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

... double post ... (sorry)

[Updated on: Thu, 06 September 2012 08:09]

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #907986 is a reply to message #907211]

Tue, 04 September 2012 13:59

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

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>

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #908416 is a reply to message #907211]

Wed, 05 September 2012 10:46

Ivan Furnadjiev

Messages: 2429
Registered: July 2009
Location: Sofia, Bulgaria

Senior Member

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/

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #908906 is a reply to message #908416]

Thu, 06 September 2012 08:00

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

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.

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #908923 is a reply to message #908416]

Thu, 06 September 2012 08:27

Ivan Furnadjiev

Messages: 2429
Registered: July 2009
Location: Sofia, Bulgaria

Senior Member

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/

Report message to a moderator

Re: [New Target Problem] Custom Theming of CTabFolder [message #908957 is a reply to message #908923]

Thu, 06 September 2012 09:52

Francis Delsinnes

Messages: 49
Registered: November 2011

Member

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
}
-------------------------

Report message to a moderator