Eclipse Community Forums: Eclipse Scout » [Neon] Change colors of html ui

Help

Home

Home » Eclipse Projects » Eclipse Scout » [Neon] Change colors of html ui

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

[Neon] Change colors of html ui [message #1715260]

Fri, 20 November 2015 15:50

Silvio Kohler

Messages: 31
Registered: October 2015

Member

Hi

I've successfully migrated my Scout Mars application to Neon M3, using the html UI.

Unfortunately, the colors of the new UI do not meet my customers sensitive eyes. The dark blue background of the tree on the left side does not really match the light blue background of the buttons, and so on...

Therefore I need to change some of the colors. What is the best way to do this?

I tried to overwrite the file "colors.css" (org.eclipse.scout.rt.ui.html/scout/style/colors.css) by adding a similar file to my project "my.project.ui.html", but this has no effects.

Maybe there's even a description or tutorial online for this topic... I couldn't find it though. Could someone provide a short overview on how to change UI colors?

Thanks

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1715263 is a reply to message #1715260]

Fri, 20 November 2015 16:07

Jeremie Bresson

Messages: 1252
Registered: October 2011

Senior Member

Matthias Zimmermann has done this in his talk at EclipseCon:
A pure Java Framework with full HTML5 Support (start at 12:29)

You can switch between 3 themes, see on google+:
https://plus.google.com/+eclipsescout/posts/e47k8EaJash

You can check out the "Contracts demo app" in the org.eclipse.scout.docs repo ("features/neon_m3" branch). I recommend using this branch which is compatible with the Neon.M3 release we have done last week.

[Updated on: Mon, 14 December 2015 08:24]

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1717411 is a reply to message #1715263]

Sun, 13 December 2015 10:29

Rene Eigenheer

Messages: 109
Registered: July 2009

Senior Member

Hi Jeremie
I tried to check the mentioned google+ link, but I'm not allowed to access it Sad

I tried to follow Matthias' presentation, but so far my colors do not change

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1717424 is a reply to message #1717411]

Sun, 13 December 2015 12:45

Rene Eigenheer

Messages: 109
Registered: July 2009

Senior Member

I finally got my colors changing Wink

if you follow Matthias' slides, make sure that after adding the src/main/js/... folder (slide 17), that src/main/js is also on the build path (a 'maven update project' should do it)

The second mistake I did, was copying the whole src/main/js folder out of the contacts demo app - as the demo up is on a newer level, than my actual Neon IDE (M3) there were some incompatibilities -> only create the files within the 'style' subdirectory !

[Updated on: Sun, 13 December 2015 12:45]

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1718412 is a reply to message #1717424]

Wed, 23 December 2015 13:28

Silvio Kohler

Messages: 31
Registered: October 2015

Member

I got my colors changing too Smile

It took me some time to understand the simple but magic mechanism. So this hint might help other people (it is not mentioned clearly in the slides or the posts, at least for me it was not clear Smile

...):

For your own css files to have an effect, give them a filename following this rule:
[originalFilename]-[myThemeName].css

Example (override the file "colors.css"):
- Create file "colors-mytheme.css"
- Add "scout.ui.theme=mytheme" to config.properties.

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1718479 is a reply to message #1718412]

Thu, 24 December 2015 10:37

Rene Eigenheer

Messages: 109
Registered: July 2009

Senior Member

when upgrading from M3 to M4 I remarked that there were additions in the mentioned style files (like colors.css).
Will the standard procedure be to do a diff between the files and add the new entries manually or will there be something like an extension mechanism?

Report message to a moderator

Re: [Neon] Change colors of html ui [message #1718523 is a reply to message #1718479]

Sat, 26 December 2015 08:47

Jeremie Bresson

Messages: 1252
Registered: October 2011

Senior Member

Maybe Matthias Zimmerman will be able to tell more about this mechanism (I think he comes back from his holidays in January 2016).

There is a possibility to import the default theme and to override/redefine just the stuff you want. This is a LESS functionality and this is the way you should extends css theme.

Report message to a moderator

Previous Topic:	[Neon] Change favicon for Internet Explorer
Next Topic:	[Neon] OkButton

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Sat Apr 20 08:34:32 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter