Override css for only one control

Answered
0
0

Hi!

suppose to have 3 TabControls.

inspecting the page with browser tools, I can view the wisej css classes,

qx-tabview-pane-barTop-borderSolid

qx-tabview-page-button-checked-barTop-firstTab-horizontal

if I want to override the css for change the color of only one control is it possibile?

Regards

Cristian

  • You must to post comments
Best Answer
0
0

Yes, use the StyleSheet component from the toolbox. Drop it on the container at design time and it will add the CssClass property to all controls. You can use it to assign a css class name. You can also type css or assign a css file to the styleSheet component, and/or you can simply add a css file to Default.html.

Or you can target an element using the id, and/or name and class combination using the standard css selection rules.

Another way is to create a new appearance key in a mixin theme file. The new appearance key can inherit from an existing one and then you can change the styles and properties. Most Wisej controls let you change their appearance key.

The Wisej theme system is easier and more flexible than plain css since it also supports properties while css is limited to predefined styles. You can also edit mixin files using the Theme Builder and you can create custom preview js scripts or simply preview and theme your app while running.

CSS gets very messy and very complicated quickly and with a lot of unintended consequences because of style inheritance and selection rules. Wisej generates the css styles on the fly as needed from the theme json definition.

See:

https://wisej.com/docs/html/Themes.htm

https://wisej.com/docs/html/ThemeBuilder.htm

  • Cristian Zerbinati
    if I use styleSheet with a reserved class name, all the control changed, but Mixin Theme is the solution! I did not know this feature!!! very good thanks
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.