Window (widget) Styling

[Tim.GarnerParticipant]

Hi,
I am new to jqwidgets and am trying to figure out how to change parts of the windows style. Unfortunately I haven’t found and any clear description on how I could change for example the background of a window or the padding of the inner window. I could add a div inside the window and create my own style but want to apply or over write some theme styling directly.

How do I overwrite some of the base or theme css styles. for example apply a background color to jqx-widget-content?

Could you proved me with some examples or point me to the only documentation describing this? If there is no such documentation, could you add some example in your doc section on how to make changes to the selected base and theme css?

Below is the list of CSS classes used by jqxWindow.
jqx-widget – applied to the jqxWindow.
jqx-window – applied to the jqxWindow.
jqx-window-disabled – applied to the jqxWindow when it’s disabled.
jqx-window-header – applied to the window’s header.
jqx-widget-header – applied to the window’s header.
jqx-window-content – applied to the window’s content.
jqx-widget-content – applied to the window’s content.
jqx-window-close-button – applied to the window’s close button.
jqx-window-collapse-button – applied to the window’s collapse button.
jqx-window-modal – setting styles of the modal window’s background.

Thanks a lot
Alex

[Peter StoevKeymaster]

Hi Alex,

To change the Window’s content style, define a Style in your head section and add the .jqx-window-content style. There you can define background, border, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Tim.GarnerParticipant]

Can you give me an example ?

[Peter StoevKeymaster]

Hi Tim,

Here is an example: http://jsfiddle.net/q6TqS/

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Tim.GarnerParticipant]

Hi Peter,
thanks for the fast reply

is there a way to change the background on the fly using something like

$(“#jqx-window-content”).css(“background-color”, “#323232”);

Thanks

[Author]

Posts