Setting a Global Style in aXes

[MarcusLancaster]

Hi all.

I'm working with TS (as opposed to TS2) and I'd like to create a global style (to set a font-family) which is only applied to ALL INPUT boxes. I can create an Application Level style in the aXes Designer;

Name: GlobalINPUTFont
stylefor: HTML Element
htmlTAG: .InField INPUT
style: font-family: Verdana

But that only seems to work when the screen is not customised. As soon as I start customising a screen, the style no longer applies.

Is there a way to set a style which is picked up regardless of whether a screen is customised or not? Or is there a way to set a global style for customised screens, then I would only need to define the style twice (once for customised and once for non-customised).

As an aside... the aXes screens will be used within a RAMP environment, so the style should persist into that environment too.

Any help or advice would be gratefully received. If I'm missing something obvious, apologies, its been a while since I last worked in the aXes environment!

Cheers for now.

Marcus.

[jeanmichel]

Hi Marcus,

This is a bug in TS. Please report this via the LANSA support channels.

Thanks for finding this.

[jeanmichel]

Hi Marcus,

You have this information already. I thought I will port it here for future references.
After further investigation and debugging, this issue can simple be fixed by removing the class in the CSS definition.

Original definition:
Name: GlobalINPUTFont
stylefor: HTML Element
htmlTAG: .InField INPUT
style: font-family: Verdana

The above css will only work on non-customised screen because non-customised screens uses the default axes.css which defines the .InField class for inputs. But once the screen is customised, the axes.css will no longer be used but the defined application_xxx.css.

So instead of the above definition, for customised screens, the following can be used instead:
Name: GlobalINPUTFont
stylefor: HTML Element
htmlTAG: INPUT
style: font-family: Verdana

Just removing the class will apply the style to all inputs.

[ketut]

Hi JM

Beside INPUT what else for htmlTAG?

[ketut]

Hi JM

Beside INPUT what else for htmlTAG? Is the reference just from axes.css?


Best regards

Ketut

[pius]

Hi Ketut.

It will work on any html tag.
Eg. textarea, a, button, etc.

Best regards,
Pius

[ketut]

Hi Pius,

I have an issue about setting global Button Style in aXes.
I made 2 button with different color.

first button style
name: btnSuccess
styleFor: HTML Element
htmlTag: BUTTON
style: { background-color: #4CAF50 ; }
BUTTON:hover
{ background-color: #46a049 ; }

second button style
first button style
name: btnDanger
styleFor: HTML Element
htmlTag: BUTTON
style: { background-color: #f44336 ; }
BUTTON:hover
{ background-color: #da190b ; }


When i implement all buttons, only first button style works, but the others doesn't work, even it has style like first style.
Can you help me?

Best regards

Ketut

[pius]

Hi Ketut,

If you are going to create two different styles for the same element, you need to be more specific on the htmlTag.
You can add class names in the htmlTag as well.
Eg.
name: btnSuccess
styleFor: HTML Element
htmlTag: .success BUTTON
style: { background-color: #4CAF50 ; }

name: btnDanger
styleFor: HTML Element
htmlTag: .danger BUTTON
style: { background-color: #f44336 ; }

where ".success" and ".danger" are the classes specific to the buttons you want the btnSuccess or btnDanger style to be applied to.
So for btnSuccess to be applied to a button, it must have the "success" class.

Hope this helps.

Best regards,
Pius