Remove the default-looking fluidOps on certains elementd

[Barbot Clément]

Hello

On Eclipse, we’re changing the CSS attributes of the components of a Widget we created.

Let’s say we have a button called myButton on our widget and we’re changing it’s attributes :

             myButton.addStyle("background-color", "red");

             myButton.addStyle("border-radius", "20px");   

 

We get this (attached to this post)

 

It looks like fluidOps put itself a pre-defined button, with the theme color of the interface.

 

Do you know if we can change that (so make what we want to do : have a plain red rounded button with Java) without changing the global theme color ?

 

Regards

Clément

[Andreas Schwarte]

Hi Clément,

 

we are typically styling our UI components directly via CSS declarations (particularly no inline CSS in Java code).

 

I suggest to follow the same approach and defined proper CSS rules using the extensions mechanism described in https://iwbintegration.fluidops.corp/resource/Help:UICustomization#Customizing_CSS

You can define your own CSS in your extension and override default behavior (e.g. if you have a specific button by assigning a “class” attribute to the HTML element, and attaching CSS to the specific class)

 

 

Below is some CSS snippet that is currently used for styling, I suggest to use the browser’s developer tools to inspect the elements and find out which styles apply.

 

input[type="button"], input[type="submit"], button, input[type="reset"] {

    font-size: 14px;

    background: #7db61c;

    …

}

 

Hope this helps,

Andreas

--
You received this message because you are subscribed to the Google Groups "Information Workbench Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to iwb-discussio...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Barbot Clément]

Hello,

I believe the way I'm doing it is not the good one but it works :

--> add to the file webapps\ROOT\styleshee_fiwb.css  your css class (see below)

--> use it in your code (widget or whatever you want to create) (see below)

The css class (here for a button) : 

.myCssButton input[type=button] {

     yourCssPpties

 }

The Java code : 

create a button, (well explained on the fiwb documentation) and then :

myButton.appendClazz("myCssButton"); 

Obviously, you have to call your widget - or whatever it is - in your fluidOps page!

Those things should work :) Moreover, if it's not a button, you have to adapt those methods.

Regards

Clément