• ГЛАВНАЯ
  • Наши баннеры
  • Персонал сайта
Новая музыка
Новые статьи
Новые сайты в ТОПе
Новые сервера
Новое видео
Форма входа
Меню сайта
Главная страница Новости Форум Топ сайтов Мониторинг Статьи Файлы Фильмы онлайн Музыка онлайн
Все для игр
Патчи Карты Руссификаторы No CD Мультиплеер Моды Звуки Трейнеры Серверы Читы Прочее
Все для сайта
Шаблоны для uCoz Шаблоны для форумов uCoz Иконки для форума Иконки для групп Шапки для сайтов Ранги для uCoz Скрипты для uCoz PSD макеты Шаблоны для Dle Хаки для Dle Модули для Dle Шаблоны для форумов Dle
Программы
Мультимедиа Безопасность Графика Офис Система Софт CD/DVD Софт для сайтов Для игр Руссификаторы
Мобильные и КПК
Игры Видео 3gp Музыка mp3 Софт Бесплатные СМС Темы Картинки (Заставки) Разное
Игры
Игры для PC Игры для PSP Игры для XBox 360 Игры PlayStation Игры для телефонов Разное
PhotoShop
Кисти Исходники (шаблоны) Стили Градиенты Плагины Формы Узоры (Patterns) Шрифты Клипарты Другое для Photoshop

20:46
Tоп пользователей с дополнительной информацией V2
Новые новости
Дискотека 2013 Dance Clu...
Радио Record Superchart ...
Disco Russ (2013)
Radio Record Top 100 (20...

Популярные новости
Радио Record Superchart Top-33 + Радио B...
Радиоактивность
21го мая наступит конец света!
Дискотека 2013 Dance Club Vol. 119 (2013...
Disco Russ (2013)

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


Информация о новости:
Название: Tоп пользователей с дополнительной информацией V2.
Категория: Прочее.
Добавил: startsmart.
Дата добавления: 08.02.2013.
Комментарии: 0.
Рейтинг: 0.0.
Новость прочитали: 300.
Ключевые слова Tоп пользователей с дополнительной информацией V2- скачать БЕСПЛАТНО Tоп пользователей с дополнительной информацией V2, Скачать файлы Прочее,

На данной странице вы можете прочитать и поделиться с другом новостью - 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>

Советуем посмотреть
Русский язык. Связь слов в словосочетании (2011) DVDRip 456
Просмотров
0
Комменты
FIFA 12: идентичные версии для PC и консолей 613
Просмотров
0
Комменты
DJ Bobo - Dancing Las Vegas - 2011, MP3, 320 kbps 519
Просмотров
0
Комменты
VA - Floorfillers Old Skool - 2011, MP3 846
Просмотров
0
Комменты
Первая доза бесплатно! 635
Просмотров
0
Комменты


Понравилось? Поделись ссылкой с другом...


HTML
BB-Code
Ссылка
Категория: Прочее | Просмотров: 300 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
скачать
www.Up-Royal.Do.Am - Королевство развлечений.Музыка онлайн,видео онлайн, мониторинг игровых серверов, ТОП сайтов, игры, все для PhotoShop,Все для сайтов uCoz, Dle,все для игр, все для Mobile И КПК,софт в огормном количестве! Создание и продвижение сайтов - новая кс 1.6 2011,Скачать Counter-Strike,Конте​р страйк бесплатно,Скачать пачти для CS 1.6 бесплатно,Скачать готовые ссервера для CS 1.6,готовые сервера бесплатно,Скачать плагины,моды,модели оружия,создать сервер,Всё для Ucoz,укоз,юкоз,скача​ть шаблоны для Ucoz,Скрипты для Ucoz бесплатно,скачать,чи​ты для Counter-Strike,скача​ть wall Hack + AIM,скачать чит бесплтано для CS, AIM для CS, читы бесплатно, скачать читы для контер стайк, безопасность для компьютера, софт и различные программы, мультимедия, графика для сайтов, баннера, рейтинг, оптимизация для сайтов, продвижение, скачать фильмы, смотреть онлайн видео, смешные картинки,скачать Готовые сервера CS 1.6 бесплатно, скачать Модели Игроков CS 1.6 бесплатно, скачатьМодели Оружия CS 1.6
теги
Мини-чат
Правила чата [?]
Партнер №1
Баннеры



Наши баннеры [?]

Мы в Топах:
Клуб хобби - сайт о коллекционировании и различных видах увлечений. Телефонные карты Липецка и регионов России. Галерея. Обмен. Форум. ТОП сайтов.
Статистика
Онлайн:

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

Зарег. на сайте:
Всего: 278
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Обычных: 277
Г.Администраторов: 1
Администраторов:
Пиар менеджеров:
Г.Модераторов:
Модераторов: 0
Дизайнеров:
Журналистов:
Контролеров:
Файловиков:
Тимэйтов:
Друзья: 0
Проверенных: 0
Забаненых: 50
Из них:
Парней: 263
Девушек: 15
Счетчик материалов:
Новостей: 7956
Статей: 48
Файлов: 504
Форум: 225/360
Сайтов: 13
Картинок: 1
Комментариев: 35
Счетчики:
Сегодня нас посетили:

Администрация не несёт ответственности за файлы на портале.
Все права не нарушены.
© 2011 www.Up-Royal.Do.Am

ForumSiteMap | SiteMap | Хостинг от uCoz
Лучшие пользователи
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
{Бармен} Постов [ 188 ]
Farell Постов [ 65 ]
Xatis Постов [ 36 ]
40Glocc Постов [ 14 ]
MyLife Постов [ 7 ]
Krasnov Репутация [ 20 ]
Xatis Репутация [ 8 ]
{Бармен} Репутация [ 4 ]
demon4ik Репутация [ 1 ]
Вася Репутация [ 0 ]
Черный Юмор [ 57 ]
Экзамен по биологии за 9 класс... [ 17 ]
Анекдоты,смешные истории [ 14 ]
Прикольные демотиваторы [ 7 ]
Сталкер ТеньЧернобыля [ 5 ]
Цигун [ 1 ]
Новый Топ пользователей с ав... [ 0 ]
Простой и красивый вид формы... [ 0 ]
Красивый информер "кто ... [ 0 ]
Flash радио для сайта [ 0 ]