« Простой, светлый вид материалов для форума на uCoz »

Описание материала:

В сегодняшнем материале, мы хотим Вам предложить, ничем не особенный, но в то же время простой вид материалов для форума в системе uCoz. Данный вид сделан, под светлый дизайн, но если его немного подредактировать, то он будет отлично смотреть и на темном дизайне. Установка данного вида очень проста и не отнимет у вас много времени, и не потребует огромных знаний.



Установка:
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Простой, светлый вид материалов для форума на uCoz */
.postblock {  
width:100%;  
margin:20px 0  
}  

.post-user {  
width:180px;  
text-align:center;  
float:left;  
font-size:9pt;  
color:#999  
}  

.post-user a.postUser {  
display:block;  
font-size:9pt  
}  

.post-user .user-avatar {  
width:100px;  
height:100px;  
line-height:100px;  
margin:5px auto 10px;  
text-align:center;  
font-size:36pt;  
background:rgba(0,0,0,0.2);  
-webkit-border-radius:4px;  
-moz-border-radius:4px;  
border-radius:4px;  
cursor:default  
}  

.post-user .user-avatar img {  
width:100px;  
-webkit-border-radius:4px;  
-moz-border-radius:4px;  
border-radius:4px;  
vertical-align:top  
}  

.post-user .postip {  
font-weight:400;  
font-size:9pt;  
margin-top:10px  
}  

.post-content {  
margin-left:180px;  
margin-right:15px;  
position:relative;  
background:none repeat scroll 0 0 #fafafa;  
border:1px solid #f1f1f1;  
-webkit-border-radius:4px;  
-moz-border-radius:4px;  
border-radius:4px  
}  

.post-content .pc-triangle {  
position:absolute;  
left:-11px;  
top:60px;  
width:0;  
height:0;  
border-style:solid;  
border-width:12px 12px 12px 0;  
border-color:transparent #fafafa transparent transparent  
}  

.post-content .pc-triangle:before {  
content:'';  
top:-12px;  
left:-2px;  
position:absolute;  
border-style:solid;  
border-width:12px 12px 12px 0;  
border-color:transparent #f3f3f3 transparent transparent;  
z-index:-1  
}  

.post-content .pc-top {  
padding:10px 15px;  
border-bottom:1px solid #f1f1f1;  
font-size:9pt;  
color:#777;  
display:table;  
width:100%;  
-webkit-box-sizing:border-box;  
-moz-box-sizing:border-box;  
box-sizing:border-box  
}  

.post-content .pc-top .post-info {  
float:left  
}  

.post-content .pc-top .num {  
border-right:1px dotted #ccc;  
padding-right:15px;  
margin-right:10px  
}  

.post-content .pc-top .date,.post-content .pc-top .time {  
position:relative;  
padding-left:16px;  
margin-right:15px  
}  

.post-content .pc-top .date i,.post-content .pc-top .time i {  
position:absolute;  
left:0;  
color:#ccc;  
padding-right:2px;  
font-size:11pt  
}  

.post-content .pc-message {  
padding:15px;  
font-size:10pt;  
min-height:190px;  
-webkit-box-sizing:border-box;  
-moz-box-sizing:border-box;  
box-sizing:border-box  
}  

.post-content .pc-message .post-signature {  
display:block;  
color:#999;  
font-size:9pt;  
margin-top:15px  
}  

.post-content .pc-message .post-signature hr {  
width:50%;  
padding-bottom:5px  
}  

.post-content .pc-message .post-edited {  
text-align:right;  
margin-top:20px;  
font-size:9pt;  
font-style:italic;  
color:#ccc  
}  

.post-content .pc-bottom {  
display:table;  
width:100%;  
padding:8px 10px;  
border-top:1px solid #f1f1f1;  
-webkit-box-sizing:border-box;  
-moz-box-sizing:border-box;  
box-sizing:border-box  
}  

.post-content .pc-bottom a {  
opacity:.8  
}  

.post-content .pc-bottom a:hover {  
opacity:1  
}  

.post-content .pc-bottom .pc-user-details {  
float:left  
}  

.post-content .pc-bottom .pc-on-top,.post-content .pc-bottom .pc-entry-manage {  
float:right  
}  

.post-content .pc-bottom .pc-on-top {  
margin-left:15px  
}
/* InternetEmpire.Ru */

2. Заходим в ПУ - Управление дизайном - модуль Форум - Вид материалов и заменяем весь код на этот:
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="postblock clr">  
  <div class="post-user">  
  <a class="postUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a>  
  <div class="user-avatar"><?if($AVATAR_URL$)?><img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?></div>  
  <div class="postRankIco">$USER_RANK_ICON$</div>  
<?if($GROUP_NAME$)?><div class="postUserGroup">Группа: $GROUP_NAME$</div><?endif?>  
<?if($POSTS$)?><div class="numposts">Сообщений: <span="unp">$POSTS$</span></div><?endif?>  
  <?if($AWARDS_READ_URL$)?><div class="reputation">Награды: <a href="$AWARDS_READ_URL$" title="Список наград"><span class="repNums"><b>$AWARDS$</b></span></a> <?if($AWARDS_DO_URL$)?> <a href="$AWARDS_DO_URL$"><span style="font-size:10pt" title="Вручить награду"><b>+</b></span></a><?endif?></div><?endif?>  
<?if($READ_BAN_URL$)?><div class="userBan">Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a> <?if($DO_BAN_URL$)?> <a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">±</a></div><?endif?><?endif?>  
<?if($USER_STATUS$)?><div class="statusBlock">Статус: $USER_STATUS$</div><?endif?>  
  </div>  
  <div class="post-content">  
  <div class="pc-triangle"></div>  
  <div class="pc-top">  
  <div class="post-info">  
  <span class="num">Сообщение # <b>$NUMBER$</b></span>  
  <span class="time"><i class="fa fa-clock-o"></i>$TIME$</span>  
  <span class="date"><i class="fa fa-calendar"></i>$DATE$</span>  
  </div>  
   
  </div>  
  <div class="pc-message">  
  <span class="ucoz-forum-post" id="ucoz-forum-post-8" edit-url="">$MESSAGE$  
  <?if($ATTACHMENT$)?> <div align="left" class="eAttach">Прикрепления: $ATTACHMENT$</div><?endif?>  
<?if($SIGNATURE$)?><br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">$SIGNATURE$</span><?endif?>  
<?if($EDITEDBY$)?><br><br><div class="edited">Сообщение отредактировал $EDITEDBY$</div><?endif?>  
</span>  
</div>  
   
  <div class="pc-bottom clr">  
  <span class="pc-user-details">$USER_DETAILS_ICON_BAR$</span>  
  <span class="pc-on-top">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</span>  
  <span class="pc-entry-manage">$ENTRY_MANAGE_ICON_BAR$</span>  
  </div>  
   
  </div>  
  </div>


Готово!


Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 717


Поделиться в соц. сетях:
Комментариев к материалу: 2
Александр 19.03.2016 в 15:09Спам
Вид просто шикарный. Спасибо огромное biggrin
1
Виктор Ягодин 20.03.2016 в 11:50
Всегда пожалуйста)
0
avatar