Оформление пагинации (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

romaamor 10 авг 2014, 20:16 Сообщение

Да, ругается на скрипт счётчика. Убрал. Можно как то скрипт скрыть от бота ?
  • 0

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

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

<!-- IF not S_IS_BOT --> ... <!-- ENDIF -->
romaamor » Сегодня, 18:13 писал(а):У меня кнопки отображаются вертикально
Нет стилей для элемента из первой темы.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 авг 2014, 21:03 Сообщение

CabinetAdmin » 9 минут назад писал(а):Нет стилей для элемента из первой темы.
Да как нету ? Отоброжается стиль кнопок метро, но криво.
Изображение
  • 0

CabinetAdmin 10 авг 2014, 21:15 Сообщение

Я вижу просто цифры в столбик.
Первое. В теме стили для Metro, а в структуре класс dark:

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

<div class="pagination dark">
Второе. Каждая ссылка(цифра) в теге <li>. Из-за этого тега всё в столбик.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 авг 2014, 21:26 Сообщение

CabinetAdmin » 10 минут назад писал(а):Первое. В теме стили для Metro, а в структуре класс dark:
Да, было такое. Исправил но не помогло.
CabinetAdmin » 10 минут назад писал(а):Второе. Каждая ссылка(цифра) в теге <li>. Из-за этого тега всё в столбик.
А вот тут я в тупеке. Даже не знаю где смотреть. :(
  • 0

CabinetAdmin 10 авг 2014, 21:33 Сообщение

Вообще эти ссылки формируются в includes/functions.php, где-то начиная с 2171 строки:

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

// Pagination functions
Например:

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

$page_string .= ($i == $on_page) ? '<strong>' . $i . '</strong>' : '<a href="' . $base_url . "{$url_delim}start=" . (($i - 1) * $per_page) . '">' . $i . '</a>';
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 авг 2014, 21:40 Сообщение

Найти ошибку в коде шаблона мне не удалось. Вырезал кусок кода Pagination functions с исходников и вставил в свой шаблон. Работает. Но чувствую что мне это аукница в другом месте.
  • 0

Похожие темы