Xpages OneUI 3.02 paging looks terrible; how to replace with OneUI 2

Question

I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.

Here is an example of the old paging style:

And here is an example of the new styling:

I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.

I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.

Any help would be greatly appreciated.

Answer 1

Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it. Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.

Comparing to a V2 page makes it easier to figure out.

Just reading the CSS source is rather a pain. The Dev tools rock