logo

NJP

Resize text using CSS on the Portal

Import · Jan 29, 2022 · article

The following steps demonstrate how to use CSS on a Portal Widget Instance to resize text on that specific Widget Instance in the Portal.

This example uses an Instance of the 'Report'-widget, but apart from the CSS selector, all same steps can be used for other Widgets as well. In this example we increase the size of the font used in the Legend.

On the widget in the Portal, ctrl + right click on the widget and select 'Instance in Page Editor':

image

You should see (something similar as) the following:

image

In the CSS field enter the following and press Save:

g.highcharts-legend-item > text{
    font-size: 20px !important;
  }
  • change 20px to any size font you want
  • change g.highcharts-legend-item > text to the element selector of the item you want to resize if above is not working for your widget.
  • !important might not be needed, but is used to overrule any CSS on the element level.

And done, the font of the Legend is not 20px:

image

View original source

https://www.servicenow.com/community/developer-articles/resize-text-using-css-on-the-portal/ta-p/2323251