Топ пользователей для uCoz как на Урааа

02013-07-14864718Денис Абдуллин

Хотите сделать на своем сайте блок с пользователями, как на Урааа? Мы поделимся с вами своим кодом топа пользователей для uCoz. Ну, и расскажем, как сделать информер. Блок не адаптивный и имеет фиксированную ширину, поэтому Вы сами будете указывать значения длины и ширины в пикселях.

Установка

Создайте информер для модуля Пользователи (Панель управления » Инструменты » Информеры). Выберите Способ сортировки по Репутации. Количество материалов – 8, а количество колонок – 1.

Вставьте следующий код в Шаблон информера.

Код

<div class="top_user"><a href="$PROFILE_URL$"><span>$REPUTATION$</span></a><div class="top_user_black"></div><img src="$AVATAR_URL$" alt="$USERNAME$" /></div>

А этот код туда, где хотите видеть блок (это может быть Первый или Второй контейнер).

Код

<div class="top_use1s">$MYINF_1$</div>

Вставьте этот код в Таблицу стилей (CSS).

Код

.top_use1s {width:300px;height:180px;background:#1d1d1d;font-family:Tahoma,sans-serif}
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#1d1d1d}
.top_user img {width:90px;margin-left:-7px}
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}
.top_user a:hover {background:rgba(255,255,255,0.1)}
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(0,0,0,0.3);margin-top:66px}

Размеры

Разобраться с размерами Вам помогут разноцветные линии на картинке:

Размеры топа пользователей для uCoz

Демо страница

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (18)

Порядок вывода комментариев:

Жегуляев Роман 2014-01-23 в 19:15 / МатериалСпам

в css

Иван Цыганков 2013-10-23 в 11:57 / МатериалСпам

А под блок подстраивается если он не большой?

ekimovura 2013-08-23 в 17:32 / МатериалСпам

А можно например переделать на топ статей ?

Илья Дементьев 2013-08-17 в 16:38 / МатериалСпам

admin, да, возможно, у меня тоже такое было)

Гость 2013-07-25 в 10:58 / МатериалСпам

Аххх прикольно придумано с теорией большого взрыва) обожаю его

ekimovura 2013-07-24 в 19:03 / МатериалСпам

Оххохохо , спасибо :D

Philip Rybalka 2013-07-15 в 04:18 / МатериалСпам

Добрая душа;)

Гость 2013-07-15 в 20:19 / МатериалСпам

До этого материала рипнул))

-8

Гость 2013-07-16 в 08:21 / МатериалСпам

Ахаха можно подумать вы все придумываете, и не разу не плагиатили))

-5

Кирилл Косырев 2013-07-15 в 21:53 / МатериалСпам

о, любимый сериал )

Philip Rybalka 2013-07-15 в 20:36 / МатериалСпам

Гость, Лохам придумать и сделать не дано.

-1

Philip Rybalka 2013-07-16 в 19:10 / МатериалСпам

Гость, Даже если я делаю плагиат элемента дизайна, я делаю так чтобы это не кто не понял.

Руслан 2013-07-17 в 07:05 / МатериалСпам

Спасибо )

Гость 2013-07-17 в 15:19 / МатериалСпам

Это как, с нуля все переписываешь, что тут можно изменить, поместить количество материалов вверх и размерами побаловаться, и за одно количество строк увеличить))

-3

Philip Rybalka 2013-07-18 в 02:46 / МатериалСпам

Гость, такую шнягу не рипаю

Jack 2014-05-03 в 21:27 / МатериалСпам

как сделать чтоб юзер без аватара отображал ноуаватар? иф ставил не пашет

Гость 2013-08-17 в 02:08 / МатериалСпам

А css код куда именно вставлять
а то я поставил в нижнею часть css на шаблоне nesoi и у меня все слетело

Илья Дементьев 2013-08-17 в 09:03 / МатериалСпам

Гость, "Вставьте этот код в Таблицу стилей (CSS)", либо же можно в <style></style>.
Слететь все могло из за того, что в шаблоне уже используются эти стили, но с другим значением.

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.

Рекомендуем к просмотру

Украшение для сайта к 9 мая Я помню