FAQ Обрамляем аватар в рамочку из изображений на форуме

Администратор · Регистрация: 27.02.2009

По одному из вопросов заданных на форуме, как же обрамить в рамочку аватар.
Можно конечно сделать просто на CSS в виде border и фона - что кстати на мой взгляд предпочтительней.
Но сегодня сделаем рамочку для аватара состоящую из 8 изображений, на которые была порезана наша нарисованная заранее рамка.

Вот кусочки нашей рамочки:

А вот что получится в итоге:

HTML

Ищем в шаблоне postbit_legacy:

PHP код:



            <if condition="$show['avatar']">
                <div class="smallfont">
                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
                </div>
            </if>

И заменяем на :

PHP код:



<if condition="$show['avatar']">    
<div id="frame">   
     <div class="ftop-left">
         <div class="ftop-right">
             <div class="ftop">&nbsp;</div>
         </div>
     </div>
     <div class="frame-left">
         <div class="frame-right">
             <a href="member.php?$session[sessionurl]u=$post[userid]">
                 <img class="wrapava" src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" />
             </a>
         </div>
     </div>
     <div class="fbottom-left">
         <div class="fbottom-right">
             <div class="fbottom">&nbsp;</div>
         </div>
     </div>
</div>
</if>

Тут не используются таблицы, сверстано на DIV-ах
Сохраняем шаблон.

CSS

Далее идем в Основная таблица CSS вашего стиля и в Дополнительные определения CSS вставляем в любое из двух полей следующий код стилей:

Цитата:

ЗАМЕЧАНИЕ:
Исправьте пути до изображений рамки, если это потребуется: /images/misc/rp.png
Для #frame измените ширину width:130px в зависимости от максимально-разрешенной ширины загружаемого аватара.
То есть если у вас разрешен для загрузки аватар с размерами 100х100, то width:130px - то есть к ширине прибавляете +30px

Изображения рамки из архива заливаем по умолчанию в папку http://pcvector.ru/images/misc

PHP код:



#frame {
    margin: 25px auto 0;
    width:130px;
}
.frame-right {
    background: url("/images/misc/rp.png") repeat-y scroll right center transparent;
    padding-right: 10px;
}
.frame-left {
    background: url("/images/misc/lp.png") repeat-y scroll left center transparent;
    padding-left: 10px;
}
.ftop-left {
    background: url("/images/misc/tlp.png") no-repeat scroll 0 0 transparent;
    height: 25px;
    margin: -15px 0 0;
}
.ftop-right {
    background: url("/images/misc/trp.png") no-repeat scroll 100% 0 transparent;
    height: 25px;
    margin: -15px 0 0;
}
.ftop {
    background: url("/images/misc/tp.png") repeat-x scroll 0 0 transparent;
    height: 25px;
    margin: -15px 25px 0;
}
.fbottom-left {
    background: url("/images/misc/blp.png") no-repeat scroll 0 0 transparent;
    height: 25px;
}
.fbottom-right {
    background: url("/images/misc/brp.png") no-repeat scroll 100% 0 transparent;
    height: 25px;
}
.fbottom {
    background: url("/images/misc/bp.png") repeat-x scroll 0 0 transparent;
    height: 25px;
    margin: 0 25px;
}
.wrapava {
    margin:0 auto;
    display:block;
}

Скачать

Специально для pcvector.ru

Пользователь · Регистрация: 15.11.2011

Vector, можно пример рамки вокруг аватара на css, раз уж такая пьянка?

Пользователь · Регистрация: 03.07.2012

поддержу, обычную рамку без графики можно?

Пользователь · Регистрация: 05.02.2012

ph3s, Smalesh, атрибут border в помощь.

Пользователь · Регистрация: 03.07.2012

Цитата:

Сообщение от aleks63

ph3s, Smalesh, атрибут border в помощь.

А ведь точно, чего это я ?

PHP код:



border="5"

Пользователь · Регистрация: 26.04.2012

Спасибо огромное вектор за этот гайд! очень помог мне)..

Было бы ещё конечно классно пример на CSS

