Jump to content

UserInfoPane

Zaxar_D
Zaxar_D
in Техническая поддержка IP.Board

Featured Replies

Posted

Всем привет, возникла проблема, а точнее вопросы.

1)Как выровнять репутацию как на скрине?

2)Как выровнять всё остальное по левому краю(сообщения, регистрация)?

 

post-6192-0-78939000-1427223618.jpg

Показать контент 
<div itemscope itemtype="__schema.org/Person" class='user_details'>
<span class='hide' itemprop="name">{$author['members_display_name']}</span>
<ul class='basic_info'>
<if test="membertitle:|:$author['member_title']">
<p class='desc member_title'>{$author['member_title']}</p>
</if>
<if test="avatar:|:$author['member_id']">
<li class='avatar'>
<if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
<a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
</if>
<if test="hasVariable:|:$this->settings['member_topic_avatar_max']"> 
<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable' />
<else />
<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
</if>
<if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
</a>
</if>
</li>
<else />
<li class='avatar'>
<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
</li>
</if>
                <li class='group_title desc lighter'>
{$author['_group_formatted']}
</li>
<!--REPUTATION BEGIN-->
<if test="RepPositive:|:$author['pp_reputation_points'] > 0">
<div class='reputation positive' >РЕПУТАЦИЯ{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div>
</if>
<if test="RepNegative:|:$author['pp_reputation_points'] < 0">
<div class='reputation negative' >РЕПУТАЦИЯ{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div>
</if>
<if test="RepZero:|:$author['pp_reputation_points'] == 0">
<div class='reputation zero' >РЕПУТАЦИЯ{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div>
</if>
<!--REPUTATION END-->
<if test="rankimage:|:$author['member_rank_img']">
<li class='group_icon'>
<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
<img src='{$author['member_rank_img']}' alt='' />
<else />
{$author['member_rank_img']}
</if>
</li>
</if>
<if test="postCount:|:$author['member_id']">
<li class='post_count desc lighter'>
<strong><font color="grey">Сообщения:</strong></font> {parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}
</li>
                <li class='joined desc lighter'>
                        <strong><font color="grey">{$this->lang->words['m_joined']}</strong></font>  {parse date="$author['joined']" format="manual{%d.%m.%Y}"}
                </li>
</if>
<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&amp;module=profile&amp;section=warnings&amp;member={$author['member_id']}&amp;from_app={$this->request['app']}&amp;from_id1={$contentid}&amp;from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse expression="sprintf( $this->lang->words['warn_status'], $author['warn_level'] )"}</a>
</li>
</if>
</ul>


<if test="authorcfields:|:$author['custom_fields'] != """>
<ul class='custom_fields'>
<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
<if test="$field != ''">
<li>
{$field}
</li>
</if>
</foreach>
</foreach>
</ul>
</if>


</div>

Если понадобится

Edited by Zaxar_D

Бесплатно:

_htmlbook.ru

Репутация:

<div>
Репутация
<div style="float:right">Переменная репутации</div>

Информация:

<dt>Сообщений</dt><dd>Переменная "сообщений"</dd>
<dt>Регистрация</dt><dd>Переменная "регистрации"</dd>

Работы на 30-40 минут, чтобы красиво выглядело. Могу сделать за небольшую сумму.

  • Author

  On 24.03.2015 at 20:21, grisha2217 said:

Бесплатно:

_htmlbook.ru

Репутация:

<div>
Репутация
<div style="float:right">Переменная репутации</div>

Информация:

<dt>Сообщений</dt><dd>Переменная "сообщений"</dd>
<dt>Регистрация</dt><dd>Переменная "регистрации"</dd>

Работы на 30-40 минут, чтобы красиво выглядело. Могу сделать за небольшую сумму.

Вот что получилось, а да кстате. На этом сайте я уже был...

post-6192-0-79108300-1427229173.png

Вообщем мне надо так же выровнять по краям.

 

И еще я заметил что рамка репутации(зеленая увеличивается от кол-ва репутации, как сделать что бы не увеличивалась?!)

Edited by Zaxar_D

Как вариант, можно использовать уже имеющиеся классы left и right
смысл такой:

<li class='clear clearfix'>   или div
<span class="left">текст влево</span><span class="right">текст вправо</span>
</li>

например:

Показать контент

вместо:

вставить:

вместо:

вставить:

Это только пример, надо будет еще с двоеточиями разобраться, да и красивше можно оформить, было бы желание


  Zaxar_D said:
И еще я заметил что рамка репутации(зеленая увеличивается от кол-ва репутации, как сделать что бы не увеличивалась?!)

Судя по css, ширина слоя <div class='reputation... зависит от вмещаемого текста. Чем больше цифр, тем шире текст, тем шире слой...

Тут надо было бы сделать изначально немного по-другому. Но сначала разберитесь с выравниванием

 

ПС: В связи с вышесказанным, в этом примере надо посмотреть, как поведет себя слой  <div class='reputation...

    •
    • Author

      On 24.03.2015 at 20:48, Viktar83 said:

    Как вариант, можно использовать уже имеющиеся классы left и right

    смысл такой:

    <li class='clear clearfix'>   или div
<span class="left">текст влево</span><span class="right">текст вправо</span>
</li>

    например:

    Показать контент

    вместо:

    вставить:

    вместо:

    вставить:

    Это только пример, надо будет еще с двоеточиями разобраться, да и красивше можно оформить, было бы желание

     

     

    Судя по css, ширина слоя <div class='reputation... зависит от вмещаемого текста. Чем больше цифр, тем шире текст, тем шире слой...

    Тут надо было бы сделать изначально немного по-другому. Но сначала разберитесь с выравниванием

     

    ПС: В связи с вышесказанным, в этом примере надо посмотреть, как поведет себя слой  <div class='reputation...

    Спасибо за отклик и помощь.

    Сообщения и регистрация выровнялись, всё отлично.

    С этим вопрос закрыт, а вот репутация выделывается!

    post-6192-0-63063700-1427232308.png

    Edited by Zaxar_D

    • Author

    CSS репутации

    Показать контент

      Zaxar_D said:
    CSS репутации

    Слишком большие внутренние отступы:

    padding: 3px 30px;

    исправьте например на:

    padding: 3px;

    и удалите эту строку:

    display: inline-block;

    а раз уж ставите border-radius: 0px; то везде 0px, а проще тоже удалить эти строки.

     

    т.е. должно быть так:

    .reputation {
    font-weight: bold;
    padding: 3px;
    text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}
    •

      On 24.03.2015 at 20:38, Zaxar_D said:

    Вот что получилось, а да кстате. На этом сайте я уже был...

    attachicon.gifБезымянный.png

    Вообщем мне надо так же выровнять по краям.

     

    И еще я заметил что рамка репутации(зеленая увеличивается от кол-ва репутации, как сделать что бы не увеличивалась?!)

     

     

    Для dt и dd нужно прописывать стили (float:left | float: right соответственно)

    Здесь много вариантов,  как можно сделать также, как и на скрине

    • Author
      On 25.03.2015 at 05:25, Viktar83 said:

     

    Слишком большие внутренние отступы:

    padding: 3px 30px;

    исправьте например на:

    padding: 3px;

    и удалите эту строку:

    display: inline-block;

    а раз уж ставите border-radius: 0px; то везде 0px, а проще тоже удалить эти строки.

     

    т.е. должно быть так:

    .reputation {
    font-weight: bold;
    padding: 3px;
    text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}

    Ничего не изменилось

      On 26.03.2015 at 19:28, Zaxar_D said:

    Ничего не изменилось

    А на сайте вижу другое:

    Показать контент post-24610-0-09898200-1427403090.jpg

    ПС:

    Показать контент

    Вся эта конструкция с аватаркой немного не по центру боковой колонки. Предлагаю чуть подправить:

     

    найти:

    .author_info {
  width: 155px;
  float: left;
  font-size: 12px;
  text-align: center;
  padding: 10px 10px;
  line-height: 150%;
}

    заменить на:

    .author_info {
  width: 155px;
  float: left;
  font-size: 12px;
  text-align: center;
  padding: 10px 15px;
  line-height: 150%;
}

    найти:

    .reputation {
  font-weight: bold;
  padding: 3px;
  text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}

    заменить на:

    .reputation {
  font-weight: bold;
  padding: 3px;
  margin: 0 -3px;
  text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}

    Результат:

    post-24610-0-55928500-1427403907.jpg

    •
    • Author

      On 26.03.2015 at 21:06, Viktar83 said:

    А на сайте вижу другое:

    Показать контент attachicon.gifБуфер обмена-1.jpg

    ПС:

    Показать контент

    Вся эта конструкция с аватаркой немного не по центру боковой колонки. Предлагаю чуть подправить:

     

    найти:

    .author_info {
  width: 155px;
  float: left;
  font-size: 12px;
  text-align: center;
  padding: 10px 10px;
  line-height: 150%;
}

    заменить на:

    .author_info {
  width: 155px;
  float: left;
  font-size: 12px;
  text-align: center;
  padding: 10px 15px;
  line-height: 150%;
}

    найти:

    .reputation {
  font-weight: bold;
  padding: 3px;
  text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}

    заменить на:

    .reputation {
  font-weight: bold;
  padding: 3px;
  margin: 0 -3px;
  text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}

    Результат:

    attachicon.gifБуфер обмена-2.jpg

    :yahoo:

    Всё отлично, теперь другой вопрос...

    Как сделать точно такой же блок и для Группы пользователя?

    Edited by Zaxar_D

    • Author

    С блоком разобрался, возник другой вопрос...

    Как сделать надпись группы пользователя белым цветом?

    post-6192-0-55661100-1427472023.png


    Менять цвет в настройках цвета не желательно, можно ли как то сделать не меняя цвет в настройках?

      On 27.03.2015 at 16:11, Zaxar_D said:

    С блоком разобрался, возник другой вопрос...

    Как сделать надпись группы пользователя белым цветом?

    attachicon.gifБезымянный.png

    Менять цвет в настройках цвета не желательно, можно ли как то сделать не меняя цвет в настройках?

    например так:

    дописать в стили

    .AdmPanel span {
color: #fff !important;
text-shadow: none !important;
}

    или так (с тенью как у репутации):

    .AdmPanel span {
color: #fff !important;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px !important;
}

      

    ПС:

    Показать контент

    Нович

    ок пишется через "о"

    •
    • Author

      On 27.03.2015 at 16:14, Viktar83 said:

    например так:

    дописать в стили

    .AdmPanel span {
color: #fff !important;
text-shadow: none !important;
}

    или так (с тенью как у репутации):

    .AdmPanel span {
color: #fff !important;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px !important;
}

      

    ПС:

    Показать контент

    Нович

    ок пишется через "о"

    В очередной раз спасибо за помощь)

    Группы настраивал не я, но спасибо :D

     

    Еще возникло 2 вопроса!

    1)Можно ли как то сменить шрифт не задевая настройки?(Например у меня сейчас так - Администраторы, а мне надо так - АДМИНИСТРАТОРЫ) можно как то в css сменить?

    2)Как сделать подчеркивание?

    Пример:post-6192-0-41319400-1427473874.jpg

      Zaxar_D said:

    1)Можно ли как то сменить шрифт не задевая настройки?(Например у меня сейчас так - Администраторы, а мне надо так - АДМИНИСТРАТОРЫ) можно как то в css сменить?

    text-transform: uppercase;

    например сюда можно впихнуть:

    .AdmPanel span {
color: #fff !important;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px !important;
text-transform: uppercase;
}

    или сюда:

    .AdmPanel {
  ...
  ...
  text-transform: uppercase;
}
    •
    • Author
      On 27.03.2015 at 16:48, Viktar83 said: 
    text-transform: uppercase;

    например сюда можно впихнуть:

    .AdmPanel span {
color: #fff !important;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px !important;
text-transform: uppercase;
}

    или сюда:

    .AdmPanel {
  ...
  ...
  text-transform: uppercase;
}

     

    С 1 вопрос решен)

    Не знаешь как сделать вопрос №2?

    • Author

    Думаю что это два последних вопроса.

    1) Как сделать вот такое под выделение?

    post-6192-0-37350700-1427476936.jpg

    2)Как добавить такие кнопки? Или примерно такие)

    post-6192-0-57732100-1427476954.jpg

      Zaxar_D said:

    1) Как сделать вот такое под выделение?

    в стили дописать

    .reputation .right {
background: #43B543;
display: block;
padding: 3px;
margin: -3px;
}

    post-24610-0-30656000-1427477770.jpg

     

      Zaxar_D said:
    2)Как добавить такие кнопки? Или примерно такие)

    :shake:

    Через вывод "дополнительных полей"?

    '?do=embed' frameborder='0' data-embedContent>>

    •
    • Author

      On 27.03.2015 at 17:55, Viktar83 said:

    в стили дописать

    .reputation .right {
background: #43B543;
display: block;
padding: 3px;
margin: -3px;
}

    attachicon.gifБуфер обмена-4.jpg

     

     

     

    :shake:

    Через вывод "дополнительных полей"?

    '?do=embed' frameborder='0' data-embedContent>>

    Это я знаю)

    Но я подумал и решил что мне это не нужно)

    Guest
    This topic is now closed to further replies.
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.