Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to tweak the Pager?

My pager currently looks like this: « 1 2 3 4 5 6 7 … 495 »
I'd like it to look like this: « 1 2 3 4 5 6 7 … Next »

Is there a way to tweak the pagination without breaking the core code? Where would I start? I've been experimenting with config, custom css, helper functions, etc, and so far no luck :anguished: Any advice would be appreciated.

Comments

  • peregrineperegrine MVP
    edited October 2015

    with custom.css.

    just hide in vanilla 2.2

    a.LastPage {
    display:none;
    }
    

    ad important if you have to.


    with vanilla 2.1

    .Pager.NumberedPager a:nth-child(10) {
    display:none;
    }
    

    or try different numbers instead of 10.


    if you don't want to use css look at the vanilla 2.2 pager routines and compare with 2.1

    some of the 2.1 config options are as follows (but they won't help you.

          // Show $Range pages on either side of current
     C('Garden.Modules.PagerRange', 3);`
    
          // String to represent skipped pages
      C('Garden.Modules.PagerSeparator', '…');
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Thanks! Was not familiar with nth-child. For some reason I had to add nth-child(10) and nth-child(12) to get it to work right on subsequent pages.

    Any idea if the css "content" property could be used to add the word "Next"?

    The HTML looks like this: <a href="/discussions/p2" class="Next" rel="next">»</a>

    I tried this code but it doesn't seem to work: .Next { content: "Next"; }

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited October 2015

    You need to use pseudo elements to do that

    #PagerBefore a.Next::after {
        content: " Next";
    }
    

    Then for the pager at the bottom

    #PagerAfter a.Next::after {
     content: "Next";
        }
    

    http://www.w3schools.com/cssref/pr_gen_content.asp

  • Very nice! You guys are wizards. I actually had to tweak it a bit, in case this helps anybody else:

    #PagerBefore a.Next::before { content: " Next "; }

  • peregrineperegrine MVP
    edited October 2015

    you wouldn't necessarily need css to put wording in for Next

    if you wanted to change the » to Next you could use

    in /conf/locale.php

    $Definition['»'] = "Next »";

    or without the symbol

    $Definition['»'] = "Next";

    and/if you want

    $Definition['«'] = "Prev";

    http://vanillaforums.org/discussion/26597/tutorial-how-to-change-wording-how-to-change-text-how-to-change-language-how-to-change-locale/p1

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited October 2015
  • gharaldgharald
    edited October 2015

    @peregrine said:
    if you wanted to change the » to Next you could use

    in /conf/locale.php

    $Definition['»'] = "Next »";

    That is very cool! However, I think that would turn all your »'s being into Next »? For example, the bundled Flagging plugin uses » for a display message. Also there is an analytics notification in class.statistics.php that uses &raquo: $CallMessage .= sprintf(T("There's a problem with Vanilla Analytics that needs your attention.<br/> Handle it <a href=\"%s\">here **&raquo;**</a>"), Url('dashboard/statistics'));

    It's a minor point, but if I am right, then this wizard battle goes to vrijvlinder...

  • peregrineperegrine MVP
    edited October 2015

    gharald said: It's a minor point, but if I am right,

    but you aren't with respect to translations... :grin:

    I don't think you understand translations completely. see tutorial link below. Translations do not act like regular expressions, but more like string replacement of exact text in translation.

    I think your assumptions are incorrect.

    the two translations you mentioned would NOT be affected.

    http://vanillaforums.org/discussion/comment/234342/#Comment_234342

    I'd be happy to eat my words if you can prove it to me.

    http://vanillaforums.org/discussion/26597/tutorial-how-to-change-wording-how-to-change-text-how-to-change-language-how-to-change-locale/p1

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    The benefits to doing it like peregrine says , is that if you change themes, you will have to put that css code in that new theme, but if you use peregrines advice, that change will remain functional no matter what theme you use.

  • aha... my mistake. I didn't completely understand translations. @peregrine thanks for explaining it to me.

Sign In or Register to comment.