Интересная замена фотографий «Нет аватара» для uCoz
Доброго времени суток! Вот решил сделать сегодня интересное решение для тех кто никак не может приучить своих пользователей загружать аватары. Данное решение смотрится очень красиво. Разноцветные аватарки с большой первой буквой логина в середине. К каждой букве присвоен свой цвет. Данный скрипт даже полезен в некоторых моментах, если допустим ставите информер где выводятся пользователи с аватарами установив данное решение вы можете не на много снизить нагрузку на сайт.
Установка для персональной страницы
На персональной странице заменяем код $_AVATAR$ на следующий:
Далее вставляем стили в таблицу стилей:
Что-бы изменить размеры аватаров и заменителей вам нужно в 7 местах где комментарий /*Размер*/ указать свое число.
Установка для других страниц (информеры,модули)
Замените старый код отвечающий за вывод аватара в нужном месте на:
И в стили:
И опять же где комментарий /*Размер*/ заменяем число 50 на нужный размер.
Установка для персональной страницы
На персональной странице заменяем код $_AVATAR$ на следующий:
Код
<div class="avat_url_bl">
<?if($_AVATAR$)?>
<img src="<?substr($_AVATAR$,54,-65)?>" class="avt_url" />
<?else?>
<div class="user_favt alt<?substr($_USERNAME$,0,1)?>">
<?substr($_USERNAME$,0,1)?>
</div>
<?endif?>
</div>
<?if($_AVATAR$)?>
<img src="<?substr($_AVATAR$,54,-65)?>" class="avt_url" />
<?else?>
<div class="user_favt alt<?substr($_USERNAME$,0,1)?>">
<?substr($_USERNAME$,0,1)?>
</div>
<?endif?>
</div>
Далее вставляем стили в таблицу стилей:
Код
.avt_url {
height: 110px; /*Размер*/
width: 110px; /*Размер*/
border-radius:4px;
}
.user_favt {
font-size: 70px !important; /*Размер текста*/
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 110px !important; /*Размер*/
font-weight: bold;
text-align: center;
height: 110px; /*Размер*/
width: 110px; /*Размер*/
border-radius:4px;
text-transform: uppercase;
background-color: #F00;
}
.avat_url_bl {
height: 110px; /*Размер*/
width: 110px; /*Размер*/
}
.altq {background-color: #00CC00;}
.altw { background-color: #1877E0;}
.alte {background-color: #6633FF;}
.altr {background-color: #00CCFF;}
.altt {background-color: #3300FF;}
.alty {background-color: #FFFF00;}
.altu {background-color: #CCCC33;}
.alti {background-color: #999966;}
.alto {background-color: #33CC33;}
.altp {background-color: #993300;}
.alta {background-color: #9966CC;}
.alts {background-color: #006600;}
.altd {background-color: #CC0033;}
.altf {background-color: #CC0066;}
.altg {background-color: #CCCC00;}
.alth {background-color: #66FF66;}
.altj {background-color: #663300;}
.altk {background-color: #330033;}
.altl {background-color: #003366;}
.altz {background-color: #FF3300;}
.altx {background-color: #CC3399;}
.altc {background-color: #CCFF00;}
.altv {background-color: #996633;}
.altb {background-color: #3399CC;}
.altn {background-color: #669966;}
.altm {background-color: #993333;}
height: 110px; /*Размер*/
width: 110px; /*Размер*/
border-radius:4px;
}
.user_favt {
font-size: 70px !important; /*Размер текста*/
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 110px !important; /*Размер*/
font-weight: bold;
text-align: center;
height: 110px; /*Размер*/
width: 110px; /*Размер*/
border-radius:4px;
text-transform: uppercase;
background-color: #F00;
}
.avat_url_bl {
height: 110px; /*Размер*/
width: 110px; /*Размер*/
}
.altq {background-color: #00CC00;}
.altw { background-color: #1877E0;}
.alte {background-color: #6633FF;}
.altr {background-color: #00CCFF;}
.altt {background-color: #3300FF;}
.alty {background-color: #FFFF00;}
.altu {background-color: #CCCC33;}
.alti {background-color: #999966;}
.alto {background-color: #33CC33;}
.altp {background-color: #993300;}
.alta {background-color: #9966CC;}
.alts {background-color: #006600;}
.altd {background-color: #CC0033;}
.altf {background-color: #CC0066;}
.altg {background-color: #CCCC00;}
.alth {background-color: #66FF66;}
.altj {background-color: #663300;}
.altk {background-color: #330033;}
.altl {background-color: #003366;}
.altz {background-color: #FF3300;}
.altx {background-color: #CC3399;}
.altc {background-color: #CCFF00;}
.altv {background-color: #996633;}
.altb {background-color: #3399CC;}
.altn {background-color: #669966;}
.altm {background-color: #993333;}
Что-бы изменить размеры аватаров и заменителей вам нужно в 7 местах где комментарий /*Размер*/ указать свое число.
Установка для других страниц (информеры,модули)
Замените старый код отвечающий за вывод аватара в нужном месте на:
Код
<div class="avat_url_blp">
<?if($USER_AVATAR_URL$)?>
<img src="$USER_AVATAR_URL$" class="avt_urlp" />
<?else?>
<div class="user_favtp alt<?substr($USERNAME$,0,1)?>">
<?substr($USERNAME$,0,1)?>
</div>
<?endif?>
</div>
<?if($USER_AVATAR_URL$)?>
<img src="$USER_AVATAR_URL$" class="avt_urlp" />
<?else?>
<div class="user_favtp alt<?substr($USERNAME$,0,1)?>">
<?substr($USERNAME$,0,1)?>
</div>
<?endif?>
</div>
И в стили:
Код
.avt_url {
height: 50px; /*Размер*/
width: 50px; /*Размер*/
border-radius:4px;
}
.user_favt {
font-size: 70px !important; /*Размер текста*/
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 50px !important; /*Размер*/
font-weight: bold;
text-align: center;
height: 50px; /*Размер*/
width: 50px; /*Размер*/
border-radius:4px;
text-transform: uppercase;
background-color: #F00;
}
.avat_url_bl {
height: 50px; /*Размер*/
width: 50px; /*Размер*/
}
height: 50px; /*Размер*/
width: 50px; /*Размер*/
border-radius:4px;
}
.user_favt {
font-size: 70px !important; /*Размер текста*/
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 50px !important; /*Размер*/
font-weight: bold;
text-align: center;
height: 50px; /*Размер*/
width: 50px; /*Размер*/
border-radius:4px;
text-transform: uppercase;
background-color: #F00;
}
.avat_url_bl {
height: 50px; /*Размер*/
width: 50px; /*Размер*/
}
И опять же где комментарий /*Размер*/ заменяем число 50 на нужный размер.
-D-I-N-I-S-
13.07.15 в 18:39
1.6k
1
Источник
16.10.15 в 00:10