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

Discussion in 'Styling and Customization Questions' started by Matt777, Jan 7, 2013.

  1. Matt777

    Matt777 Member

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

    Shelley Well-Known Member

    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

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

    Shelley Well-Known Member

    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; }
  4. MagnusB

    MagnusB Well-Known Member

    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 likes this.
  5. Morgain

    Morgain Well-Known Member

    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.
  6. Shelley

    Shelley Well-Known Member

    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; }
  7. Shelley

    Shelley Well-Known Member

    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;}
  8. Robert9

    Robert9 Active Member

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

    Robert9 Active Member

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

Share This Page