How to style the PageNav Page Links ???

Matt777

Member
I want these page nav buttons to be bigger....
buttons1.webp

To look more like this...
buttons2.webp

But as you can see, my attempt failed pretty badly. I changed the font style no problem in PageNav, Link Groups and Tabs -> PageNav Page Link... BUT I can't seem to change the size of the boxy containers without getting the bizarre results as seen in the pic above.

For one, looks like another style class "scrollable" is constraining the middle numbers to be a certain size.

I was thinking of just doing everything in the Extra.CSS template instead...

Anyone have the style changes handy, necessary to make the boxy containers larger ...?
 
I want these page nav buttons to be bigger....
View attachment 38947

To look more like this...
View attachment 38948

But as you can see, my attempt failed pretty badly. I changed the font style no problem in PageNav, Link Groups and Tabs -> PageNav Page Link... BUT I can't seem to change the size of the boxy containers without getting the bizarre results as seen in the pic above.

For one, looks like another style class "scrollable" is constraining the middle numbers to be a certain size.

I was thinking of just doing everything in the Extra.CSS template instead...

Anyone have the style changes handy, necessary to make the boxy containers larger ...?

Not sure whether there is any adverse affects doing it this way but you can try pasting the following in EXTRA.CSS

The output is as follows: >> pagnav.webp

Code:
.PageNav { line-height: 30px; font-size: 24px;}
 
The following will allow you to adjust the "page one of <page-x>" and links separately if you wanted the black text lower in font size.

pagnav2.webp

Code:
.PageNav { line-height: 30px; font-size: 16px;}
.PageNav a  { font-size: 24px; }
 
Unfortunately, xF only identifies the start with a rel="start", and the html structure changes based on the page (e.g. first page have no prev button, last page have no next page button) so you can't use nth-last-child and first-child pseudo selector. Only thing I can see working to change the first and last page size is an addon or some javascript.
 
This is something I want too - especially important for Library Articles.
But I got the same result as you and never went back to it yet.
Also get the same result as yours with Shelley's css. in EXTRA. :(

Any way to reduce the size of Next? It would balance the smaller start text.

The following css has this output (screenshot below) this would lower the "next" text but i haven't checked thoroughly if this has any adverse affects elsewhere.

pagnav3.webp

Code:
.PageNav { line-height: 30px; font-size: 14px;}
.PageNav a  { font-size: 24px; padding: 0 5px;}
.PageNav a.text { font-size: 14px; }
 
This is something I want too - especially important for Library Articles.
But I got the same result as you and never went back to it yet.
Also get the same result as yours with Shelley's css. in EXTRA. :(

Any way to reduce the size of Next? It would balance the smaller start text.

Am I to assume you mean the scrollable boxes are being cut off?At this location http://fcuk.dev.waindigo.com/library-articles/subjects-exams.2/

Try adding the following. Although, the whole pagnav thing is a pain in the arse to get right but that should stop those boxes being cut off.

Code:
.PageNav .scrollable {
    height: 24px !important;}
 
Have you ever tried to set the pagenav to the right site?
It will change the row to

Next 5 4 3 2 1 Page 1 from 5

Unfortunately i have no clue how the change the row back.
The only solution i can imagine now is to make the div as small as needed and the other one that is now at the left side as long as possible and float both with float:left.

Any better idea?
 
Top Bottom