Documentation: Shoe Size Chart for Joomla

Go to the Module Manager in the Joomla control panel. In the list of modules, find "IWS.BY Shoe Size Chart". Click on the module name, and the page with available settings will open. Let's review each field below.

License key

In this field, you must enter the license key received from the IWS.BY website when obtaining the module. Without the key in this field, the module will not be able to access the update server and update automatically.

Button name

This field sets the name of the button that opens the shoe size chart.

Layer level (z-index)

This field sets the numeric layer level at which the pop-up window will be displayed above all elements on the site. The CSS property equivalent for this field is: z-index.

Column Activation

This field is responsible for activating columns in the shoe size chart. If you do not need all the columns in the table, this option controls the display of the table columns.

The usual name of the columns

This group of fields is responsible for the displayed column names in the standard site mode. The names are displayed when the site visitor's screen width is 768 pixels or more.

Abbreviated column name

This group of fields is responsible for the displayed column names in the mobile site mode. The names are displayed when the site visitor's screen width is 768 pixels or less.

Size chart

This group of fields is responsible for the table content. Here, the table content is filled in. Using Joomla's built-in tools, you can rearrange the rows. By default, the table is populated with data taken from open sources for the USA, Europe, and Russia. You can change the data to your required values in this group of fields.

Custom Style Settings

This section covers the fields that will help you change the default style of the button that opens the table, as well as the table itself. To customize the design, find the tab named "Design Settings" at the top of the module settings page. All design settings are made in this tab.

Button Design Settings

Stylize the button?

This option controls the ability to style the button. If "Yes" is selected, the styles from the settings below will be applied to the button. If "No" is selected, the button will inherit styles from your template.

Set indents on the outside?

This option controls the ability to set outer indents for the button that opens the shoe size chart. If "Yes" is selected, the outside indents from the "Outside indentation" field group will be applied to the button.

Outside indentation

This group of fields sets the outer indentation for the button. The outer indentation can be set for the top, right, bottom, and left. The CSS property equivalent is: margin.

Set indentations on the inside?

This option controls the ability to set inner indentations for the button that opens the shoe size chart. If "Yes" is selected, the inner indentations from the "Indentation inside" field group will be applied to the button.

Indentation inside

This group of fields sets the indentation inside the button. The internal indents can be set for the top, right, bottom, and left. The CSS property equivalent is: padding.

Text register

This option is responsible for the text case on the button that opens the shoe size chart. It can be normal, capitalized (first letter of each word), lowercase, or uppercase. The CSS property equivalent is: text-transform.

Text style

This option is responsible for the text style on the button that opens the shoe size chart. It can be normal, bold, italic, or bold italic.

Text size

This field specifies the text size on the button that opens the size chart. It is specified as a number in pixels. The CSS property equivalent is: font-size.

Text color

This option sets the text color on the button that opens the size chart. It is specified in HEX format.

Text color when hovering

This option sets the text color on the button that opens the size chart when hovered over with the mouse cursor. It is specified in HEX format.

Angle radius

This field specifies the corner rounding radius for the button that opens the size chart. It is specified as a number in pixels. The CSS property equivalent is: border-radius.

Background Color

This option is responsible for the background color of the button that opens the size chart. It is specified in HEX format.

Background colour at hover

This option is responsible for the background color of the button that opens the size chart when hovered over with the mouse cursor. It is specified in HEX format.

Enable button border?

This option is responsible for enabling the border on the button that opens the size chart. If "Yes" is selected, the button will have a border, and its settings will be taken from the fields below.

Border width

The border width is specified as a number in pixels. The CSS property equivalent is: border-width.

Border style

This option sets the border style for the button that opens the size chart. The border can be a solid line, dashed, dotted, or double. The CSS property equivalent is: border-style.

Border color

This option sets the border color for the button that opens the size chart. It is specified in HEX format.

Border color when hovering

This option sets the border color for the button that opens the size chart when hovered over with the mouse cursor. It is specified in HEX format.

Table Design Settings

Attention! Table styling is configured for 3 types of rows. Settings for the first row with column headers, settings for each even row, and settings for each odd row. This configuration will preserve the default table design developed by IWS.BY. If you want to use your own design, disable styling via the first option in this block's settings.

Stylize the table?

This option controls the ability to style the table. If "Yes" is selected, the styles from the settings below will be applied to the table. If "No" is selected, the table will inherit styles from your template.

Background color of the first row of the table

This option sets the background color of the first row of the table, which displays the column names. It is specified in HEX format.

The color of the text in the first row of the table

This option sets the text color in the first row of the table, which displays the column names. It is specified in HEX format.

Text style in the first row of the table

This option sets the text style in the first row of the table, which displays the column names. It can be normal, bold, italic, or bold italic.

The background color of the odd-numbered table rows

This option sets the background color for each odd-numbered row of the table. It is specified in HEX format.

The color of the text of the odd lines in the table

This option sets the text color in each odd-numbered row of the table. It is specified in HEX format.

Text style of odd table rows

This option sets the text style in each odd-numbered row of the table. It can be normal, bold, italic, or bold italic.

The background color of the even rows of the table

This option sets the background color for each even row of the table. It is specified in HEX format.

The color of the text of the even rows of the table

This option sets the text color in each even row of the table. It is specified in HEX format.

Text style of the even rows in the table

This option sets the text style in each even row of the table. It can be normal, bold, italic, or bold italic.