Styling and Appearance

The jqxTagCloud allows for a number of different options to style the elements of the cloud. In order to fit various needs we have provided options to:

• Set the min and max fontSize depending on the value(weight) of the element.
• Set the tag text color for all elements using textColor.

Here is an example of tags with mountain Peaks with their fontsize scaled by their height and text color set to brown.

• Set colors for the elements with min and max value(weight) and transitioning colors according to their value between min and max colors for the others.

  Here is an example of tags with mountain Peaks with their fontsize scaled by their height.
• Alter the text case of the labels in your elements. Possible values: 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'

jqxTagCloud CSS class styles

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTagCloud.

• jqx-widget - applied to jqxTagCloud widget.
• jqx-tag-cloud - applied to jqxTagCloud's ul element.
• jqx-tag-cloud-item - applied to the jqxTagCloud li element.

• You can use these classes to style your own widget.

  The sample below demostrates how you can use the above mentioned classes to style it as a list of tags.

jqxTagCloud Theme support

Should you need to have seperate themes for the jqxTagCloud, you can use the following method:

• Add the above CSS classes related to jqxTagCloud
• After each CSS class, add your theme name.
  For example:
  jqx-jqxTagCloud-shinyblack
• To apply your custom style to jqxTagCloud, you need to set its theme property(option) to point to your theme name string.
• The sample below demonstrates how to set the 'Shiny Black' theme to jqxTagCloud.