Установка
1. В CSS вставить код:
Код
/* UON.UCOZ.COM */
.lastcomments {
font-family: Tahoma;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 250px;
max-width: 310px;
width: 100%;
background-color: #ffffff;
color: #2B2B2B;
text-align: center;
font-size: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.lastcomments * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lastcomments .profile-image {
padding: 15% 10% 0;
}
.lastcomments .profile-image img {
max-width: 100%;
vertical-align: top;
position: relative;
border-radius: 50%;
max-width: 40%;
}
.lastcomments figcaption {
padding: 5% 10% 15%;
}
.lastcomments h3 {
text-transform: uppercase;
font-size: 20px;
font-weight: 400;
line-height: 24px;
margin: 3px 0;
}
.lastcomments h5 {
font-weight: 400;
margin: 0;
text-transform: uppercase;
color: #888;
letter-spacing: 1px;
}
.lastcomments {
font-family: Tahoma;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 250px;
max-width: 310px;
width: 100%;
background-color: #ffffff;
color: #2B2B2B;
text-align: center;
font-size: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.lastcomments * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lastcomments .profile-image {
padding: 15% 10% 0;
}
.lastcomments .profile-image img {
max-width: 100%;
vertical-align: top;
position: relative;
border-radius: 50%;
max-width: 40%;
}
.lastcomments figcaption {
padding: 5% 10% 15%;
}
.lastcomments h3 {
text-transform: uppercase;
font-size: 20px;
font-weight: 400;
line-height: 24px;
margin: 3px 0;
}
.lastcomments h5 {
font-weight: 400;
margin: 0;
text-transform: uppercase;
color: #888;
letter-spacing: 1px;
}
2. Создать информер [ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 · Длина заголовка: 50 ] и в шаблон информера вставить код:
Код
<figure class="lastcomments ">
<div class="profile-image">
<?if($USERNAME$)?>
<a href="$PROFILE_URL$">
<?if($USER_AVATAR_URL$)?>
<img alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" />
<?else?>
<img title="$USERNAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg" />
<?endif?>
</a>
<?else?>
<img title="$NAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg"/>
<?endif?>
</div>
<figcaption>
<h3><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></h3>
<h5>$DATE$ | $TIME$</h5>
<p> <a href="$ENTRY_URL$" title="$ENTRY_TITLE$">$MESSAGE$</a> </p>
</figcaption>
</figure>
<div class="profile-image">
<?if($USERNAME$)?>
<a href="$PROFILE_URL$">
<?if($USER_AVATAR_URL$)?>
<img alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" />
<?else?>
<img title="$USERNAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg" />
<?endif?>
</a>
<?else?>
<img title="$NAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg"/>
<?endif?>
</div>
<figcaption>
<h3><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></h3>
<h5>$DATE$ | $TIME$</h5>
<p> <a href="$ENTRY_URL$" title="$ENTRY_TITLE$">$MESSAGE$</a> </p>
</figcaption>
</figure>
3. В нужное вам место вставить код информера. Вот и все.
|