...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Note |
|---|
This documentation requires knowledge about HTML and CSS |
So you want to You can customize your table grid (TG) ? Make it more beautiful by adjusting its CSS to using HTML markup:
- add your corporate style
...
- to the grid using CSS
- format the currency values in your table
...
This page provides an explanation how you can do it in a few easy steps!
Since TG 1.26.0, we introduced CSS classes and IDs for rows, columns, and cells for your convenience to easily find the elements that you want to apply CSS styles to.
...
Available CSS classes and IDs for rows, columns, and cells
The names for classes and IDs have the following pattern:
...
Id for header = "tg-header-customfield_<gridId>_grid"
Id for footer = customfield_<gridId>_grid_pager
Id for the index column label = "customfield_<gridId>_grid_rn"
Id for column labels = "customfield_<gridId>_grid_<columnNameAsInConfigs>"
Id for cells = "tg-cell-r1-c2-<columnNameAsInConfigs>-customfield_<gridId>_grid"
...
Examples
Assume you have a table grid which with the custom field id is "10100".If you want to :
- To find all rows of the grid, all you need is to use the following selector: "tr.tg-row-customfield_10100_grid"
...
- To find the "Status" column: "td.tg-col-istatus-customfield_10100_grid"
...
- To find the table of your grid (excluding the header, the footer, and the columns' titles): "table#customfield_10100_grid"
...
- To find the header of your grid: "div#tg-header-customfield_10100_grid"
...
- To find the footer of your grid (pager): "div#customfield_10100_grid_pager"
...
- To find the label cell of the index column: "th#customfield_10100_grid_rn"
...
- To find the label cell of the column "Acceptability" defined in the configurations as "unmiti_acceptability": "th#customfield_10100_grid_unmiti_acceptability"
...
- To find the cell from the first column of the second row: "#tg-cell-r2c1-customfield_10100_grid"
...
Now, let's make your grid a little bit more fun and bring some colors.
We will do it using the Announcement Banner free plugin for Jira. To enter it, press 'gg' on your keyboard and the appeared panel type: "Announcement banner".
In the "Announcement" text block we can add our CSS styles:
...
And change the visibility status under the text filed to "public"
Volia! Our grid looks so beautiful now!
