How to display pagination in modx revo?

Good afternoon.
Deduce the following code
[[!pdoPage?
&element=`pdoResources`
&limit=`5`
&depth=`0`
&parents=`335`
&includeTVs=`image`
&includeContent=`1`
&sortdir=`DESC`
&tpl=`copy_tpl_main_bk`
 &tplPageWrapper=`@INLINE <ul class="actions pagination">[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul>`
&pageLinkScheme=`/[[+pageVarKey]]-[[+page]]`
]]



[[!+page.nav]]
 

Everything works in the end, but appearance is not one on which I relied.
ae432ae569b843d29fdc32ddc65780f8.png
It must be so
e481764fe5a0494c93a265dc090cfce8.png
please tell me how and what to change?
July 9th 19 at 10:55
2 answers
July 9th 19 at 10:57
Solution
Wouldn't it be easier just to throw the css in the markup that is generated?
How to do it? - douglas.Schultz commented on July 9th 19 at 11:00
Well, firstly, the view is very similar to the bootstrap.

So getbootstrap.com/components/#pagination

The layout should be:


    Well and CSS, respectively (it is torn from bootstrap.css):
    .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    }
    .pagination > li {
    display: inline;
    }
    .pagination > li > a,
    .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    }
    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }
    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }
    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
    }
    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
    }
    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
    }
    .pagination-lg > li > a,
    .pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    }
    .pagination-lg > li:first-child > a,
    .pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    .pagination-lg > li:last-child > a,
    .pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
    .pagination-sm > li > a,
    .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    }
    .pagination-sm > li:first-child > a,
    .pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    }
    .pagination-sm > li:last-child > a,
    .pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    }
- Marcus.Wolff commented on July 9th 19 at 11:03
The layout can be viewed at the link above. You don't see in the post above. - Marcus.Wolff commented on July 9th 19 at 11:06
: Yes, I changed the code in css and it worked in the best possible way) Thank you! - douglas.Schultz commented on July 9th 19 at 11:09
July 9th 19 at 10:59
&tpl this is a template, not the style. By the way the documentation &tpl, a &tplPage See example Uikit. But in General I can remove all the &tpl by default there bootstrap is already configured.
As without tpl?( I &tpl=`copy_tpl_main_bk` renders content.

In the example Uikit'and used getTickets, and I pdoPage trying. - douglas.Schultz commented on July 9th 19 at 11:02
Open HTML source of what happened and see the result. About TPL, Yes, that's right, this template pdoResources. There is no difference, pdoResources or getTickets - Marcus.Wolff commented on July 9th 19 at 11:05

Find more questions by tags MODX