UserInfoPane

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

24 марта, 20159 yr

Author

comment_83906

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

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

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

24 марта, 20159 yr

comment_83907

Бесплатно:

_htmlbook.ru

Репутация:

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

Информация:

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

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

24 марта, 20159 yr

Author

comment_83908

Бесплатно:

_htmlbook.ru

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

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

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

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

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

24 марта, 20159 yr

comment_83909

Как вариант, можно использовать уже имеющиеся классы 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 марта, 20159 yr

Author

comment_83910

Как вариант, можно использовать уже имеющиеся классы 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 марта, 20159 yr by Zaxar_D

24 марта, 20159 yr

Author

comment_83912

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

25 марта, 20159 yr

Author

comment_83917

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 марта, 20159 yr

comment_83936

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 марта, 20159 yr

comment_83940

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

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

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

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

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

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

26 марта, 20159 yr

Author

comment_84053

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

comment_84060

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

26 марта, 20159 yr

comment_84063

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

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

ПС:

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

найти:
.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 марта, 20159 yr

Author

comment_84087

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

Буфер обмена-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 марта, 20159 yr by Zaxar_D

27 марта, 20159 yr

Author

comment_84143

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

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

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

27 марта, 20159 yr

comment_84144

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

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

Безымянный.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 марта, 20159 yr

Author

comment_84148

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

дописать в стили
.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 марта, 20159 yr

comment_84150

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 марта, 20159 yr

Author

comment_84152

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 марта, 20159 yr

comment_84153

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

27 марта, 20159 yr

Author

comment_84155

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

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

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

27 марта, 20159 yr

comment_84156

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

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

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

Zaxar_D
1

27 марта, 20159 yr

Author

comment_84158

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

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

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

27 марта, 20159 yr

comment_84159

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

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

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

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

:shake:

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

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

Zaxar_D
1

27 марта, 20159 yr

Author

comment_84160

в стили дописать
.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

Messages

Уведомления

Search