jQuery UI Widgets › Forums › Grid › Grid theme problem
Tagged: base, custom, jqx.base.css, style, Theme, theme builder
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 6 months ago.
-
AuthorGrid theme problem Posts
-
Hi
I am trying to style the grid using the online theme builder. however, after downloading the css and placing a link to the base and custom css files, for some reason, certain parts of the grid don’t appear to change. for example, in theme builder, I color a selected row to be a dark color on hover and selected, but when I load the grid, the color has not changed. The color appears to be the same as the alt row color. I have 3 questions that perhaps someone could answer as to what i am missing here?1) What is the purpose of the base file if you have a custom style sheet.
2) How do I style just for the grid. I am also using the tree widget and I do not wish this to change colors or styles.
3) I have tried to find using firebug, what exactly needs to be amended to style a selected row. i have found references to selected in the style sheet, but any change i make to the style sheet doesn’t update in the grid. is there a link how to theme correctly. Thanks
Hello mr_putersmit,
1) jqx.base.css defines the structure of all widgets (positioning, alignment, etc.) The theme style sheets define the visual look of the widgets (colouring, fonts, etc.). If you removed base, a jqxMenu would simply become a list of li elements.
2) To style just one widget, apply the theme only to it.
3) In Theme Builder enter Active state and then change Active state background and Active state background 2. These correspond to the class jqx-fill-state-pressed.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar
Thank you for reply. 1 Question in response to your answer. How do I apply a theme to a single widget? In theme builder, when I build css it creates a style sheet for all widgets. Thanks
Hi mr_putersmit,
All themes (built-in and custom) are applied through the theme property. If you do not set it to some widget, the custom theme will not be applied to it. In the following example:
$('#jqxTree').jqxTree({ theme: 'my-theme', source: source, width: '100%', height: '100%'}); $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top'});
the custom theme is not applied to jqxTabs.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.