Улучшаем аватар пользователя на uCoz
827материалов
228тем на форуме
3003комментария
6154пользователя

Улучшаем аватар пользователя на uCoz


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

Шаг 1 - Установим HTML:
И так давайте разберёмся с html каркасом нашего решения, в большинстве случаев он у нас одинаковый, это ссылка или контейнер div, которому мы прописываем класс user-avatar-1 , в который устанавливаем системные переменные uCoz, отвечающие за отображение No avatar, аватар отсутствует и аватар пользователя.

для вида комментарий и информеров нам понадобиться следующий код:

HTML
Код
<a href="$PROFILE_URL$" class="user-avatar-1"><img alt="аватар" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg<?endif?>" /></a>


для форума нам понадобиться следующий код:

HTML
Код
<a href="$PROFILE_URL$" class="user-avatar-1"><img alt="аватар" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg<?endif?>" /></a>


для профиля нам понадобиться следующий код:

HTML
Код
<div class="user-avatar-1">    
    <?if($_AVATAR$)?>$_AVATAR$<?else?>    
    <img alt="аватар" src="http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg" />    
    <?endif?>    
    </div>


незабываем изменять класс user-avatar-1 на нужное вам значение от 1 до 6

Шаг 2 - Установим CSS:
А теперь давайте пропишем css стили нужного вам варианта оформление аватара:


CSS-Code
Код
/* Аватар пользователя №1    
------------------------------------------*/    
.user-avatar-1 img {    
    float:left;    
    width: 50px;    
    height: 50px;    
    border-radius:5px;    
}    

.user-avatar-1:hover img {    
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);    
    -moz-opacity: 0.7;    
    opacity: 0.7;    
    filter: alpha(opacity=85);    
}



CSS-Code
Код
/* Аватар пользователя №2    
------------------------------------------*/    
.user-avatar-2 img {    
    float:left;    
    width: 50px;    
    height: 50px;    
    border: 3px solid #555;    
    border-radius:5px;    
}    

.user-avatar-2:hover img {    
    border: 3px solid #111;    
}


CSS-Code
Код
/* Аватар пользователя №3    
------------------------------------------*/    
.user-avatar-3 img{    
    float:left;    
    width: 50px;    
    height: 50px;    
    padding: 4px;    
    border: 1px solid #CECECE;    
    border-radius:5px;    
}    

.user-avatar-3:hover img {    
    border: 1px solid #376fb9;    
}



CSS-Code
Код
/* Аватар пользователя №4    
------------------------------------------*/    
.user-avatar-4 img {    
    float:left;    
    width: 50px;    
    height: 50px;    
    padding: 4px;    
    background:#5d95df ;    
    border: 1px solid #376fb9 ;    
    border-radius:5px;    
}    

.user-avatar-4:hover img {    
    background:#34cc67;    
    border: 1px solid #2cae58;    
}


CSS-Code
Код
/* Аватар пользователя №5    
------------------------------------------*/    
.user-avatar-5 img{    
    float:left;    
    width: 50px;    
    height: 50px;    
    border-radius:5px;    
    box-shadow:0 0 3px #555;    
}    

.user-avatar-5:hover img {    
    box-shadow:0 0 3px #000;    
}



CSS-Code
Код
/* Аватар пользователя №6    
------------------------------------------*/    
.user-avatar-6 {    
    float:left;    
    width: 50px;    
    height: 50px;    
    border-radius:5px;    
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.9);    
}    

.user-avatar-6 img{    
    width: 50px;    
    height: 50px;    
    border-radius:5px;    
    position: relative;    
    z-index: -1;    
}    

.user-avatar-6:hover {    
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);    
}


7 и 8 пример:
последние два примера 7 и 8 подойдут тока для профиля и форума поэтому html-css стили будут различаться:

для профиля 7 пример:



HTML
Код
<div class="user-avatar-7">    
    <?if($_AVATAR$)?>$_AVATAR$<?else?>    
    <img alt="аватар" src="http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg" />    
    <?endif?>    
    <span>$USERNAME$</span>    
    </div>


и css стили:

CSS-Code
Код
/* Аватар пользователя №7    
------------------------------------------*/    
.user-avatar-7 {    
    float:left;    
    position:relative;    
    width: 85px;    
    height: 85px;    
}    

.user-avatar-7 img {    
    width: 85px;    
    height: 85px;    
    border-radius:5px;    
}    

.user-avatar-7 span {    
    position:absolute;    
    bottom: 0px;    
    left: 0px;    
    width:100%;    
    padding: 3px 0px;    
    border-radius:0px 0px 5px 5px;    
    background: url(http://www.center-dm.ru/ucoz/vid_avatar/v1/fon_black.png);    
       
    font:9px Verdana,Arial,Helvetica, sans-serif;    
    text-align:center;    
    color:#fff;    
}    

.user-avatar-7:hover span {    
    background:#222;    
}


для профиля 8 пример:


HTML
Код
<div class="user-avatar-8">    
    <div>    
    <?if($_AVATAR$)?>$_AVATAR$<?else?>    
    <img alt="аватар" src="http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg" />    
    <?endif?>    
    </div>    
    <span>$USERNAME$</span>    
    </div>


и css стили:

CSS-Code

Код
/* Аватар пользователя №8    
------------------------------------------*/    
.user-avatar-8 {    
    float:left;    
    z-index: 3;    
    width: 90px;    
    background:#fff;    
    position: relative;    
    padding:7px 7px 5px 7px;    
    border: 1px solid #CECECE;    
    text-align:center;    
    color:#555;    
}    

.user-avatar-8 div {    
    float:left;    
    width: 85px;    
    height: 85px;    
    margin: 0px 0px 2px 3px;    
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.9);    
}    

.user-avatar-8 img{    
    width: 85px;    
    height: 85px;    
    border-radius:5px;    
    position: relative;    
    z-index: -1;    
}    

.user-avatar-8 span {    
    width:100%;    
    font:9px Verdana,Arial,Helvetica, sans-serif;    
}


для форума 7 пример:


HTML
Код
<div class="user-avatar-7">  
  <a href="$PROFILE_URL$" ><img alt="аватар" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg<?endif?>" /></a>  
  <span>$USERNAME$</span>  
  </div>


и css стили:

CSS-Code
Код
/* Аватар пользователя №7  
------------------------------------------*/  
.user-avatar-7 {  
  float:left;  
  position:relative;  
  width: 85px;  
  height: 85px;  
}  

.user-avatar-7 img {  
  width: 85px;  
  height: 85px;  
  border-radius:5px;  
}  

.user-avatar-7 span {  
  position:absolute;  
  bottom: 0px;  
  left: 0px;  
  width:100%;  
  padding: 3px 0px;  
  border-radius:0px 0px 5px 5px;  
  background: url(http://www.center-dm.ru/ucoz/vid_avatar/v1/fon_black.png);  
   
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  text-align:center;  
  color:#fff;  
}  

.user-avatar-7:hover span {  
  background:#222;  
}




для форума 8 пример:
HTML
Код
<div class="user-avatar-8">  
  <a href="$PROFILE_URL$"><img alt="аватар" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://www.center-dm.ru/ucoz/vid_avatar/v1/no_avatar.jpg<?endif?>" /></a>  
  <span>$USERNAME$</span>  
  </div>


и css стили:

CSS-Code
Код
/* Аватар пользователя №8  
------------------------------------------*/  
.user-avatar-8 {  
  float:left;  
  z-index: 3;  
  width: 90px;  
  background:#fff;  
  position: relative;  
  padding:7px 7px 5px 7px;  
  border: 1px solid #CECECE;  
  text-align:center;  
  color:#555;  
}  

.user-avatar-8 a:link,  
.user-avatar-8 a:visited {  
  float:left;  
  width: 85px;  
  height: 85px;  
  margin: 0px 0px 2px 3px;  
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.9);  
}  

.user-avatar-8 img{  
  width: 85px;  
  height: 85px;  
  border-radius:5px;  
  position: relative;  
  z-index: -1;  
}  

.user-avatar-8 span {  
  width:100%;  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
}  

:hover.user-avatar-8 {  
  background:#c9e1f4;  
  border: 1px solid #94b4cd;  
}


На этом всё, мы установли один из восьми примеров оформления аватара пользователя на uCoz.

На этом всё, спасибо за внимание!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 24.08.2013 в 16:12
Материал просмотрен: 1669 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта