» »

Значки отличия пользователя в ПС для uCoz


Значки отличия пользователя в ПС для uCoz

Это больше подойдет к дизайн, так как значки отличие украшают персональную страницу. И в тоже время они несут информацию о пользователе, о его активности на сайте. Здесь будет код на установку, и с ним будут уже идти значки, которые вы скачаете и в файловом менеджере загрузите. Но также вы имеете право их поменять и что то поставить свое, ближе к вашей тематике, сам только нужно сменить иконки. Есть по такой теме еще один скрипт, но он реально изменен и возможно больше подойдет на ресурс.

Но мы будем устанавливать этот вид кнопок.

Кнопки отличия пользователя

Установка:

Идем в корень сайта и создаем папку znak_user и все грузим, что скачали.
Далее нам нужно зайти в персональную страницу пользователей и установит данный код.

Код
<div class="signsOver">  
<?if($_LOAD_ENTRIES$>10)?><div class="signOne sLoad"><span><i>Знак выдается за 10 добавленных файлов</i></span></div><?endif?>  
<?if($_COM_ENTRIES$>5)?><div class="signOne sComments"><span><i>Знак выдается за 5 коммен-<br>тариев</i></span></div><?endif?>  
<?if($_FORUM_ENTRIES$>1)?><div class="signOne sForum"><span><i>Знак выдается за активность на форуме</i></span></div><?endif?>  
<?if($_REPUTATION$>1)?><div class="signOne sReputation"><span><i>Знак выдается за хорошую репутацию</i></span></div><?endif?>  
<?if($_AVATAR$)?><div class="signOne sAvatar"><span><i>Знак выдается за установку аватара</i></span></div><?endif?>  
<?if($_EMAIL_IS_VERIFIED$)?><div class="signOne sProtect"><span><i>Знак выдается за подтверж-<br>денный<br>E-Mail</i></span></div><?endif?>  
</div>  
   
<style type="text/css">  
.signsOver {width:100%;}  
.signsOver * {transition: all linear .2s; -moz-transition: all linear .2s; -webkit-transition: all linear .2s; -o-transition: all linear .2s;}  
.signOne {display:inline-block;width:90px;height:90px;position:relative}  
.signOne:hover span {opacity:1;margin-top:0px}  
.signOne span {opacity:0;margin-top:20px;cursor:help;width:100%;height:100%;top:0;left:0;position:absolute;background:rgba(178, 121, 0, 0.7);color:#FFF;font-size:11px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 50px;}  
.signOne span i {font-style:normal;padding:10px;display:block}  
.sLoad {background:url('/znak_user/load.png') center no-repeat}  
.sComments {background:url('/znak_user/comment.png') center no-repeat}  
.sForum {background:url('/znak_user/forum.png') center no-repeat}  
.sReputation {background:url('/znak_user/reputation.png') center no-repeat}  
.sProtect {background:url('/znak_user/email.png') center no-repeat}  
.sAvatar {background:url('/znak_user/photo.png') center no-repeat}  
</style>


С котом идут сразу стили, если вы хотите изменить оттенок прозрачный, который при наведение будет, то можно стили убрать и прописать в CSS сайта.

Вот к примеру, с такого кода, на сайте сделал такой вид.

Значки отличия на zornet

Надеюсь посыл понятен, это поставить готовый скрипт или что то поменять, а точнее само изображение, просто посмотрите его размеры и найдите, то что вам нужно и соответствует вашей теме на интернет ресурсе.

Источник: http://yraaa.ru/
28.03.2016 Загрузок: 4 Просмотров: 396 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
Scheme
Scheme 28.03.2016 17:021
0
Точно был такой скрипт на сайте, так как устанавливал его. Не про этот говорю, так как он совершенно другой по дизайн выполнен и там немного функций другие, если не активирован, то мутно кнопка видна, если написал иди залил файл, то нормально становиться.

Kosten
Kosten 28.03.2016 17:092
0
kvyntin, да в курсе, просто также не мог найти, не делаю название одинаково как на других сайтах, это если там пишут кнопка, как то по другому перекручу, но смысл чтоб был тот же. А главное просто там хотел дописать, как сейчас делаю, не просто описать скрипт и как установить, а если есть возможность, то что можно просто его переделать, в этом случай поменять изображение под свою тему, на на этом сайте так сделал.
Сопрано
Сопрано 28.03.2016 18:173
0
Так можно и на простую персональную страницу поставить.
Angerfist
Angerfist 28.03.2016 23:274
0
Вообще заметил на одном торрент трекере эти знаки отличия и награды подстёгивают пользователей добавлять торренты, так что не будет лишним где то)
Maryges
Maryges 18.04.2016 01:575
0
Вот если хорошо рассмотреть, такие будут кнопки, хотя они мне не очень нравятся, как и здесь, что то можно подобрать, под один стиль.

Kosten
Kosten 18.04.2016 02:366
0
Maryges, но если под один оттенок цвета, или под один стиль, то можно эти кнопки применить. Тоже не плохо на светлом будет отражаться, в стилях выставить не темный а синий оттенок, при наведение.



Скачать
avatar