Пользователь · Регистрация: 05.02.2012

Цитата:

Сообщение от Шмальчик

Спасибо огромное вектор за этот гайд! очень помог мне)..

Было бы ещё конечно классно пример на CSS

А что тут сложного?

HTML

Код HTML:

<if condition="$show['avatar']">    
     <div id="newavatar">
             <a href="member.php?$session[sessionurl]u=$post[userid]">
                 <img class="wrapava" src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" />
             </a>
     </div>
</if>

CSS:

Код HTML:

#newavatar {
    border: значения;
}

Значения и прочие украшательства бордера читаем тут - htmlbook.ru - CSS - border

Также, можно и воспользоваться border-radius для закругления уголков.

Самый простой пример:

Код HTML:

#newavatar {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}

Пробуйте, регулируйте, подставляйте как вам угодно. Было бы желание - будет результат.

Добавлено через 1 минуту

Вот кстати Vector уже подготовил материал - читаем http://pcvector.ru/t4048/

Пользователь · Регистрация: 25.06.2011

А Как можно к аваторке прикрутить новогоднюю шапочку?

Пользователь · Регистрация: 30.05.2013

Возник вопрос а как можно сделать рамку что бы картинки были не по отдельности а сразу одна картинка вместе с размером чуть больше аватара

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от Dar

а сразу одна картинка вместе с размером чуть больше аватара

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

Добавлено через 4 минуты
Ну технически, конечно это возможно сделать.

HTML:

Код HTML:

<div class="bg-avatar">
тут сама аватарка будет
</div>

CSS:

Код HTML:

.bg-avatar{
 background:url('ПУТЬ_ДО_КАРТИНКИ_ИСПОЛЬЗУЕМОЙ_КАК_ЗАДНИЙ_ФОН') no-repeat;
width:110px; /*ширина фоновой картинки*/ 
height:110px; /*высота фоновой картинки*/ 
padding:5px; /* отступы между аватаркой и задней картинкой по краям */
}

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Хаки Аватар в navbar	Vector	Галереи, картинки, альбомы, смайлы, иконки и т.п.	13	29.01.2013 20:28
Вопрос Аватар	Fearless	Вопросы по vBulletin 3.х	1	08.02.2012 09:19
Статья Как сделать аватар ?	Vector	Софт: Графика	3	05.11.2011 08:11
Проблема В ЛС аватар по центру	Gunnerss	Вопросы по vBulletin 4.х	4	22.08.2011 10:50
Обсуждаем Аватар - как создавался фильм	Vector	Фото и видео	21	27.04.2010 01:18

Smalesh #2
20 МГц Пользователь Вес репутации: 0 Регистрация: 15.11.2011 Сообщений: 43 Сказал(а) спасибо: 12 Спасибок 6 в 6 сообщениях	Re: Обрамляем аватар в рамочку на форуме - 03.07.2012, 15:51 Vector, можно пример рамки вокруг аватара на css, раз уж такая пьянка?

ph3s #3
40 МГц Пользователь Вес репутации: 0 Регистрация: 03.07.2012 Сообщений: 96 Сказал(а) спасибо: 0 Спасибок 8 в 8 сообщениях	Re: Обрамляем аватар в рамочку на форуме - 03.07.2012, 18:49 поддержу, обычную рамку без графики можно?

aleks63 #4
70 МГц Пользователь Вес репутации: 0 Регистрация: 05.02.2012 Адрес: Los Angeles Сообщений: 170 Сказал(а) спасибо: 19 Спасибок 41 в 36 сообщениях	Re: Обрамляем аватар в рамочку на форуме - 03.07.2012, 18:58 ph3s, Smalesh, атрибут border в помощь.

ishimcity #8
00 МГц Пользователь Вес репутации: 0 Регистрация: 25.06.2011 Сообщений: 1 Сказал(а) спасибо: 0 Спасибок 0 в 0 сообщениях	Re: Обрамляем аватар в рамочку из изображений на форуме - 30.12.2012, 18:00 А Как можно к аваторке прикрутить новогоднюю шапочку?