Главная » Администрирование сайта » Управление шаблонами » Рамка для аватара на форуме

Рамка для аватара на форуме

29.08.2012 в 16:32
Автор: Selena

Сначала необходимо залить на сайт картинки, образующие рамку. Для этого надо зайти в Файловый менеджер, создать там папку border и загрузить в эту папку все картинки из архива (приложение)

Следующим шагом будет добавление в таблицу стилей CSS следующего кода:
 

Code

#frame {  
  margin: 25px auto 0;  
}  

.frame-right {  
  background: url("/border/r.png") repeat-y scroll right center transparent;  
  padding-right: 17px;  
}  
.frame-left {  
  background: url("/border/l.png") repeat-y scroll left center transparent;  
  padding-left: 17px;  
}  
.ftop-left {  
  background: url("/border/b_l.png") no-repeat scroll 0 0 transparent;  
  height: 17px;  
  margin: -15px 0 0;  
}  
.ftop-right {  
  background: url(" /border/b_r.png") no-repeat scroll 100% 0 transparent;  
  height: 17px;  
  margin: -15px 0 0;  
}  
.ftop {  
  background: url("/border/t.png") repeat-x scroll 0 0 transparent;  
  height: 17px;  
  margin: -15px 17px 0;  
}  
.fbottom-left {  
  background: url(" /border/t_l.png") no-repeat scroll 0 0 transparent;  
  height: 17px;  
}  
.fbottom-right {  
  background: url("/border/t_r.png") no-repeat scroll 100% 0 transparent;  
  height: 17px;  
}  
.fbottom {  
  background: url("/border/b.png") repeat-x scroll 0 0 transparent;  
  height: 17px;  
  margin: 0 17px;  
}  
.wrapava {  
  margin:0 auto;  
  display:block;  
}  

 


И последнее - открываем шаблон "Вид материала" форума и заменяем строку с кодом:

 

 

 

Code
<?if($AVATAR_URL$)?><img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?>

 


на следующий код:

 

 

 

 

Code

<div id="frame">  
<div class="ftop-left">
  <div class="ftop-right">
  <div class="ftop"> </div>
  </div>
  </div>
  <div class="frame-left">
  <div class="frame-right">
  <?if($AVATAR_URL$)?>
  <img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$">
  <?else?>
  <img src="/border/nav.jpg" alt="Аватара нет" width="120" height="120"><?endif?>
  </div>
  </div>
  <div class="fbottom-left">
  <div class="fbottom-right">
  <div class="fbottom"> </div>
  </div>
  </div>
</div>

 


Заодно у нас в случае, если пользователь не поставил аватару, выведется заглушка "Нет аватара". Вот как это выглядит:

 

 

 

 

 

 


Прикреплённый файл: 444_border.zip (4.9Kb)

Рейтинг: 7  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 6286          Комментариев: 5
04.05.2014 в 19:28      0  

Картинки рамки в прикрепленном файле "444_border.zip".
24.03.2015 в 22:42      +1  

У вас тут косяк в стилях, картинки перепутаны , так правильно 
Код
#frame {  
  margin: 25px auto 0;  
}  

.frame-right {  
  background: url("/border/r.png") repeat-y scroll right center transparent;  
  padding-right: 17px;  
}  
.frame-left {  
  background: url("/border/l.png") repeat-y scroll left center transparent;  
  padding-left: 17px;  
}  
.ftop-left {  
  background: url("/border/b_l.png") no-repeat scroll 0 0 transparent;  
  height: 17px;  
  margin: -15px 0 0;  
}  
.ftop-right {  
  background: url(" /border/b_r.png") no-repeat scroll 100% 0 transparent;  
  height: 17px;  
  margin: -15px 0 0;  
}  
.ftop {  
  background: url("/border/t.png") repeat-x scroll 0 0 transparent;  
  height: 17px;  
  margin: -15px 17px 0;  
}  
.fbottom-left {  
  background: url(" /border/t_l.png") no-repeat scroll 0 0 transparent;  
  height: 17px;  
}  
.fbottom-right {  
  background: url("/border/t_r.png") no-repeat scroll 100% 0 transparent;  
  height: 17px;  
}  
.fbottom {  
  background: url("/border/b.png") repeat-x scroll 0 0 transparent;  
  height: 17px;  
  margin: 0 17px;  
}  
.wrapava {  
  margin:0 auto;  
  display:block;  
}  
25.03.2015 в 10:53      0  

Спасибо. Исправлено.
04.05.2014 в 15:45      0  

Здравствуйте, подскажите пожалуйста как сделать так что бы , рамки обхватывали периметр всего аватара. У меня получилось по горизонтали в уровень с аватаром, а по вертикали очень большой отсуп в сторону.   И кстати, картинки образующие  рамку где можно найти?
25.03.2015 в 10:55      0  

Цитата
.frame-right {
background: url("/border/r.png") repeat-y scroll right center transparent;
padding-right: 17px;
}
.frame-left {
background: url("/border/l.png") repeat-y scroll left center transparent;
padding-left: 17px;
}

Измените указанные отступы на меньшие.

Картинки можно найти в интернете.