Оформление пагинации (Pagination — порядковая нумерация страниц) для phpBB с помощью CSS3.
Изображение
Pagination можно установить как дополнение, либо как замену существующей. Модификация затронет только не места, у которых вы допишите нужный класс. Т.е. не изменяются сразу все пагинации, а только те, которые вы хотите.

Возьмём в пример нумерацию расположенную в темах, ту которая расположена внизу. И заменим её на новую.
Открываем шаблон viewtopic_body.html вашего стиля (клона prosilver), внизу шаблона находим:

Код: Выделить всё

<!-- IF S_NUM_POSTS > 1 or PREVIOUS_PAGE -->
<form id="viewtopic" method="post" action="{S_TOPIC_ACTION}">

<fieldset class="display-options" style="margin-top: 0; ">
<!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="left-box {S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ENDIF -->
<!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="right-box {S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<label>{L_DISPLAY_POSTS}: {S_SELECT_SORT_DAYS}</label>
<label>{L_SORT_BY} {S_SELECT_SORT_KEY}</label> <label>{S_SELECT_SORT_DIR} <input type="submit" name="sort" value="{L_GO}" class="button2" /></label>
<!-- ENDIF -->
</fieldset>

</form>
<hr />
<!-- ENDIF -->

<div class="topic-actions">
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
</div>

<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination">
{TOTAL_POSTS}
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
</div>
<!-- ENDIF -->
</div>
Из приведённого выше кода, для реализации того вида, что представлен на скриншоте, в первой его части нам потребуется вырезать две строки отвечающие за появление двух ссылок, расположенных сразу после последнего сообщения по двум сторонам сортировки сообщений - Пред. След.. И вторая его часть, которая отвечает за саму нумерацию. Раз мы собираемся заменить навигацию, то следует те строки удалить, оставляем:

Код: Выделить всё

<!-- IF S_NUM_POSTS > 1 or PREVIOUS_PAGE -->
<form id="viewtopic" method="post" action="{S_TOPIC_ACTION}">

<fieldset class="display-options" style="margin-top: 0; ">
<!-- IF not S_IS_BOT -->
<label>{L_DISPLAY_POSTS}: {S_SELECT_SORT_DAYS}</label>
<label>{L_SORT_BY} {S_SELECT_SORT_KEY}</label> <label>{S_SELECT_SORT_DIR} <input type="submit" name="sort" value="{L_GO}" class="button2" /></label>
<!-- ENDIF -->
</fieldset>

</form>
<hr />
<!-- ENDIF -->

<div class="topic-actions">
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
</div>

<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination">
{TOTAL_POSTS}
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a><!-- ELSE --><!-- ENDIF --><!-- ENDIF -->
</div>
<!-- ENDIF -->
</div>
После этого, перед закрывающим тегом </div> ставим:

Код: Выделить всё

