phpBB 3.3 иконки разделов спрайтом

Valery · Сообщение **Valery** » 02.01.2017 11:12

Всем известна важность индивидуальных иконок для разделов форума - методы реализации их как правило просты:
1 иконка png = 1 разделу форума.
40 разделов = 40 иконок = 40 обращений к серверу при открытии форума....

Это не наш метод. Наш метод - 1 файл на 40 разделов, но методом спрайта! Причем за счет удаления 7 иконок мы еще и выигрываем в скорости загрузки сайта.

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле.

1. content.css удалить нах:

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

.forum_link{background-image:url("./images/icon_sprite.png")}
.forum_read{background-image:url("./images/icon_sprite.png")}
.forum_read_locked{background-image:url("./images/forum_read_locked.gif")}
.forum_read_subforum{background-image:url("./images/forum_read_subforum.gif")}
.forum_unread{background-image:url("./images/forum_unread.gif")}
.forum_unread_locked{background-image:url("./images/forum_unread_locked.gif")}
.forum_unread_subforum{background-image:url("./images/forum_unread_subforum.gif")}

2. Добавить:

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

/*SPRITE vodkomotornik.ru*/
.board{background-image:url("./images/icon_sprite.png");background-repeat:no-repeat;height:48px;width:48px;position:absolute;top:4px;left:4px}
.no_1{background-position:0 0}
.no_2{background-position:-50px 0}
.no_3{background-position:-100px 0}
.no_4{background-position:-150px 0}
.no_5{background-position:-200px 0}
.no_6{background-position:-250px 0}
.no_7{background-position:-300px 0}
.no_8{background-position:-350px 0}
.no_9{background-position:-400px 0}
.no_10{background-position:-450px 0}
.no_11{background-position:-500px 0}
.no_12{background-position:-550px 0}
.no_13{background-position:-600px 0}
.no_14{background-position:-650px 0}
.no_15{background-position:-700px 0}
.no_16{background-position:-750px 0}
.no_17{background-position:-800px 0}
.no_18{background-position:-850px 0}
.no_19{background-position:-900px 0}
.no_20{background-position:-950px 0}
.no_21{background-position:-1000px 0}
.no_22{background-position:-1050px 0}
.no_23{background-position:-1100px 0}
.no_24{background-position:-1150px 0}
.no_25{background-position:-1200px 0}
.no_26{background-position:-1250px 0}
.no_27{background-position:-1300px 0}
.no_28{background-position:-1350px 0}
.no_29{background-position:-1400px 0}
.no_30{background-position:-1450px 0}
.no_31{background-position:-1500px 0}
.no_32{background-position:-1550px 0}
.no_33{background-position:-1600px 0}
.no_34{background-position:-1650px 0}
.no_35{background-position:-1700px 0}
.no_36{background-position:-1750px 0}
.no_37{background-position:-1800px 0}
.no_38{background-position:-1850px 0}
.no_39{background-position:-1900px 0}

3. forumlist_body.html
Найти:

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

<!-- EVENT forumlist_body_forum_row_prepend -->
	<dl class="row-item {forumrow.FORUM_IMG_STYLE}">
		<dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
		<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"></a><!-- ENDIF -->

Заменить на:

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

<!-- EVENT forumlist_body_forum_row_prepend -->
	<dl class="row-item {forumrow.FORUM_IMG_STYLE}"><div class="board no_{forumrow.FORUM_ID}"></div>
		<dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
		<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"><i class="fa fa-cog fa-spin fa-2x fa-fw margin-bottom red"></i></a><!-- ENDIF -->

Найти:

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

<i class="icon <!-- IF forumrow.subforum.IS_LINK -->fa-external-link<!-- ELSE -->fa-file-o<!-- ENDIF --> fa-fw <!-- IF forumrow.subforum.S_UNREAD --> icon-red<!-- ELSE --> icon-blue<!-- ENDIF --> icon-md" aria-hidden="true"></i>{forumrow.subforum.SUBFORUM_NAME}</a><!-- IF not forumrow.subforum.S_LAST_ROW -->{L_COMMA_SEPARATOR}<!-- ENDIF --><!-- EVENT forumlist_body_subforum_link_append -->

Заменить на:

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

<i class="icon <!-- IF forumrow.subforum.IS_LINK -->fa-folder<!-- ELSE -->fa-folder<!-- ENDIF --> fa-fw <!-- IF forumrow.subforum.S_UNREAD --> icon-red<!-- ELSE --> icon-blue<!-- ENDIF --> icon-md" aria-hidden="true"></i>{forumrow.subforum.SUBFORUM_NAME}</a><!-- IF not forumrow.subforum.S_LAST_ROW --> <!-- ENDIF --><!-- EVENT forumlist_body_subforum_link_append -->

Сохранить в папку изменений стандартного стиля:

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

forum\styles\vodkomoto\template\forumlist_body.html

Новые сообщения будут маркироваться анимированной иконкой:

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

<i class="fa fa-cog fa-spin fa-2x fa-fw margin-bottom red"></i>

Ниже - шаблон psd с сеткой для создания спрайта. Исходные иконки будут нужны 40х40px.
О скорости загрузки этого форума со спрайтом и распространяющего расширение для иконок разделов можно судить по скрину GMetrix ниже.

Размеченный шаблон PSD скачать ниже: