Skip to main content
S
SKFPLMSupport11-Garnet
11-Garnet
August 31, 2023
Question

How to apply custom fonts CSS on pagination widget

  • August 31, 2023
  • 1 reply
  • 2526 views

Hi Team,

 

Can you kindly help me to resolve the issue of applying custom fonts on pagination widget ? Is there a guide or article which explains how to apply custom fonts specifically on Pagination widget ? 

 

Currently i am using Thingworx 9.2 and i am stuck on applying custom fonts on the page numbers displayed on the pagination widget.

 

Your swift response would be greatly appreciated.

1 reply

V
24-Ruby III
VladimirN24-Ruby III
24-Ruby III
September 1, 2023

Take a look here:

S
SKFPLMSupport11-GarnetAuthor
11-Garnet
September 1, 2023

Hi Vladimir,

 

Thanks for your response. I have already gone through these articles, and I have tried applying the Custom font using the first link to the page-number-button part. However, I am unsuccessful in applying the custom font for page numbers of the pagination widget.

 

Would you be so kind in providing an example for applying custom font specifically for pagination widget especially the page numbers within the widget?

V
24-Ruby III
VladimirN24-Ruby III
24-Ruby III
September 1, 2023

Try this one:

 

"Here's an example:

1. In your ThingWorx Composer, navigate to the Mashup containing the pagination widget.

2. Add a new CSS style by going to the Mashup's Style Editor.

3. In the Style Editor, locate the CSS selector for the page numbers within the pagination widget. It may have a class like `.pagination-page`.

4. Add the following CSS rule to change the font for the page numbers:

```css
.pagination-page {
  font-family: "Your Custom Font", sans-serif;
}
```

Make sure to replace `"Your Custom Font"` with the name of the custom font you want to use. If the font is not a system font, you will need to upload the font files to ThingWorx and reference them in your CSS. You can do this by using the `@font-face` rule.

5. Save the CSS style and apply it to the Mashup or specific elements as needed.

By applying the above CSS rule, the page numbers within the pagination widget will be displayed using the custom font you specified".

Terms & ConditionsCookie settingsAccessibility statement