Главная » Для UCOZ » 2017 » Сентябрь » 29 » Вид материалов форума (флип-карта мини-профиля со своим фоном)

Форум

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



Теги: вид материалов форума, вид материалов, анимация


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



Предустановка

В данном решении пользователям сайта предоставляется возможность установки своего фонового изображения для мини-профиля, я использовал для этого поле "Домашняя страница" в форме регистрации пользователей сайта. Всё, что нужно сделать, это войти в раздел "ЗАМЕНА СТАНДАРТНЫХ НАДПИСЕЙ" , далее - "Форма регистрации пользователей на сайте" и сменить название поля "Домашняя страница" на "Фоновое изображение". Сохраните изменения.
Теперь пользователь сайта при регистрации, либо при редактировании профиля, увидит поле "Фоновое изображение". В это поле можно вставить адрес до файла картинки, и эта картинка будет автоматически выведена фоном мини-профиля у конкретного пользователя.

Установка

1. Итак, приступаем к установке. Первым делом, заходим в шаблон " ФОРУМ - Общий вид страниц форума", в шапку подключаем:

Код

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">


а в самом низу кода страницы подключаем скрипт:

Код

<script type="text/javascript">
  $().ready(function(){
  $('[rel="tooltip"]').tooltip();

  });

  function rotateCard(btn){
  var $card = $(btn).closest('.card-container');
  console.log($card);
  if($card.hasClass('hover')){
  $card.removeClass('hover');
  } else {
  $card.addClass('hover');
  }
  }
  </script>


Сохраняем внесённые в шаблон изменения.

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

Код

.img-circle{border-radius:50%}
.btn-simple {
  opacity: .8;
  color: #666666;
  background-color: transparent;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:hover,
.btn:focus,
.btn:active{
  outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  margin-top:10px;
  margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
  -webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.card-container.static:hover .card,
.card-container.static.hover .card {
  -webkit-transform: none;
-moz-transform: none;
  -o-transform: none;
  transform: none;
}
/* flip speed goes here */
.card {
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  -o-transition: -o-transform .5s;
  transition: transform .5s;
-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fcfcfc;
   
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  z-index: 3;
}

.back .btn-simple{
  position: absolute;
  left: 0;
  bottom: 4px;
}
/* Style */

.card{
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 4px;
  color: #444444;
}
.card-container, .front, .back {
  width: 100%;
  height: 280px;
  border-radius: 4px;

}

.card .cover{
  height: 105px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.card .cover img{
  width: 100%;
}
.card .user{
  border-radius: 50%;
  display: block;
  height: 120px;
  margin: -55px auto 0;
  overflow: hidden;
  width: 120px;
}
.card .user img{
  background: none repeat scroll 0 0 #FFFFFF;
  border: 4px solid #fcfcfc;
  width: 100%;
}

.card .content{
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  padding: 10px 20px 20px;
  font-size:12px;
}
.card .content .main {
  min-height: 90px;
}
.card .back .content .main {
  height: 60px;
}
.card .name {
  margin: 10px 0 0;
  text-align: center;
  text-transform: capitalize;
}
.card h5{
  margin: 5px 0;
  font-weight: 400;
  line-height: 20px;
}
.card .profession{
  color: #999999;
  text-align: center;
  margin-bottom: 20px;
}
.card .footer {
   
  color: #999999;
  margin: 30px 0 0;
  padding: 10px 0 0;
  text-align: center;
}

.card .footer .btn-simple{
  margin-top: -6px;
}
.card .header {
  padding: 15px 20px;
  height: 90px;
}
.card .motto{
  border-bottom: 1px solid #EEEEEE;
  color: #999999;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
  text-align: center;
}

/* Fix bug for IE */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .front, .back{
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  }

  .back {
  visibility: hidden;
  -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
  }
  .front{
  z-index: 4;
  }
  .card-container:not(.manual-flip):hover .back,
  .card-container.manual-flip.hover .back{
  z-index: 5;
  visibility: visible;
  }
}


3. Заходим в шаблон " ФОРУМ - Вид материалов", весь имеющийся в нём код меняем на этот:

Код

<table border="0" width="100%" cellspacing="1" cellpadding="2" class="postTable">
<tr><td width="23%" class="postTdTop" align="center"><a class="postUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a></td><td class="postTdTop"><?if($AWARDS_DO_URL$ && $USER_LOGGED_IN$ && $CUR_USER_ID$!=$UID$)?><div style="float:right"><a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-28-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="/.s/img/icon/thumbu.png" width="13" border="0" title="Хороший пост"></a> <a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-47-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="/.s/img/icon/thumbd.png" width="13" border="0" title="Плохой пост"></a></div><?endif?>Дата: $WDAY$, $DATE$, $TIME$ | Сообщение # $NUMBER$</td></tr>
<tr><td class="postTdInfo" valign="top">

<div class="card-container manual-flip">
  <div class="card">
  <div class="front">
  <div class="cover"><img src="$HOME_PAGE$"></div>
  <div class="user">
<?if($AVATAR_URL$)?><img class="img-circle" alt="" title="Кликни,чтобы увидеть информацию" src="$AVATAR_URL$"><?endif?>
  </div>
  <div class="content">
  <div class="main">
  <?if($USER_STATUS$)?><span class="name">$USER_STATUS$</span><?endif?>
  <p class="text-center"><a href="##" onclick="rotateCard(this)"><i class="fa fa-info-circle fa-lg" aria-hidden="true"></i></a></p>
  </div></div></div>

  <div class="back">
  <div class="cover"><img src="$HOME_PAGE$"></div>
  <div class="content">
  <div class="main">
  <h4 class="text-center">Информация</h4>
  <p class="text-center">
<?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($GROUP_ID$)?> <?else?><br><br><br><br><br><?endif?>
</p>
  </div></div>
  <div class="footer">
  <button class="btn btn-simple" rel="tooltip" title="Назад" onclick="rotateCard(this)">
  <i class="fa fa-reply"></i>  
  </button>
  </div></div></div></div>
</td><td class="posttdMessage" valign="top" style="word-wrap: break-word;padding:10px;">$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?></td></tr>
<tr><td class="postBottom" align="center"><?if($USER_IP$)?><div class="postip">[ <a class="postIpLink" href="https://apps.db.ripe.net/search/query.html?searchtext=$USER_IP$" target="_blank">$USER_IP$</a><?if($POST_COUNTRY_ID$)?> (<a href="javascript://" rel="nofollow" onclick='prompt("","$POST_COUNTRY$");return false;'>$POST_COUNTRY_ID$</a>)<?endif?> ]</div><?else?> <?endif?></td><td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>$USER_DETAILS_ICON_BAR$</td><td align="right" style="padding-right:15px;">$ENTRY_MANAGE_ICON_BAR$</td><td width="2%" nowrap align="right">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</td></tr>
</table></td></tr></table>
Обсуждение материала:
Комментариев: 0
avatar

    Анимированное адаптивное выпадающее меню для форума (основное меню форума)

    29.09.2017

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

    Комментарии: 0   Просмотры: 37

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

    24.09.2017

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

    Комментарии: 1   Просмотры: 48

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

    23.09.2016

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

    Комментарии: 0   Просмотры: 266

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

    26.08.2016

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

    Комментарии: 1   Просмотры: 338

Новые пользователи

Хостинг от uCoz