Как правильно отобразить пагинацию на modx revo?

Question

[mih_max]

Добрый день.
Вывожу следующий код

[[!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]]`
]]
		</article>


[[!+page.nav]]
	  </div>

Всё работает в итоге, но внешний вид совсем не тот на который я расчитывал.

Должно быть так

подскажите, пожалуйста, как и что менять?

Answer 1

[Петр Марочкин]

А не проще просто css накинуть на ту разметку, что генерится?

Comments

[mih_max]

Как правильно это сделать?

[Петр Марочкин]

Ну во первых, вид очень походит на bootstrap.

Поэтому - getbootstrap.com/components/#pagination

Верстка должна быть такой:

Ну и CSS соответственно (это выдрано из 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;
}

[Петр Марочкин]

Верстку можно посмотреть по ссылке выше. Не отобразилась в посте выше.

[mih_max]

Петр Марочкин: Да, поменял код в css и всё заработало в лучшем виде) Спасибо!

Answer 2

[Sanes]

&tpl это шаблон, а не стиль. Кстати в документации не &tpl, а &tplPage Смотри пример Uikit. А вообще можешь убрать все &tpl по-умолчанию там бутстрап уже настроен.

Comments

[mih_max]

Как же без tpl?( У меня &tpl=`copy_tpl_main_bk` выводит материалы.

В примере Uikit'а используются getTickets, а я через pdoPage пытаюсь.

[Sanes]

mih_max: Открывайте исходный текст HTML того, что получилось и смотрите результат. По поводу TPL, да, все верно это шаблон pdoResources. Разницы нет, pdoResources или getTickets