Can you change the pagination icons?

Search
1

We need to change the page change icons in the pagination component to set the icons according to the client’s style. Is this possible?

Thank you!

image

2

Hi David,

Welcome to the Community!

You can customize the appearance of the pagination component to match the screenshot you provided through a combination of CSS and component properties.

For the component properties, you could utilize pageLabel, maxVisiblePagesMobile and maxVisiblePagesDesktop. In your vertical’s config file, your pagination component, within componentSettings, may look something like this:

"Pagination": {
    "noResults": {
      "visible": true
    },
    "pageLabel": "",
    "maxVisiblePagesMobile": 3,
    "maxVisiblePagesDesktop": 3
}

After configuring the additional component properties, you can use CSS to achieve the branded styling from the screenshot. In your answers.scss file, you could achieve this with the following styles:

span#active-page {
    border-radius: 50%;
    background-color: orange;
    color: white;
}

.yxt-Pagination-icon {
    color: orange;
}

With the above customization, the pagination component now looks like this:
Screen Shot 2021-11-10 at 10.53.08 AM

Best,
DJ

1 Like
3

Hi DJ!

Thank you very much for your help.

I have been working on this line since I assumed that by CSS it was possible to customize it but really what we need is to change the 2 icons that I mark in red for the .svg provided by the client. Do you know if it is possible to make that change?

Thanks again!

image

Regards,

David

4

Replacing the icons instead of simply changing their styles is possible but requires overriding the default pagination component. You can read about this process here.

While possible, it is a more complex process involving custom code beyond simply adding CSS styles or component properties.

Best,
DJ