вВсё для ucoz-форумов

Вид материала форума GranFryn для uCoz

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

Чтоб его собрать полностью, вам нужно с начало скачать под него иконки форума, которые отлично вписываются. Они не будут как вы думаете меняться в оттенке как вы привыкли и чем отличается от оригинала, о только при наведение мутнеть, и это такой небольшой эффект. Он полностью проверен и работает, как у уже было сказало, были прописано для него 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=»post-time»>$TIME$</span>
<span class=»post-date»>$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>

<style>
.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 #F7F7F7;
border: 1px solid #D6CECE;
-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: rgba(0, 0, 0, 0) #F1EDED rgba(68, 65, 65, 0) rgba(90, 90, 90, 0);

.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

.post-date
display: inline-block;
margin: 0 5px 0 5px;
padding: 0 0 0 16px;
background: url(http://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/date.png) no-repeat 0 2px;

.post-time
display: inline-block;
margin: 0 0 0 5px;
padding: 0 0 0 16px;
background: url(http://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/time.png) no-repeat 0 2px;

.postRest1 .post-tr
position: absolute;
left: -10px;
top: 39px;
width: 10px;
height: 18px;
overflow: hidden;
background: url(http://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/post-triangle-555.png) no-repeat;
</style>

Настроил как вижу его, много заняло искать сам треугольник и он не родной, но без него вообще бы смотрелось не очень. Вообщем стили прописываем или так как есть, или в файл, так как они большие, а можно в CSS если есть место и по ним вы можете изменить не дизайн а вот оттенок цветовой гаммы этот точно, как вам нужно.

источник: zornet.ru

Похожие посты