How to style the PageNav Page Links ???

[Matt777]

I want these page nav buttons to be bigger....


To look more like this...


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

 

[Shelley]

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: >>

.PageNav { line-height: 30px; font-size: 24px;}

 

[Shelley]

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.

.PageNav { line-height: 30px; font-size: 16px;}
.PageNav a  { font-size: 24px; }

 

[MagnusB]

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.

 

[Morgain]

I want these page nav buttons to be bigger....
View attachment 38947

To look more like this...
View attachment 38948

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.

 

[Shelley]

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.

.PageNav { line-height: 30px; font-size: 14px;}
.PageNav a  { font-size: 24px; padding: 0 5px;}
.PageNav a.text { font-size: 14px; }

 

[Shelley]

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.

.PageNav .scrollable {
    height: 24px !important;}

 

[Robert9]

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?

 

[Robert9]

Solved with <ul float right and <li float left.