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

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

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

Fri, 20 November 2015 10:50

Eclipse User

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

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

Fri, 20 November 2015 11:07

Eclipse User

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 03:24] by Moderator

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

Sun, 13 December 2015 05:29

Eclipse User

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

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

Sun, 13 December 2015 07:45

Eclipse User

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 07:45] by Moderator

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

Wed, 23 December 2015 08:28

Eclipse User

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.

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

Thu, 24 December 2015 05:37

Eclipse User

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?

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

Sat, 26 December 2015 03:47

Eclipse User

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.

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

Goto Forum:

-=] Back to Top [=-

Current Time: Mon Jul 14 17:55:27 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter