• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to style the PageNav Page Links ???

#1
I want these page nav buttons to be bigger....
buttons1.png

To look more like this...
buttons2.png

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

Well-known member
#2
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.png

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

Shelley

Well-known member
#3
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.png

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

MagnusB

Well-known member
#4
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.
 

Shelley

Well-known member
#6
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.png

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

Shelley

Well-known member
#7
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;}
 

Robert9

Active member
#8
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?