How to apply custom fonts CSS on pagination widget

[SKFPLMSupport]

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.

[VladimirN]

Take a look here:

• "CSS for Pagination Widget": https://community.ptc.com/t5/ThingWorx-Developers/CSS-for-Pagination-Widget/td-p/771601
• "Custom Font using CSS Solved": https://community.ptc.com/t5/ThingWorx-Developers/Custom-Font-using-CSS-Solved/td-p/626000

[SKFPLMSupport]

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?

[VladimirN]

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".

[SKFPLMSupport]

Hello Vladimir,

Thanks for your response. I have followed the steps suggested as per your post but it's difficult to locate the exact class selector for page numbers. So far, I have tried all possible combinations that I can find using the class selector, but it didn't apply the custom fonts.

Examples tried so far:

ptcs-pagination#root_pagemashupcontainer-2_ptcspagination-108::part(page-number-button)::part(label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

ptcs-pagination:not([no-wc-style]) {

    font-family: 'Your Custom Font', sans-serif !important;

}

ptcs-pagination::part(page-number-button)::part(label) {

    font-family: 'Your Custom Font, sans-serif !important;

}

ptcs-label#string-per-page {

    font-family: 'Your Custom Font', sans-serif !important;

}

ptcs-label#string-jump-to {

    font-family: 'Your Custom Font', sans-serif !important;

}

ptcs-pagination-input-number#input-number {

    font-family: 'Your Custom Font', sans-serif !important;

}

.pagination-page {

font-family: 'Your Custom Font, sans-serif !important;

}

.widget-ptcspagination {

    font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination::part(page-number-button)::part(label){

    font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination::part(carousel)::part(page-number-button){

font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination::part(carousel)::part(page-number-button)::part(label){

    font-family: 'Your Custom Font, sans-serif !important;

}

.widget-ptcspagination::part(string-per-page-label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination::part(string-jump-to-label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination::part(label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

.widget-ptcspagination ptcs-button.transparent::part(page-number-button)::part(label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

ptcs-button#root_page-number-button::part(carousel)::part(page-number-button)::part(label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

#root_page-number-button .widget-ptcspagination::part(page-number-button)::part(label) {

    font-family: 'Your Custom Font, sans-serif !important;

}

#page-number-button.widget-ptcspagination::part(page-number-button) {

    font-family: 'Your Custom Font', sans-serif !important;

}

#page-number-button.widget-ptcspagination::part(label) {

    font-family: 'Your Custom Font', sans-serif !important;

}

Note: Due to NDA reasons, I am not disclosing the font names so i just replaced the font names with Your Custom Font. Can you please investigate and let me know the exact class selector for page number in pagination widget? The Thingworx version I am using is Thingworx 9.2.13-b759.

Thanks

[VladimirN]

This selector targets the label part of the page number button within the pagination widget:

`.widget-ptcspagination::part(page-number-button)::part(label)`

[SKFPLMSupport]

Hi Vladimir,

Thanks for the suggestion. We have already tried with this class selector as mentioned in my previous post example but it doesn't apply the custom font, any idea what are we missing here?

Has it worked at your end?

Thanks

[slangley]

Hi @SKFPLMSupport.

You may have to inspect the page in your browser in case the name has changed.  If you need more details, please let us know.

Regards.

--Sharon