Главная » 2010 » Декабрь » 4 » Необычные иконки групп (Скрипты для ucoz)
04.12.2010, 14:51

Необычные иконки групп



Необычный способ реализации иконок для групп пользователей с помощью css.

Плюсы:
+ Всего одна картинка.
+ Настройка надписи на иконке в панели управления.
+ Настройка цвета иконки при помощи CSS.

Минусы:
- Работает только на белом фоне.
P.S. Тем не менее в прикрепленном архиве есть psd, там можно менять цвет фона. Только меняем не заливкой, а через свойства слоя "Фон" (color overlay).

Демо

Установка:
1. Кладём картинку userGroup.png (есть в прикрепленном архиве) в папку img на сервере.
2. Задаём стили для групп пользователей.

Code
.groupUser {background-color: #a2a7ac;} /* Пользователи */
  .groupVerify {background-color: #007eff;} /* Проверенные */
  .groupModer {background-color: #34b02a;} /* Модераторы */
  .groupAdmin {background-color: #b02a2a; font-weight: bold;} /* Администраторы */
  .groupOther1 {background-color: #b4aa10;} /* Новая группа 1 */
  .groupOther2 {background-color: #1fb1ac;} /* Новая группа 2 */
  .groupOther3 {background-color: #6539e5;} /* Новая группа 3 */
  .groupOther4 {background-color: #cf8332;} /* Новая группа 4 */
  .groupOther5 {background-color: #c632cf;} /* Новая группа 5 */
  .groupOther6 {background-color: #a239e5;} /* Новая группа 6 */
  .groupOther7 {background-color: #3e9120;} /* Новая группа 7 */
  .groupOther8 {background-color: #916020;} /* Новая группа 8 */
  .groupOther9 {background-color: #797979;} /* Новая группа 9 */
  .groupOther10 {background-color: #7ba227;} /* Новая группа 10 */
  .groupFriends {background-color: #204b91;} /* Друзья */

3. Задаём стили для кнопки:

Code

.userGroup {width: 158px; height: 28px; background: url('./img/userGroup.png') no-repeat; color: #fff; text-align: center; font: bold 11px 'Tahoma',sans-serif; padding-top: 8px;}

4. В шаблоне "Вид материалов форума" в нужное место ставим иконку:

Code

<?if($GROUP_ID$="1")?><div class="userGroup groupUser">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="2")?><div class="userGroup groupVerify">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="3")?><div class="userGroup groupModer">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="4")?><div class="userGroup groupAdmin">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="5")?><div class="userGroup groupOther1">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="6")?><div class="userGroup groupOther2">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="7")?><div class="userGroup groupOther3">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="8")?><div class="userGroup groupOther4">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="9")?><div class="userGroup groupOther5">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="10")?><div class="userGroup groupOther6">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="11")?><div class="userGroup groupOther7">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="12")?><div class="userGroup groupOther8">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="13")?><div class="userGroup groupOther9">$GROUP_NAME$</div><?endif?>
  <?if($GROUP_ID$="14")?><div class="userGroup
groupOther10">$GROUP_NAME$</div><?endif?>
<?if($GROUP_ID$="15")?><div class="userGroup groupFriends">$GROUP_NAME$</div><?endif?>
Материал взят с сайта infoscript.ru
Теги: Скачать Необычные иконки групп
Скачать "Необычные иконки групп"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://twitter.com/uch0601
Категория: Скрипты uCoz | Просмотров: 3693 | Добавил: antisept | Рейтинг: 5.0/1 |
Теги: Иконки, групп, необычные
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]