Гостевой вход

Вы не залогинились
20:50

Вид материалов форума (краткая информация о пользователе)

Категория: Форум

Метки: вид материалов форума, вид материалов
Первым решением, выкладываемым мной здесь для uCoz, будет улучшение для материалов форума. Это один из самых любимых мною для экспериментов модуль системы, поэтому и решил начать с него. А суть решения следующая: мы заключим краткую информацию о пользователе, оставившем сообщение на форуме, в единый симпатичный блок и добавим иконки от Font Awesome. Плюс, как дополнение, оформим мини-блок, в который войдёт аватар пользователя и небольшая информация.

Порядок установки данного вида материалов форума следующий:

1. Войти в Панель Управления сайтом (ПУ), найти ссылку "Управление дизайном" ,переходим по ней и в списке шаблонов для редактирования находим ФОРУМ - Вид материалов ,находим внутри кода этого шаблона такой кусок:

Код

<?if($AVATAR_URL$)?><img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?><?if($USER_TITLE$)?><div class="postRankName">$USER_TITLE$</div>
<?else?><div class="postRankName">$USER_RANK_NAME$</div><?endif?>  
<?if($GROUP_ICON$)?><div class="postRankIco">$GROUP_ICON$</div><?else?><div class="postRankIco">$USER_RANK_ICON$</div><?endif?>  
<?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?><?endif?>  
<?if($READ_REP_URL$)?><div class="reputation">Репутация: <a title="Смотреть историю репутации" class="repHistory" href="$READ_REP_URL$"><b>$REP_RATING$</b></a>  
<?if($DO_REP_URL$)?> <a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$"><span style="font-size:10pt"><b>±</b></span></a></div><?endif?><?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 class="info-box bg-green">  
<span class="info-box-icon bg-green"><?if($AVATAR_URL$)?>  
<img style="height:86px;padding-top:2px;" alt="" title="$USERNAME$"  
class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?></span>  
<div class="info-box-content">  
<span class="info-box-text">  
<a class="mypostUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return  
false;">$USERNAME$</a></span>  
<span class="info-box-number"><i class="fa fa-comments-o" aria-hidden="true"></i> $POSTS$</span>  
<div class="progress">  


2. По аналогии с пунктом первым, переходим в редактирование шаблона ФОРУМ - Общий вид страниц форума и в нём, в шапке шаблона, после ссылки на системные CSS-стили, вставляем ссылку для оформления шрифтовых иконок Font Awesome:

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  


3. В шаблон "Таблица стилей (CSS)" добавляем стили оформления нашего блока:

Код

.list-group {  
  margin:20px 0px;  
  padding-left: 0;  
}  
.list-group-item:first-child {  
  border-top-right-radius: 4px;  
  border-top-left-radius: 4px;  
}  
a.list-group-item, button.list-group-item {  
  color: #555;text-decoration: none;  
}  
.list-group-item {  
  text-align:left;  
  position: relative;  
  display: block;  
  padding: 10px 15px;  
  margin-bottom: -1px;  
  background-color: #fff;  
  border: 1px solid #ddd;  
}  
.list-group-item-active{text-decoration:none;color:#555;background-color:#f5f5f5}  
.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{text-decoration:none;color:#555;background-color:#f5f5f5}  
.bg-green {background-color:#00a65a !important}  
.bg-green {color:#fff !important}  
.info-box{display:block;min-height:90px;background:#fff;width:100%;box-shadow:0 1px 1px rgba(0,0,0,0.1);border-radius:2px;margin-bottom:15px}  
.info-box-icon{border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;
  border-bottom-left-radius:2px;display:block;float:left;height:90px;width:90px;text-align:center;font-size:45px;line-height:90px;background:rgba(0,0,0,0.2)}
  .info-box-icon>img{max-width:100%}  
.info-box-content{background:#00a65a;padding:5px 10px;margin-left:90px}  
.info-box-number{display:block;font-weight:bold;font-size:18px;color:#2f5f32;}  
.progress-description,.info-box-text{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  
.info-box-more{display:block}.progress-description{margin:0}  
.info-box .progress{background:rgba(0,0,0,0.2);margin:5px -10px 5px -10px;height:2px}  
.info-box .progress,.info-box .progress .progress-bar{border-radius:0}  
.info-box .progress .progress-bar{background:#fff}  
a.mypostUser:link,a.mypostUser:active,a.mypostUser:visited{color:#fff;}  
a.mypostUser:hover {color:#2f5f32;}  


4. Этот пункт необязательный, в нём задаётся цвет статуса Онлайн / Оффлайн в виде материалов форума для пользователя, оставившего сообщение:

В шаблоне "Таблица стилей (CSS)" найдите два класса, что указаны ниже (они там уже прописаны) и задайте им следующие параметры цвета:

Код

.statusOnline {color:#99cc66}  
.statusOffline {color:#f0664f}


На этом установка вида материалов форума закончена. Если будут возникать вопросы, пишите в комментариях.

Просмотров: 362 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    Вид материалов форума (флип-карта мини-профиля со своим фоном)

    Сегодня представляю вашему вниманию очередной вариант оформления мини-профиля в сообщениях форума. Под мини-профилем я понимаю левую часть сообщения, где располагается аватарка пользователя и краткая информация (статистика). Так вот, суть данного решения: во-первых, у каждого пользователя будет своё фоновое изображение мини-профиля, во-вторых, информация о пользователе становится доступной после клика по иконке информации, при этом происходит эффектная анимация, будто карточка мини-профиля поворачивается вокруг своей оси в горизонтальной плоскости.

    Вид материалов форума (размытый фон из аватара пользователя)

    Сегодня я предлагаю вашему вниманию оригинальное решение для оформления сообщений пользователей на форуме. Оригинальность его в том, что в профиле пользователя, который выводится в сообщениях форума с левой стороны, фон в шапке профиля оформляется автоматически, а именно: берётся аватар пользователя, размывается и растягивается в шапке профиля как фон. Выглядит вполне симпатично, а главное - сочетается с основными цветами аватара. Данное решение позволит, к тому же, украсить сообщения пользователей, придать им оригинальность, выделить в общем потоке сообщений.

    Делаем иконку календаря в размещаемых материалах

    Сегодня мы с вами научимся делать иконку календаря в размещаемых материалах модулей системы uCoz. Никаких изображений при этом использовать мы не будем, всё делается с помощью CSS, но результатом вы останетесь довольны. Делать будем на примере модуля новости сайта.

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: