Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Делаем иконки статуса тем/форумов одной картинкой (спрайтом)

Предыдущая тема Следующая тема Перейти вниз

Делаем иконки статуса тем/форумов одной картинкой (спрайтом)

Сообщение автор Da Vinchi в Ср 20 Июл - 10:56

Довольно удобное решение, особенно для форумов 2х2

Давно собирался поделится с сообществом данным хаком, поэтому изначально предполагалось сделать что-то наподобие урока, но в последствии засомневался из-за сложности создания и использования таких иконок в дальнейшем. К счастью, сейчас на тему создания картинок-спрайтов в интернете размещено огромное количество уроков, и при необходимости, кому надо будет, тот для себя отыщет и изучит. А для остальных предлагаю, так сказать, готовое решение с описанием.
Кто-то наверняка знает, но не использует либо в силу своей лени, либо оно ему незачем . Не сказать, что эта идея инновационная, но кардинально отличается от всех тех представлений, которые вы видели раньше на этом форуме. Так вдруг данный хак подтолкнет наших "фотошоперов" к созданию новых иконок по данному эскизу?!
Хоть на форуме тех.поддержки и полно ответов на тему своих иконок, но многие забывают, что помимо основных иконок тем (в теме есть новые сообщения/нет новых сообщений), тема так же может быть закреплена и в ней могут быть новые сообщения. Или тема может быть вовсе закрытой, а в ней могут быть новые сообщения. А еще круче - закрепленная закрытая тема и в ней есть новые сообщения (оставленные, к примеру, администраторами или модераторами).

Вместо 4-8 отдельных иконок используется всего одна. К сожалению, без минусов использования данного хака не обойтись: при замене иконки на другую каждый раз придется редактировать в фотошопе, высчитывая местоположение иконки (а то и нескольких иконок), и затем снова загружать на форум. Единственной иконки которой здесь нет - иконка форума "переадресация на URL", поскольку эти иконки я делал лет 5 назад специально для своего форума. Несмотря на все сложности создания и редактирования иконок, можете использовать мои иконки у себя на форуме.

8 типов иконок в одной картинке (слева на право):
- Обычная открытая тема, Нет новых сообщений;
- Обычная открытая тема, Есть новые сообщения;
- Обычная закрытая тема, Нет новых сообщений;
- Обычная закрытая тема, Есть новые сообщения;
- Важная открытая тема, Нет новых сообщений;
- Важная открытая тема, Есть новые сообщения;
- Важная закрытая тема, Нет новых сообщений;
- Важная закрытая тема, Есть новые сообщения.
Спрайт размером 288px в ширину и 28px в высоту.
Каждая иконка в спрайте имеет размер ~36px в ширину и 28px в высоту.
В коде разметил комментарии: где и для какой иконки используется позиционирование.

Код:
/* Иконки форумов одной картинкой */
div.icon {
  display: inline-block;
  width: 36px !important;
  height: 28px !important;
  background-image: url(https://i37.servimg.com/u/f37/18/40/24/57/4444410.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
/* Обычная открытая тема - Есть новые сообщения */
.inew .icon {
  background-position: -36px 0;
}
/* Обычная закрытая тема - Нет новых сообщений */
.iclosed .icon {
  background-position: -74px 0;
}
/* Обычная закрытая тема - Есть новые сообщения */
.inew.iclosed .icon {
  background-position: -108px 0;
}
/* Важная открытая тема - Нет новых сообщений */
.isticky .icon {
  background-position: -144px 0;
}
/* Важная открытая тема - Есть новые сообщения */
.inew.isticky .icon {
  background-position: -180px 0;
}
/* Важная закрытая тема - Нет новых сообщений */
.isticky.iclosed .icon {
  background-position: -216px 0;
}
/* Важная закрытая тема - Есть новые сообщения */
.inew.isticky.iclosed .icon {
  background-position: -252px 0;
}

В данном коде Вас интересует все, но если захотите заменить спрайт то вот эта часть кода актуальнее всего

Код:
background-image: url(https://i37.servimg.com/u/f37/18/40/24/57/4444410.png);

В данном случае думаю и так понятно где ссылка на картинку.

Da Vinchi
 

Мужчина

Сообщения : 183
Возраст : 35
Место обитания : Студия WEB-разработок Da Vinchi
Регистрация : 2016-04-07
Благодарности : 240

Без предупреждений

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения