Доброго времени суток! Вот решил сделать сегодня интересное решение для тех кто никак не может приучить своих пользователей загружать аватары. Данное решение смотрится очень красиво. Разноцветные аватарки с большой первой буквой логина в середине. К каждой букве присвоен свой цвет. Данный скрипт даже полезен в некоторых моментах, если допустим ставите информер где выводятся пользователи с аватарами установив данное решение вы можете не на много снизить нагрузку на сайт.
Установка для персональной страницы
На персональной странице заменяем код $_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 на нужный размер.
