Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » [Oxygen] How does CSS/Less Styling work?
[Oxygen] How does CSS/Less Styling work? [message #1790831] Mon, 18 June 2018 16:51 Go to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 213
Registered: November 2014
Senior Member
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

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791054 is a reply to message #1790831] Fri, 22 June 2018 09:12 Go to previous messageGo to next message
Claudio Guglielmo is currently offline Claudio GuglielmoFriend
Messages: 180
Registered: March 2010
Senior Member
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 07:14]

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791209 is a reply to message #1791054] Tue, 26 June 2018 04:18 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 213
Registered: November 2014
Senior Member
Hi Claudio,

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

Peter

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791247 is a reply to message #1791209] Tue, 26 June 2018 15:52 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 213
Registered: November 2014
Senior Member
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

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791248 is a reply to message #1791247] Tue, 26 June 2018 16:14 Go to previous messageGo to next message
Patrick Bänziger is currently offline Patrick BänzigerFriend
Messages: 90
Registered: September 2011
Member
This should be the BusyIndicator, with the corresponding LESS file here.

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791308 is a reply to message #1791248] Thu, 28 June 2018 03:21 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 213
Registered: November 2014
Senior Member
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

Report message to a moderator

Re: [Oxygen] How does CSS/Less Styling work? [message #1791474 is a reply to message #1791308] Sat, 30 June 2018 07:39 Go to previous message
Claudio Guglielmo is currently offline Claudio GuglielmoFriend
Messages: 180
Registered: March 2010
Senior Member
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

Report message to a moderator

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

[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Wed Dec 11 13:33:29 GMT 2019

Powered by FUDForum. Page generated in 0.02510 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top

Sign up to our Newsletter

A fresh new issue delivered monthly