Forum Discussion

iftomkins's avatar
iftomkins
Maven
11 years ago

Custom pagination on Mobile V1

I'd like to replace the pagination dropdown on mobile. I created this pagination style for the board-level view: http://screencast.com/t/uMHJfSX6plQ. I'd like to do something at the bottom-of-the-pag...
  • cblown's avatar
    cblown
    11 years ago

    Just checking you've noticed the options in the Admin for different Mobile paginiation styles?

     

    Screen Shot 2014-02-28 at 8.08.49 am.png 

iftomkins's avatar
iftomkins
Maven
11 years ago

UPDATE:

 

Had to tweak it a little more to make all the pages fit on small screens: http://screencast.com/t/ZHsDHxjpmW1

 

Here's the CSS (using FontAwesome font icon set):

#lia-body .lia-content ul.lia-paging-full ul.lia-paging-full-pages li a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous>a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next>a {
    font-size: 15px;
    background: #f5f5f5;
    color: #3DA0A0;
    padding: 0 8px 0;
    border: 1px solid #fbfbfb;
}

#lia-body .lia-content ul.lia-paging-full ul.lia-paging-full-pages li a:hover, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous>a:hover , #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next>a:hover  {
    font-size: 15px;
    background:#3DA0A0;
    color: #f5f5f5;
}

#lia-body .lia-content ul.lia-paging-full .lia-paging-page-active>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-first>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-last>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-link-disabled a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-link-disabled a {
    font-size: 15px;
    background: none;
    color: #999999;
    margin-top: -1px;
}

#lia-body .lia-content ul.lia-paging-full li .lia-link-disabled {
    font-size: 15px;
    color: #999999;
}

#lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-paging-page-link, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-paging-page-link{
    display: none;
}

#lia-body .lia-content ul.lia-paging-full .lia-paging-page-arrow {
    display: none;
}

#lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-link-navigation:before {
    font-family: FontAwesome;
    content:  "\f105";
    color: inherit;
}

#lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-link-navigation:before {
    font-family: FontAwesome;
    content:   "\f104";
    color: inherit;
}