Eclipse Community Forums: Eclipse Scout » [Oxygen] How does CSS/Less Styling work?

Home » Eclipse Projects » Eclipse Scout » [Oxygen] How does CSS/Less Styling work?

[Oxygen] How does CSS/Less Styling work? [message #1790831]

Mon, 18 June 2018 12:51

Eclipse User

Hello there,

I can't figure out how I can define my own CSS/LESS style.

Where can I find out which selectors/variables/classes to use and how to set the values?

Are there any examples available?

Thanks,

Peter

Re: [Oxygen] How does CSS/Less Styling work? [message #1791054 is a reply to message #1790831]

Fri, 22 June 2018 05:12

Eclipse User

Hi Peter

I tried to describe some basic concepts here: https://eclipsescout.github.io/8.0/technical-guide-js.html#styling

You can find some examples in the widgets app: https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/releases/8.0.x/code/widgets

In order to find out what selectors you have to write you can either have a look at the Scout default less files, or use the dev tools of the browser and inspect the applied selectors.

If there are any more questions, feel free to ask.
Claudio

[Updated on: Sat, 30 June 2018 03:14] by Moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791209 is a reply to message #1791054]

Tue, 26 June 2018 00:18

Eclipse User

Hi Claudio,

thanks a lot. That helped me very much. I found what I needed.

Peter

Re: [Oxygen] How does CSS/Less Styling work? [message #1791247 is a reply to message #1791209]

Tue, 26 June 2018 11:52

Eclipse User

HI there,

I've got another question.

I nearly managed to adjust all the colors I need. But then came across the dialog, which is shown during long running operations (see screenshot).

index.php/fa/33238/0/

There is still the default blue theme activated. Where can I find the less entry for this?

Thanks a lot

Peter

Attachment: longrunning_dialog.png
(Size: 5.32KB, Downloaded 308 times)

Re: [Oxygen] How does CSS/Less Styling work? [message #1791248 is a reply to message #1791247]

Tue, 26 June 2018 12:14

Eclipse User

This should be the BusyIndicator, with the corresponding LESS file here.

Re: [Oxygen] How does CSS/Less Styling work? [message #1791308 is a reply to message #1791248]

Wed, 27 June 2018 23:21

Eclipse User

Hello there,

thanks. That did the trick.

Which brings me to another question. What's the easiest and simplest way to find out which selectors I have to change? I know that I can use the devtools of a browser. But sometimes it's a dead end for me there...

Peter

Re: [Oxygen] How does CSS/Less Styling work? [message #1791474 is a reply to message #1791308]

Sat, 30 June 2018 03:39

Eclipse User

Hi Peter

Adjusting the default behavior or style beyond changing some colors need a fundamental understanding of how the specific widget works, at least in my opinion. I think you won't get around reading the source code and copying the rules from the Scout less files. Probably the easiest way is to clone the Scout repository and to import org.eclipse.scout.rt.ui.html into your workspace.
The dev tools will help to observe which CSS classes change and which rules are applied in certain situations.

It would be great if you could share some experiences as soon as you have made some progress in your journey of customizing. I'll be looking forward to it

Previous Topic:	How to call stored procedure with output parameters
Next Topic:	[Oxygen] Hyperlink Column in TablePage?

Goto Forum:

-=] Back to Top [=-

Current Time: Sat Jun 14 23:17:11 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter