Перейти к содержанию
.V.I.P.

Выдвижная панель наград в темах

Рекомендуемые сообщения

Выдвижная панель наград в темах

1.thumb.png.e9e15af6d6e7d37eb64c88d7d7f3ac56.png

2.thumb.png.b33a8f82b952b4bb1c7d4c0ebb18577d.png

  • Панель выдвигается при наведении 
  • Награды выводятся без установки дополнительных приложений
  • Вместо изображений используются SVG иконки

В custom.css добавляем

.meme_awar_ic {
width: 50px;
    height: 50px;
    position: relative;
    background: #1b1d29 !important;
    display: inline-block;
    top: 5px;
    line-height: 55px;
    text-align: center; 
}

.awards-post-bg:hover {
 right:-5px; 
}
.awards-post-bg {
  background: #3a3a4f;
height: 300px;
width: 600px;
position: absolute;
float: right;
right: -600px;
transition: all 0.8s;
}
.awards-post-bg:before {
    content: "\f091";
    font-family: FontAwesome;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    position: relative;
    background: linear-gradient(90deg, #232331 50%, #3a3a4f 50%, #3a3a4f);
    border-radius: 5px 0px 0px 35px;
    float: left;
    right: 50px;
}

Далее открываем шаблоны forums > topics > post

На 54 строке находим

<div class='cPost_contentWrap ipsPad'>

Заменяем на

<div class='cPost_contentWrap ipsPad' style="overflow:hidden;">
      <div class="awards-post-bg">
        <div style="padding: 5px 0px 0px 5px !important;" class="ipsResponsive_hidePhone ipsResponsive_hideTablet">
      <div style="width: 560px;
height: 270px;
margin-bottom: 5px;
position: relative;
margin-top: 10px;
background: #3a3a4f !important;
display: inline-block;
margin-left: -30px;">
         <img style="height: 80px;
position: relative;
top: 15px;
margin: 0 auto;
padding: 10px;
background: #11121478 !important;
left: 15px;" src="{setting='base_url'}web_element/awards/trophy.svg" />
        <div style="color: #9c9c9c !important;
font-size: 19px !important;
letter-spacing: 1px !important;
font-weight: bold !important;
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
height: 40px;
line-height: 40px;
margin-left: 20px;
margin-top: 15px;
width: 280px;
text-transform: uppercase;
text-align: center;display: inline-block;">Награды пользователя</div>
        <div style="color: #fff !important;
font-size: 13px !important;
letter-spacing: 1px !important;
font-weight: bold !important;
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
height: 40px;
margin-top: -10px;
width: auto;
display: block;
left: 116px;
position: relative;
top: -15px;">Награды <a style="color: #ff2a40 !important;">{$comment->author()->name}</a>'s</div>  
       
       <div style="position: relative;

margin-top: -10px;
margin-bottom: 20px;
text-align: left;
margin-left: 10px;
line-height: 55px;">
        <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за участие в нашем сообществе'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/medal.svg" /></div>
      {{if $comment->author()->member_posts >= 250}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за более чем 250 публикаций'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/bars-chart-1.svg" /></div>
       {{endif}}
       {{if $comment->author()->member_posts >= 500}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за более чем 500 публикаций'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/bars-chart-1.svg" /></div>
       {{endif}}   
      {{if $comment->author()->member_posts >= 1500}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за более чем 1500 публикаций'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/bars-chart-1.svg" /></div>
       {{endif}}    
      {{if $comment->author()->member_posts >= 2000}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за более чем 2000 публикаций'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/bars-chart-1.svg" /></div>
       {{endif}}            
         {{if in_array($comment->author()->member_group_id, array( 4 ,6 ) )}}
           <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за участие в нашем команде'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/defense.svg" /></div>
           {{endif}}
         {{if $comment->author()->pp_reputation_points >= 50}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за популярность'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/network.svg" /></div>
        {{endif}}
         {{if $comment->author()->member_group_id === 4}}
           <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Благодарность за создание отличного проекта'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/dollar-symbol.svg" /></div>
        {{endif}}
         {{if $comment->author()->warn_level >= 0}}
         <div style="width: 50px;
height: 50px;
position: relative;
background: #1b1d29 !important;
display:inline-block;
top: 5px;line-height: 50px;
text-align: center;" data-ipsTooltip data-ipsMenu title='Награжден за то что не нарушал правил проекта :)'><img style="height: 35px;" src="{setting='base_url'}web_element/awards/heart.svg" /></div>
        {{endif}}
        
       </div> 
          </div></div></div>
  • Загружаем архив web_element.zip
  • Распаковываем
  • Загружаем в корень вашего форума

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


О проекте

Web@district это проект, который объединил специалистов из разных областей сайтостроения и интернет-маркетинга для того, чтобы пользователи этого ресурса могли удовлетворять свои потребности в знаниях, находить исполнителей, заказчиков или просто приятно пообщаться.

info@webdistrict.pro

Тут может оказаться каждый из вас.:)

логотип в футрере

Copyright © Web@District 2018      При копировании материалов с сайта активная гиперссылка ссылка на источник обязательна
×