Change the size of icons

[parascusParticipant]

Hello jqWidgets-Team,

I’d like to replace the icons which are used by the dark and light themes. There’s no problem to change the used image via own style sheet but I don#t know how to change the size of the icons. It seems that the wize of 16px in width and height is set by the js components of jqWidget. Is there any way to change the width to 20px?

Best regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

The icon sizes are defined in jqx.base.css. You can change them from there.

Best Regards,
Peter Stoev

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

[parascusParticipant]

Hi Peter,

I found a class called jqx-icon where the width and height is 16px. But when I look into the demo of jqwidgets.com under jqxWindow, the one with the movie window opened, and I look at the properties of e.g. the close button of this window there are two html elements:

<div class="jqx-window-close-button-background jqx-window-close-button-background-arctic" style="visibility: visible; width: 16px; height: 16px; margin-right: 5px; margin-left: 0px; position: absolute; right: 0px;">
    <div class="jqx-window-close-button jqx-window-close-button-arctic jqx-icon-close jqx-icon-close-arctic" style="width: 100%; height: 100%;">
    </div>
</div>

None of the classes mentioned in the example has a class whith a property of with and height. The width and height is defined via style assignment which has a higher priority than the class properties. So I don’t understand how this can work if there’s no coding of the assignment of width and height.

Best Regards

Stephan

[Peter StoevKeymaster]

Hi Stephan,

The assignment will have the priority which you set. You can always use the jQuery’s css method to apply a CSS style to something or define a CSS Class with !important setting. I would suggest you to read about CSS Inheritance on this page: http://www.w3.org/TR/CSS2/cascade.html

Best Regards,
Peter Stoev

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

[parascusParticipant]

Hi Peter,

thank you for the info and the link. I wasn’t aware of the fact that giving “!important” to a class property the assignment would beat a style property. I always thought that style has the highest priority. But than everything is clear. I just have to asign “jqx-icon-ownstyle” to every button generated by jqx (for example $(.jqx-window-close-button-background)”.addClass(“jqx-icon-ownstyle”) to adjust the size.

Best regards

Stephan

[Author]

Posts