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

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

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