Перейти к содержанию

UserInfoPane

Zaxar_D
 Поделиться

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

Zaxar_D Помощник

Zaxar_D

Опубликовано
Опубликовано (изменено)

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

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>

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

Изменено пользователем Zaxar_D
Ссылка на комментарий
Поделиться на другие сайты
Zaxar_D Помощник

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

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

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

grisha2217

Опубликовано
Опубликовано

Бесплатно:

_htmlbook.ru

Репутация:

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

Информация:

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

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

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано (изменено)

Бесплатно:

_htmlbook.ru

Репутация:

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

Информация:

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

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

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

post-6192-0-79108300-1427229173.png

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

 

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

Изменено пользователем Zaxar_D
Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано (изменено)

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

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

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

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

post-6192-0-63063700-1427232308.png

Изменено пользователем Zaxar_D
Ссылка на комментарий
Поделиться на другие сайты
Zaxar_D Помощник

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

post-6192-0-80110800-1427233621.png

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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;
}
Ссылка на комментарий
Поделиться на другие сайты
grisha2217 Помощник

grisha2217

Опубликовано
Опубликовано

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

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

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

 

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

 

 

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

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

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано

 

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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

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

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

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано (изменено)

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

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:

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

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

Изменено пользователем Zaxar_D
Ссылка на комментарий
Поделиться на другие сайты
Zaxar_D Помощник

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

post-6192-0-55661100-1427472023.png


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

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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

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

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

  

ПС:

Нович

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

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

.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

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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 Помощник

Zaxar_D

Опубликовано
  • Автор
Опубликовано 
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?

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

например, можно так
post-24610-0-49941900-1427476531.jpg
дописать в стили:

.joined {
border-bottom: 1px solid #bbb;
border-top: 1px solid #bbb;
margin: 0 -3px;
padding: 0 3px;
}
Ссылка на комментарий
Поделиться на другие сайты
Zaxar_D Помощник

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

post-6192-0-37350700-1427476936.jpg

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

post-6192-0-57732100-1427476954.jpg

Ссылка на комментарий
Поделиться на другие сайты
Viktar83 Восходящая звезда

Viktar83

Опубликовано
Опубликовано

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

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

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

post-24610-0-30656000-1427477770.jpg

 

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

:shake:

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

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

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

Zaxar_D

Опубликовано
  • Автор
Опубликовано

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

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

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

 

 

 

:shake:

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

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

Это я знаю)

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

Ссылка на комментарий
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

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