UserInfoPane

Posted 24 марта, 201510 yr

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

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

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

<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 24 марта, 201510 yr by Zaxar_D

24 марта, 201510 yr

Author

Во втором ошибся, как выровнять все так же как на скрине.

Одно с лева, другое с права)

Буду очень благодарен!!!

24 марта, 201510 yr

Бесплатно:

_htmlbook.ru

Репутация:

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

Информация:

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

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

24 марта, 201510 yr

Author

Бесплатно:

_htmlbook.ru

Репутация:
<div>
Репутация
<div style="float:right">Переменная репутации</div>
Информация:
<dt>Сообщений</dt><dd>Переменная "сообщений"</dd>
<dt>Регистрация</dt><dd>Переменная "регистрации"</dd>
Работы на 30-40 минут, чтобы красиво выглядело. Могу сделать за небольшую сумму.

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

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

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

Edited 24 марта, 201510 yr by Zaxar_D

24 марта, 201510 yr

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

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

вставить:

<!--REPUTATION BEGIN-->
<if test="RepPositive:|:$author['pp_reputation_points'] > 0">
<div class='reputation positive clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<if test="RepNegative:|:$author['pp_reputation_points'] < 0">
<div class='reputation negative clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<if test="RepZero:|:$author['pp_reputation_points'] == 0">
<div class='reputation zero clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<!--REPUTATION END-->

вместо:

<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>

вставить:

<li class='post_count desc lighter clear clearfix'>
<strong><font color="grey"><span class="left">Сообщения:</strong></font></span><span class="right">{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</span>
</li>
<li class='joined desc lighter clear clearfix'>
<strong><font color="grey"><span class="left">{$this->lang->words['m_joined']}</strong></font></span><span class="right">{parse date="$author['joined']" format="manual{%d.%m.%Y}"}</span>
</li>

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

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

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

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

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

Zaxar_D and AlexBrtn
2

24 марта, 201510 yr

Author

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

смысл такой:

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

вставить:

<!--REPUTATION BEGIN-->
<if test="RepPositive:|:$author['pp_reputation_points'] > 0">
<div class='reputation positive clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<if test="RepNegative:|:$author['pp_reputation_points'] < 0">
<div class='reputation negative clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<if test="RepZero:|:$author['pp_reputation_points'] == 0">
<div class='reputation zero clear clearfix' ><span class="left">РЕПУТАЦИЯ</span><span class="right">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</span></div>
</if>
<!--REPUTATION END-->

вместо:

<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>

вставить:

<li class='post_count desc lighter clear clearfix'>
<strong><font color="grey"><span class="left">Сообщения:</strong></font></span><span class="right">{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</span>
</li>
<li class='joined desc lighter clear clearfix'>
<strong><font color="grey"><span class="left">{$this->lang->words['m_joined']}</strong></font></span><span class="right">{parse date="$author['joined']" format="manual{%d.%m.%Y}"}</span>
</li>

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

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

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

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

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

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

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

Edited 24 марта, 201510 yr by Zaxar_D

24 марта, 201510 yr

Author

Возникает еще такое, когда у пользователя много репутации:

25 марта, 201510 yr

Author

CSS репутации

.reputation {
	font-weight: bold;
	padding: 3px 30px;
	display: inline-block;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 0px;
	text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}
	
	.reputation.positive, .members li.positive {
		background: #6DC66C url('{style_images_url}/highlight_faint.png') repeat-x 0 1px;
	}
	
	.reputation.negative, .members li.negative {
		background: #CD5C5C url('{style_images_url}/highlight_faint.png') repeat-x 0 1px;
	}
	
	.reputation.positive, .reputation.negative {
		color: #fff;
	}
	
	.reputation.zero {
		background: #6DC66C url('{style_images_url}/highlight_faint.png') repeat-x 0 1px;
		color: #fff;
	}

25 марта, 201510 yr

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;
}

Zaxar_D
1

25 марта, 201510 yr

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

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

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

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

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

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

26 марта, 201510 yr

Author

Слишком большие внутренние отступы:
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;
}

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

26 марта, 201510 yr

Я бы тоже хотел услышать ответ

26 марта, 201510 yr

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

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

ПС:

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

найти:
.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;
}
Результат:

Zaxar_D
1

27 марта, 201510 yr

Author

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

Буфер обмена-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;
}
Результат:

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

:yahoo:

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

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

Edited 27 марта, 201510 yr by Zaxar_D

27 марта, 201510 yr

Author

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

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

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

27 марта, 201510 yr

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

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

Безымянный.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;
}

ПС:

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

Zaxar_D
1

27 марта, 201510 yr

Author

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

дописать в стили
.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;
}
ПС:

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

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

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

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

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

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

Пример:

27 марта, 201510 yr

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;
}

Zaxar_D
1

27 марта, 201510 yr

Author

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?

27 марта, 201510 yr

2) где именно границы нужны ?

27 марта, 201510 yr

Author

2) где именно границы нужны ?

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

Под сообщениями и регистрацией

27 марта, 201510 yr

например, можно так

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

.joined {
border-bottom: 1px solid #bbb;
border-top: 1px solid #bbb;
margin: 0 -3px;
padding: 0 3px;
}

Zaxar_D
1

27 марта, 201510 yr

Author

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

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

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

27 марта, 201510 yr

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

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

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

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

:shake:

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

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

Zaxar_D
1

27 марта, 201510 yr

Author

в стили дописать
.reputation .right {
background: #43B543;
display: block;
padding: 3px;
margin: -3px;
}
Буфер обмена-4.jpg

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

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

Это я знаю)

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

Sign In

UserInfoPane

Featured Replies

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

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)