<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination dark">
<span<!-- IF not PAGINATION --> class="none"<!-- ENDIF -->>
<!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="{S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ELSE --><strong>{L_PREVIOUS}</strong><!-- ENDIF -->
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION -->{PAGINATION}<!-- ELSE -->{PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
<!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="{S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ELSE --><strong>{L_NEXT}</strong><!-- ENDIF -->
</span>
</div>
<!-- ENDIF -->
Обратите внимание на класс dark:

Код: Выделить всё

<div class="pagination dark">
Для смены стиля достаточно сменить его на light или metro.

Теперь очередь стилей. Варианта два, закачать вложенный файл и залить его в папку theme вашего стиля и дописать его в stylesheet.css или внести изменения в уже существующий (colours.css), можно добавить просто в самый конец.
Стиль Light:

Код: Выделить всё

/* phpBB CSS Themes Pagination ( http://cabinetadmina.ru )
Light Theme Styles
-----------------------------*/
.pagination.light {
margin: 5px 0 ;
padding: 5px;
float: none;
overflow: hidden;
clear: both;
}

.pagination.light span {
float: right;
border: 1px solid #aaa;
display: block;
letter-spacing: 0.09em;
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
font-size: 0.9em;
background: #eaeaea;
-moz-border-radius: 3px;
border-radius: 3px;
}

.pagination.light span strong,
.pagination.light span a,
.pagination.light span a:link,
.pagination.light span a:visited,
.pagination.light span a:active {
margin: 0;
padding: 5px 8px;
font-size: 1.3em;
line-height: 26px;
letter-spacing: 0;
border: 0;
border-right: 1px solid #aaa;
}

.pagination.light span strong {
color: #000000;
background: #bbb;
background: -moz-linear-gradient(top,#bbb 0%,#efefef 100%);
background: -webkit-linear-gradient(top,#bbb 0%,#efefef 100%);
background: -o-linear-gradient(top,#bbb 0%,#efefef 100%);
background: linear-gradient(top,#bbb 0%,#efefef 100%);
}

.pagination.light span a,
.pagination.light span a:link,
.pagination.light span a:visited,
.pagination.light span a:active {
color: #616161;
background: #efefef;
background: -moz-linear-gradient(top,#fff 0%,#efefef 100%);
background: -webkit-linear-gradient(top,#fff 0%,#efefef 100%);
background: -o-linear-gradient(top,#fff 0%,#efefef 100%);
background: linear-gradient(top,#fff 0%,#efefef 100%);
}

.pagination.light span a:hover {
background: #efefef;
background: -moz-linear-gradient(top,#efefef 0%,#bbb 100%);
background: -webkit-linear-gradient(top,#efefef 0%,#bbb 100%);
background: -o-linear-gradient(top,#efefef 0%,#bbb 100%);
background: linear-gradient(top,#efefef 0%,#bbb 100%);
}

.pagination.light span a.left {
border: 0;
border-right: 1px solid #aaa;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

.pagination.light span a.right {
border: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

.pagination.light span.page-sep {
display: none;
}

.pagination.light span.page-dots {
float: none;
display: inline-block;
border: 0;
border-right: 1px solid #aaa;
font-size: 1.1em;
padding: 7px 8px 6px;
-moz-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
box-shadow: none;
}

.pagination.light span.none {
padding: 0 10px;
}

.pagination.light span.none strong {
background: none;
color: #5E5E5E;
padding: 0;
margin: 0;
border: 0;
}
Стиль Dark:

Код: Выделить всё

/* phpBB CSS Themes Pagination ( http://cabinetadmina.ru )
Dark Theme Styles
-----------------------------*/
.pagination.dark {
margin: 5px 0;
padding: 5px;
float: none;
overflow: hidden;
clear: both;
}

.pagination.dark span {
float: right;
display: block;
background: #444;
color: #ccc;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 1px solid #333;
font-size: 1em;
letter-spacing: 0.1em;
-moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2);
box-shadow: inset 2px 2px 2px rgba(0,0,0,.2);
-moz-border-radius: 3px;
border-radius: 3px;
}

.pagination.dark span strong,
.pagination.dark span a,
.pagination.dark span a:link,
.pagination.dark span a:visited,
.pagination.dark span a:active {
margin: 0 5px 0 0;
padding: 5px 9px;
font-size: 1.2em;
line-height: 26px;
letter-spacing: 0;
border: 1px solid #222;
-moz-border-radius: 3px;
border-radius: 3px;
}

.pagination.dark span strong {
color: #FFFFFF;
border: 1px solid #000;
background: #222;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
}

.pagination.dark span a,
.pagination.dark span a:link,
.pagination.dark span a:visited,
.pagination.dark span a:active {
color: #CCCCCC;
background: #555;
background: -moz-linear-gradient(top,#555 0%,#333 100%);
background: -webkit-linear-gradient(top,#555 0%,#333 100%);
background: -o-linear-gradient(top,#555 0%,#333 100%);
background: linear-gradient(top,#555 0%,#333 100%);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.pagination.dark span a:hover {
background: #444;
}

.pagination.dark span a.left {}
.pagination.dark span a.right {
margin: 0;
}

.pagination.dark span.page-sep {
display: none;
}

.pagination.dark span.page-dots {
float: none;
display: inline-block;
border: 0;
margin-right: 5px;
padding: 9px 8px 6px;
-moz-box-shadow: none;
box-shadow: none;
}

.pagination.dark span.none strong {
background: none;
padding: 0;
margin: 0;
border: 0;
-moz-box-shadow: none;
box-shadow: none;
}
Стиль Metro:

Код: Выделить всё

/* phpBB CSS Themes Pagination ( http://cabinetadmina.ru )
Metro Theme Styles
------------------------------*/
.pagination.metro {
margin: 5px 0;
padding: 5px;
float: none;
overflow: hidden;
clear: both;
}

.pagination.metro span {
float: right;
border: 0;
display: block;
letter-spacing: 0.09em;
font-size: 1em;
color: #5E5E5E;
font-weight: bold;
font-family: "Trebuchet MS", sans-serif;
}

.pagination.metro span strong,
.pagination.metro span a,
.pagination.metro span a:link,
.pagination.metro span a:visited,
.pagination.metro span a:active {
margin: 0 5px 0 0;
padding: 8px 14px;
font-size: 1.3em;
line-height: 26px;
letter-spacing: 0;
border: 0;
color: #FFFFFF;
}

.pagination.metro span strong {
background: #3a5997;
}

.pagination.metro span a,
.pagination.metro span a:link,
.pagination.metro span a:visited,
.pagination.metro span a:active {
background: #66ccff;
}

.pagination.metro span a:hover {
background: #557FD3;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}

.pagination.metro span a.right {
margin: 0;
}

.pagination.metro span.page-sep {
display: none;
}

.pagination.metro span.page-dots {
font-size: 1.3em;
float: none;
display: inline-block;
border: 0;
padding: 8px;
margin-right: 5px;
}

.pagination.metro span.none strong {
background: none;
color: #5E5E5E;
padding: 0;
margin: 0;
}
Посмотреть как это выглядит можно здесь:
Для замены или создания дополнительного при просмотре разделов форума - сделайте по аналогии.
Для клонов subsilver2 пока не делал, может быть позже:)

Файл стиля одним файлом:
phpbb_pagination.rar
1.19 КБ 405 скачиваний
Комментарии: 21

Uzanka 02 мар 2014, 19:03 Сообщение

Спасибо :Rose: попробовала поставить :D А где можно управлять размером кнопок (я в стилевой файл добавила коды) для metro? Просто для моего стиля кнопки огромные :D Скрин ниже

Изображение
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 02 мар 2014, 19:28 Сообщение

Uzanka » 20 минут назад писал(а):кнопки огромные
Ну да, в том и смысл метро стиля:)

Вот здесь:

Код: Выделить всё

.pagination.metro span strong,
.pagination.metro span a,
.pagination.metro span a:link,
.pagination.metro span a:visited,
.pagination.metro span a:active {
margin: 0 5px 0 0;
padding: 8px 14px;
font-size: 1.3em;
line-height: 26px;
letter-spacing: 0;
border: 0;
color: #FFFFFF;
}
меняйте значения в padding: 8px 14px;, тут же можно изменить размер шрифта - font-size: 1.3em; (если что).
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 02 мар 2014, 19:31 Сообщение

CabinetAdmin » 1 минуту назад писал(а):Ну да, в том и смысл метро стиля:)
аааа.. а мне цвет понравился :D

спасибо :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

eska 02 мар 2014, 22:48 Сообщение

Стиль метро вообще классный, хотел его найти и поставить на свой форум, но он везде только платный :(
  • 0

romaamor 03 мар 2014, 11:17 Сообщение

CabinetAdmin » Вчера, 18:53 писал(а):Для клонов subsilver2 пока не делал, может быть позже:)
Скорее бы. Интересно как бы у меня смотрелось.
  • 0

CabinetAdmin 03 мар 2014, 15:30 Сообщение

eska
Новый стиль на форум я как раз рисовал с элементами стиля Metro.
romaamor » Сегодня, 14:17 писал(а):Скорее бы.
Там скорее всего ничего сложно нет, я просто ещё не смотрел как там она устроена.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 03 мар 2014, 18:45 Сообщение

CabinetAdmin » Вчера, 20:53 писал(а):Для клонов subsilver2
Посмотрел как устроена пагинация на subsilver. Разница с prosilver только в том, что для пагинации есть отдельный файл pagination.html. Можно просто заменить содержимое, но в таком случае пагинация изменится везде, по всему форуму.
Если использовать модификацию только в темах, то находите:

Код: Выделить всё

<!-- INCLUDE pagination.html -->
и меняете на код данный в первом сообщении. Таких кода там два, один для верхней, другой для нижней пагинации.


Пример.
Кусок кода с пагинацией из чистого subsilver2 в шаблоне viewtopic_body.html:

Код: Выделить всё

<td class="gensmall" width="100%" align="{S_CONTENT_FLOW_END}" nowrap="nowrap"><!-- INCLUDE pagination.html --></td>
меняем на:

Код: Выделить всё

<td class="gensmall" width="100%" align="{S_CONTENT_FLOW_END}" nowrap="nowrap">
<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination dark">
<span<!-- IF not PAGINATION --> class="none"<!-- ENDIF -->>
<!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="{S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ELSE --><strong>{L_PREVIOUS}</strong><!-- ENDIF -->
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION -->{PAGINATION}<!-- ELSE -->{PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
<!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="{S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ELSE --><strong>{L_NEXT}</strong><!-- ENDIF -->
</span>
</div>
<!-- ENDIF -->
</td>
Стили, понятное дело, ставим в самый конец темы стиля.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 03 мар 2014, 19:27 Сообщение

Ни как. Не отображается.
  • 0

silver073000Василий 03 мар 2014, 20:10 Сообщение

А прикольненько так получаеся 8) Благодарю :drink:
romaamor писал(а):Ни как. Не отображается.
Я заменил содержимое файла pagination.html вот этим кодом

Код: Выделить всё

    <!-- IF PAGINATION or TOTAL_POSTS -->
    	<div class="pagination light">
    		<span<!-- IF not PAGINATION --> class="none"<!-- ENDIF -->>
    			<!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="{S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ELSE --><strong>{L_PREVIOUS}</strong><!-- ENDIF -->
    			<!-- IF PAGE_NUMBER --><!-- IF PAGINATION -->{PAGINATION}<!-- ELSE -->{PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
    			<!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="{S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ELSE --><strong>{L_NEXT}</strong><!-- ENDIF -->
    		</span>
    	</div>
    <!-- ENDIF -->
Может, ошибка в теме или во вставляемом коде? Надо в коде <div class="pagination light"> заменить light на metro или dark. Всё работает отлично :)
  • 0

romaamor 03 мар 2014, 20:26 Сообщение

BOJIK » 16 минут назад писал(а):Я заменил содержимое файла pagination.html вот этим кодом
Таки - да. :drink:
Точно под стиль моего форума.
Изображение
Теперь думаю иконки перерисовать или изменить. Не в тему они. Выдиляются.
  • 0

romaamor 10 авг 2014, 15:13 Сообщение

У меня кнопки отображаются вертикально а не горизонтально. И стандартные так же. Где то конфликт ?
  • 0

silver073000Василий 10 авг 2014, 17:29 Сообщение

А изначально горизонтально были? После чего всё началось? Все ли div`ы на месте?
  • 0

romaamor 10 авг 2014, 17:45 Сообщение

BOJIK » 10 минут назад писал(а):А изначально горизонтально были?
Да.
После чего всё началось?
Если бы я помнил. За три дня сколько было изменений...... Переустанавливал форум. Такое наблюдаю только на двух стандартных стилях. На третьем всё нормально.
  • 0

CabinetAdmin 10 авг 2014, 20:11 Сообщение

Где-то что-то удалено или не то добавлено.
+ps:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы