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

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

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.9 Kb)
Рейтинг: 8  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 9097          Комментариев: