Перейти к содержимому


Фотография
- - - - -

Динамическое отображение репутации в сообщениях

репутация шкала сообщение полоска динамическое

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Оффлайн   SimSon

    Пользователь


  • Пользователи
  • Репутация
    7
    • Cообщений: 46
    • Форум:3.3.х
    • Город:Санкт-Петербург

Отправлено 13 Август 2013 - 11:48

Надеюсь я в правильном разделе создал тему.

  • Более короткий код;
  • Нет дополнительной загрузки, т.к. изображение всего одно, и то маленького размера, для фона;
  • Теперь необязательно наводить мышку на репутацию, чтобы узнать количество баллов репутации, т.к. цифра указана в центре бара;
  • Растягивается под размер блока. Каждый уровень указан в %, поэтому всегда будет хорошо выглядеть;
  • И то, что было для меня самым главном — возможность легко менять цвет. Для этого в полосе репутации используется прозрачный фон, чтобы любому цвету (указанному через "background-color") можно было применить красивый эффект.

Шаблон "userInfoPane" (в профиле пользователя в сообщениях тем)

Найти:

<if test="authorwarn:|:$author['show_warn']">


<li>



<if test="hasWarningId:|:$options['wl_id']">



<img src='{$this->settings['img_url']}/warn.png' class='clickable' onclick='warningPopup( this, {$options['wl_id']} )' title='{$this->lang->words['warnings_issued']}' />



</if>



<a class='desc lighter blend_links' href='{parse url="app=members&module=profile&section=warnings&member={$author['member_id']}&from_app={$this->request['app']}&from_id1={$contentid}&from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse exp[b][/b]ression="sprintf( $this->lang->words['warn_status'], $author['warn_level'] )"}</a>



</li>



</if>



</ul>

Под ним добавить:

<!-- REPUTATION BAR -->

<if test="cardRep:|:$this->settings['reputation_enabled'] && $this->settings['reputation_show_profile']">

<div class="reputation-bg" data-tooltip="Репутация: {$author['pp_reputation_points']}">

<div class="reputation-bar

<!-- GREY BAR -->

<if test="$author['pp_reputation_points']==0">gray</if>

<!-- /GREY BAR -->



<!-- RED BARS -->

<if test="$author['pp_reputation_points']<0 && $author['pp_reputation_points']>=-15">red width20</if>

<if test="$author['pp_reputation_points']<-15 && $author['pp_reputation_points']>=-30">red width40</if>

<if test="$author['pp_reputation_points']<-30 && $author['pp_reputation_points']>=-45">red width60</if>

<if test="$author['pp_reputation_points']<-45 && $author['pp_reputation_points']>=-60">red width80</if>

<if test="$author['pp_reputation_points']<-60">red</if>

<!-- /RED BAR -->



<!-- BLUE BARS -->

<if test="$author['pp_reputation_points']>=1 && $author['pp_reputation_points']<=10">blue width20</if>

<if test="$author['pp_reputation_points']>10 && $author['pp_reputation_points']<=20">blue width40</if>

<if test="$author['pp_reputation_points']>20 && $author['pp_reputation_points']<=30">blue width60</if>

<if test="$author['pp_reputation_points']>30 && $author['pp_reputation_points']<=40">blue width80</if>

<if test="$author['pp_reputation_points']>40 && $author['pp_reputation_points']<=50">blue</if>

<!-- /BLUE BARS -->



<!-- GREEN BARS -->

<if test="$author['pp_reputation_points']>50 && $author['pp_reputation_points']<=70">green width20</if>

<if test="$author['pp_reputation_points']>70 && $author['pp_reputation_points']<=90">green width40</if>

<if test="$author['pp_reputation_points']>90 && $author['pp_reputation_points']<=110">green width60</if>

<if test="$author['pp_reputation_points']>110 && $author['pp_reputation_points']<=130">green width80</if>

<if test="$author['pp_reputation_points']>130 && $author['pp_reputation_points']<=150">green</if>

<!-- /GREEN BARS -->



<!-- GOLD BARS -->

<if test="$author['pp_reputation_points']>150 && $author['pp_reputation_points']<=190">gold width20</if>

<if test="$author['pp_reputation_points']>190 && $author['pp_reputation_points']<=230">gold width40</if>

<if test="$author['pp_reputation_points']>230 && $author['pp_reputation_points']<=270">gold width60</if>

<if test="$author['pp_reputation_points']>270 && $author['pp_reputation_points']<=310">gold width80</if>

<if test="$author['pp_reputation_points']>310">gold</if>

<!-- /GOLD BARS -->

">

{$author['pp_reputation_points']}

</div>

</div>

</if>

<!-- /REPUTATION BAR -->

Шаблоны "showCard" и "profileModern"

Заменить дефолтный код репутации этим:

<!-- REPUTATION BAR -->

<if test="cardRep:|:$this->settings['reputation_enabled'] && $this->settings['reputation_show_profile']">

<div class="reputation-bg" data-tooltip="Репутация: {$member['pp_reputation_points']}">

<div class="reputation-bar

<!-- GREY BAR -->

<if test="$member['pp_reputation_points']==0">gray</if>

<!-- /GREY BAR -->



<!-- RED BARS -->

<if test="$member['pp_reputation_points']<0 && $member['pp_reputation_points']>=-15">red width20</if>

<if test="$member['pp_reputation_points']<-15 && $member['pp_reputation_points']>=-30">red width40</if>

<if test="$member['pp_reputation_points']<-30 && $member['pp_reputation_points']>=-45">red width60</if>

<if test="$member['pp_reputation_points']<-45 && $member['pp_reputation_points']>=-60">red width80</if>

<if test="$member['pp_reputation_points']<-60">red</if>

<!-- /RED BAR -->



<!-- BLUE BARS -->

<if test="$member['pp_reputation_points']>=1 && $member['pp_reputation_points']<=10">blue width20</if>

<if test="$member['pp_reputation_points']>10 && $member['pp_reputation_points']<=20">blue width40</if>

<if test="$member['pp_reputation_points']>20 && $member['pp_reputation_points']<=30">blue width60</if>

<if test="$member['pp_reputation_points']>30 && $member['pp_reputation_points']<=40">blue width80</if>

<if test="$member['pp_reputation_points']>40 && $member['pp_reputation_points']<=50">blue</if>

<!-- /BLUE BARS -->



<!-- GREEN BARS -->

<if test="$member['pp_reputation_points']>50 && $member['pp_reputation_points']<=70">green width20</if>

<if test="$member['pp_reputation_points']>70 && $member['pp_reputation_points']<=90">green width40</if>

<if test="$member['pp_reputation_points']>90 && $member['pp_reputation_points']<=110">green width60</if>

<if test="$member['pp_reputation_points']>110 && $member['pp_reputation_points']<=130">green width80</if>

<if test="$member['pp_reputation_points']>130 && $member['pp_reputation_points']<=150">green</if>

<!-- /GREEN BARS -->



<!-- GOLD BARS -->

<if test="$member['pp_reputation_points']>150 && $member['pp_reputation_points']<=190">gold width20</if>

<if test="$member['pp_reputation_points']>190 && $member['pp_reputation_points']<=230">gold width40</if>

<if test="$member['pp_reputation_points']>230 && $member['pp_reputation_points']<=270">gold width60</if>

<if test="$member['pp_reputation_points']>270 && $member['pp_reputation_points']<=310">gold width80</if>

<if test="$member['pp_reputation_points']>310">gold</if>

<!-- /GOLD BARS -->

">

{$member['pp_reputation_points']}

</div>

</div>

</if>

<!-- /REPUTATION BAR -->

CSS

/******************************************************

Reputation Bar

******************************************************/

.reputation-bg{

background:#e4e4e4;

background:-moz-linear-gradient(top, #e4e4e4 0%, #f7f7f7 100%);

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#f7f7f7));

background:-webkit-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);

background:-o-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);

background:-ms-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);

background:linear-gradient(to bottom, #e4e4e4 0%,#f7f7f7 100%);

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#f7f7f7',GradientType=0);

border:1px solid #e4e4e4;

border-radius:6px;

-moz-border-radius:6px;

-webkit-border-radius:6px

}

.reputation-bar{

background:url('reputation_bar.png') repeat-x 0 0;

border:1px solid;

border-radius:6px;

-moz-border-radius:6px;

-webkit-border-radius:6px;

box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);

-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);

-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);

font:12px/23px Calibri,Arial,Tahoma,sans-serif;

height:21px;

margin:1px;

text-align:center;

text-shadow:0 1px 0 rgba(255,255,255,0.3)

}

.reputation-bar.gray{background-color:#a2a2a2;border-color:#6a6a6a;color:#6b6b6b}

.reputation-bar.red{background-color:#b00000;border-color:#910000;color:#6b0000}

.reputation-bar.blue{background-color:#008cd5;border-color:#006aa1;color:#00537f}

.reputation-bar.green{background-color:#20a601;border-color:#188000;color:#177a00}

.reputation-bar.gold{background-color:#ccb200;border-color:#b49d00;color:#958200}

.reputation-bar.width20{width:20%}

.reputation-bar.width40{width:40%}

.reputation-bar.width60{width:60%}

.reputation-bar.width80{width:80%}

Чтобы добавить новый цвет добавляем новое свойство CSS:

.reputation-bar.ЦВЕТ{background-color:#ЦВЕТ;border-color:#ЦВЕТ;color:#ЦВЕТ}

Чтобы добавить новую шкалу репутации, добавляем допол. код:

<!-- ЦВЕТ BARS -->

<if test="$member['pp_reputation_points']>БАЛЛЫ && $member['pp_reputation_points']<=БАЛЛЫ">ЦВЕТ width20</if>

<if test="$member['pp_reputation_points']>БАЛЛЫ && $member['pp_reputation_points']<=БАЛЛЫ">ЦВЕТ width40</if>

<if test="$member['pp_reputation_points']>БАЛЛЫ && $member['pp_reputation_points']<=БАЛЛЫ">ЦВЕТ width60</if>

<if test="$member['pp_reputation_points']>БАЛЛЫ && $member['pp_reputation_points']<=БАЛЛЫ">ЦВЕТ width80</if>

<if test="$member['pp_reputation_points']>БАЛЛЫ && $member['pp_reputation_points']<=БАЛЛЫ">ЦВЕТ</if>

<!-- /ЦВЕТ BARS -->

Результат:

 

Прикрепленный файл  image.jpeg   7,93К    скачиваний 4


Сообщение отредактировал SimSon: 13 Август 2013 - 11:49

  • 4

Заработок и обучение заработку

#2 Оффлайн   "Js"

    Знающий


  • Пользователи
  • Репутация
    27
    • Cообщений: 623
    • Город:Провинция

Отправлено 13 Август 2013 - 12:06

В обычном хуке все также.


  • 0

#3 Оффлайн   vip666

    Новичок


  • Пользователи
  • Репутация
    0
    • Cообщений: 8
    • Форум:3.3.х
    • Город:Россия

Отправлено 24 Август 2013 - 10:28

В обычном хуке все также.

А можно ссылку на этот хук?


  • 0

#4 Оффлайн   "Js"

    Знающий


  • Пользователи
  • Репутация
    27
    • Cообщений: 623
    • Город:Провинция

Отправлено 24 Август 2013 - 10:57

http://ipbzona.ru/to...ация#entry14809


  • 0

#5 Оффлайн   ..ツ⋆WOLF⋆ツ..

    Гуру


  • Модераторы
  • Репутация
    1 801
    • Cообщений: 8 174
    • Форум:3.4.х
    • Город:Казань

Отправлено 24 Август 2013 - 10:58

на скрин посмотрите в первом посте там и тут


  • 0

#6 Оффлайн   "Js"

    Знающий


  • Пользователи
  • Репутация
    27
    • Cообщений: 623
    • Город:Провинция

Отправлено 24 Август 2013 - 11:20

Одно и тоже.

Чуть чуть переделать та копия будет, даже можно от сюда взять css


  • 0

#7 Оффлайн   Law AC vs. Finch

    Гуру


  • Пользователи
  • Репутация
    887
    • Cообщений: 3 004
    • Форум:Нет

Отправлено 24 Август 2013 - 14:49

Копипаст. К тому же не полный.


  • 0

#8 Оффлайн   Ryan_Atwood

    Активный


  • Пользователи
  • Репутация
    30
    • Cообщений: 141
    • Форум:3.4.х

Отправлено 22 Сентябрь 2013 - 02:02

Выглядит неплохо, но проще использовать хук. Ссылка выше уже выложена.


  • 0





Темы с аналогичными тегами: репутация, шкала, сообщение, полоска, динамическое