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


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

Оформление userinfoPane - 2


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

#61 Оффлайн   the_covered

    Новичок


  • Пользователи
  • Репутация
    1
    • Cообщений: 12
    • Форум:Нет
    • Город:Украина-Запорожье

Отправлено 23 Декабрь 2013 - 00:30

 

У меня что та не выходит а именно не пойму где ксс заменить , и скажите В "userInfoPanel" заменять весь код или же добавить  дополнения ?

 

CSS в ipb_styles.css

Заменять весь userInfopanel

 

Что та я  не пойму где заменять  подскажи если не сложно 

/* AUTHOR INFO (& RELATED) STYLES */

.column_view .post_wrap{
	background: #f5f5f5;
}

.column_view .post_body{
	border-left: 1px solid #e4e4e4;
}

.author_info {
	width: 155px;
	float: left;
	font-size: 12px;
	text-align: center;
	padding: 10px 10px;
	line-height: 150%;
}
	
	.author_info .group_title {
		color: #5a5a5a;
		margin-top: 5px;
	}
	
	.author_info .member_title { margin-bottom: 5px; word-wrap: break-word; }
	.author_info .group_icon { margin-bottom: 3px; }
	
.custom_fields {
		color: #818181;
		margin-top: 8px;
border-top: 1px solid #efefef;
}
.custom_fields .ft {
		color: #505050;
		margin-right: 3px;
}
.custom_fields .fc {
		word-wrap: break-word;
}
.custom_fields li {
background: #FFFFFF;
padding:4px;
margin-top:2px;
border:1px solid #DDDDDD;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-align:center;
}

.user_controls {
		text-align: center;
		margin: 6px 0;
}
		.user_controls li a {
				display: inline-block;
				background: #f6f6f6;
				background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%); /* firefox */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5)); /* webkit */
				border: 1px solid #dbdbdb;
				-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				padding: 5px;
				color: #616161;
		}

  • 0

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

#62 Оффлайн   Just Fox

    So don't give up


  • Пользователи
  • Репутация
    312
    • Cообщений: 622
    • Форум:Нет
    • Город:Москва

Отправлено 23 Декабрь 2013 - 00:32

 

 

У меня что та не выходит а именно не пойму где ксс заменить , и скажите В "userInfoPanel" заменять весь код или же добавить  дополнения ?

 

CSS в ipb_styles.css

Заменять весь userInfopanel

 

Что та я  не пойму где заменять  подскажи если не сложно 

/* AUTHOR INFO (& RELATED) STYLES */

.column_view .post_wrap{
	background: #f5f5f5;
}

.column_view .post_body{
	border-left: 1px solid #e4e4e4;
}

.author_info {
	width: 155px;
	float: left;
	font-size: 12px;
	text-align: center;
	padding: 10px 10px;
	line-height: 150%;
}
	
	.author_info .group_title {
		color: #5a5a5a;
		margin-top: 5px;
	}
	
	.author_info .member_title { margin-bottom: 5px; word-wrap: break-word; }
	.author_info .group_icon { margin-bottom: 3px; }
	
.custom_fields {
		color: #818181;
		margin-top: 8px;
border-top: 1px solid #efefef;
}
.custom_fields .ft {
		color: #505050;
		margin-right: 3px;
}
.custom_fields .fc {
		word-wrap: break-word;
}
.custom_fields li {
background: #FFFFFF;
padding:4px;
margin-top:2px;
border:1px solid #DDDDDD;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-align:center;
}

.user_controls {
		text-align: center;
		margin: 6px 0;
}
		.user_controls li a {
				display: inline-block;
				background: #f6f6f6;
				background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%); /* firefox */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5)); /* webkit */
				border: 1px solid #dbdbdb;
				-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				padding: 5px;
				color: #616161;
		}

 

Сейчас в общем исправлю два бага в этом оформлении (первый с аватаром и второй с репутацией), и напишу полный мануал.


  • 0

#63 Оффлайн   Just Fox

    So don't give up


  • Пользователи
  • Репутация
    312
    • Cообщений: 622
    • Форум:Нет
    • Город:Москва

Отправлено 23 Декабрь 2013 - 00:47

Открываем файл "ipb_styles.css" [ Админ центр -> Внешний вид -> Ваш_Шаблон -> CSS -> ipb_styles.css ] и в самый низ страницы вставляем следующий код:

.user_block {
       color:#474747;
}

.wa-block {
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 21px;
       margin: 4px auto;
}

.wa-block {
       padding: 0 3px;
       width: 137px;
}

.wa-block {
       text-align: left;
       background: #e9e9e9;
}

.u-mini {
       float: right;
}

.psevdo {
       height: 3px;
}

Далее открываем "userInfoPane" [ Админ центр -> Внешний вид -> Ваш_Шаблон -> userInfoPane ] и удаляем от туда ВСЁ содержимое и вставляем туда:

<div class="user_block">
	    <div class="psevdo"></div>
        <if test="membertitle:|:$author['member_title']">
            <p class='desc member_title'>{$author['member_title']}</p>
		</if>
	</div>
		
	<div class="avatar">
        <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 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>
	</div>
		
    <div class="group">
		<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
			<img src='{$author['member_rank_img']}' alt='' />
	    <else />
		    {$author['member_rank_img']}
	    </if>
	</div>
		
	<div class="wa-block">
		<div class="psevdo"></div>
		Сообщений:
		<div class="u-mini">
			« {parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"} »
		</div>
	</div>
	
	<if test="authorcfields:|:$author['custom_fields'] != """>		
		<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
			<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
				<if test="$field != ''">
						
					{$field}
						
				</if>
			</foreach>
		</foreach>
	</if>
   
	

Теперь для того, чтобы отображались Skype, ICQ и прочее в таком же красивом поле делаем следующее. 

Админ центр -> Пользователи -> Дополнительные поля -> Выбираем то, что нам нужно (icq, skype и т.п.), листаем в самый низ -> 

<div class="wa-block">
     <div class="psevdo"></div>
     ТУТ НАЗВАНИЕ (СКАЙП И ТД):
     <div class="u-mini">« {content} »</div>
</div>

а если заместо текста хотим сделать картинкой, делаем так:

<div class="wa-block">
     <div class="psevdo"></div>
     <img src="public/style_extra/cprofile_icons/название_картинки.формат"/> :
     <div class="u-mini">« {content} »</div>
</div>

  • 1

#64 Оффлайн   the_covered

    Новичок


  • Пользователи
  • Репутация
    1
    • Cообщений: 12
    • Форум:Нет
    • Город:Украина-Запорожье

Отправлено 23 Декабрь 2013 - 01:07

 

Открываем файл "ipb_styles.css" [ Админ центр -> Внешний вид -> Ваш_Шаблон -> CSS -> ipb_styles.css ] и в самый низ страницы вставляем следующий код:

.user_block {
       color:#474747;
}

.wa-block {
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 21px;
       margin: 4px auto;
}

.wa-block {
       padding: 0 3px;
       width: 137px;
}

.wa-block {
       text-align: left;
       background: #e9e9e9;
}

.u-mini {
       float: right;
}

.psevdo {
       height: 3px;
}

Далее открываем "userInfoPane" [ Админ центр -> Внешний вид -> Ваш_Шаблон -> userInfoPane ] и удаляем от туда ВСЁ содержимое и вставляем туда:

<div class="user_block">
	    <div class="psevdo"></div>
        <if test="membertitle:|:$author['member_title']">
            <p class='desc member_title'>{$author['member_title']}</p>
		</if>
	</div>
		
	<div class="avatar">
        <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 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>
	</div>
		
    <div class="group">
		<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
			<img src='{$author['member_rank_img']}' alt='' />
	    <else />
		    {$author['member_rank_img']}
	    </if>
	</div>
		
	<div class="wa-block">
		<div class="psevdo"></div>
		Сообщений:
		<div class="u-mini">
			« {parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"} »
		</div>
	</div>
	
	<if test="authorcfields:|:$author['custom_fields'] != """>		
		<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
			<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
				<if test="$field != ''">
						
					{$field}
						
				</if>
			</foreach>
		</foreach>
	</if>
   
	

Теперь для того, чтобы отображались Skype, ICQ и прочее в таком же красивом поле делаем следующее. 

Админ центр -> Пользователи -> Дополнительные поля -> Выбираем то, что нам нужно (icq, skype и т.п.), листаем в самый низ -> 

<div class="wa-block">
     <div class="psevdo"></div>
     ТУТ НАЗВАНИЕ (СКАЙП И ТД):
     <div class="u-mini">« {content} »</div>
</div>

а если заместо текста хотим сделать картинкой, делаем так:

<div class="wa-block">
     <div class="psevdo"></div>
     <img src="public/style_extra/cprofile_icons/название_картинки.формат"/> :
     <div class="u-mini">« {content} »</div>
</div>

Спасибо большое теперь все понятно что и как . Вот еще встречный вопрос как мне добавить в поля  "Звания - репутация-Город и замечание" . И в данной теме в верху аватар есть обводка титула  как у тебя "Постоялец" и оно в обводке а при замете твоего кода  то обводки нету , объясни какие дальнейшие действия ? Буду очень сильно благодарен , заранее спасибо .


Сообщение отредактировал the_covered: 23 Декабрь 2013 - 01:09

  • 0

#65 Оффлайн   the_covered

    Новичок


  • Пользователи
  • Репутация
    1
    • Cообщений: 12
    • Форум:Нет
    • Город:Украина-Запорожье

Отправлено 23 Декабрь 2013 - 01:19

И еще одна ошибка  в полях и в обводке только сообщения и скайп "  Город и т.д не в зоне поля  вообще нет обводки в нем .

 

С этим разобрался просто не закрыл теги в АЦ . С выше  постом все еще не разобрался .


Сообщение отредактировал the_covered: 23 Декабрь 2013 - 01:21

  • 0

#66 Оффлайн   Just Fox

    So don't give up


  • Пользователи
  • Репутация
    312
    • Cообщений: 622
    • Форум:Нет
    • Город:Москва

Отправлено 23 Декабрь 2013 - 01:20

Обвести титул над аватаром можно этим кодом (вставляем также в самый низ):

.member_title {
    background: #e9e9e9;
    height: 23px;
    display: inline-block;
    font-size: 13px;
    padding: 1px;
    width: 152px;
    text-align: center;
    font-size: 0.8em;
    color: #606060;
}

Как репутацию вставить в рамку лень писать, устал слишком, но как сделать обычную репутацию - напишу. Вставляем в самый низ "userInfoPane":

<br>
<!--reputation-->
                                                             <if test="RepPositive:|:$author['pp_reputation_points'] > 0">
                                                                        <div class='reputation positive' data-tooltip="{parse expression=" $author['author_reputation']['text']"}"><div style='font-size:13px'>Репутация: {parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div></div>
                                                                </if>
                                                                <if test="RepNegative:|:$author['pp_reputation_points'] < 0">
                                                                        <div class='reputation negative' data-tooltip="{parse expression=" $author['author_reputation']['text']"}">      <div style='font-size:13px'>Репутация: {parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div></div>
                                                                </if>
                                                                <if test="RepZero:|:$author['pp_reputation_points'] == 0">
                                                                        <div class='reputation zero' data-tooltip="{parse expression=" $author['author_reputation']['text']"}"><div style='font-size:13px'>Репутация: {parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</div></div>
                                                                </if>
<!--reputation-->

Чтобы город добавить, делаем тоже самое, что и с ICQ & Skype, об этом я писал до этого, в выше цитируемом моем сообщении.
По поводу предупреждений. После строки:

<div class="wa-block">
		<div class="psevdo"></div>
		Сообщений:
		<div class="u-mini">
			« {parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"} »
		</div>
	</div>

Добавляем:

<div class="wa-block">
		<div class="psevdo"></div>
		<div class="u-mini">
			<a 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>
		</div>
	</div>
	</div>

  • 1

#67 Оффлайн   Just Fox

    So don't give up


  • Пользователи
  • Репутация
    312
    • Cообщений: 622
    • Форум:Нет
    • Город:Москва

Отправлено 23 Декабрь 2013 - 01:25

Уверены что не отображается Skype и ICQ? 
Попробуйте сделать все по пунктам. 
Админ центр -> Пользователи -> Дополнительные поля -> Skype -> Самый низ страницы 
В это окошко:
Прикрепленный файл  Untitled-3.png   18,37К    скачиваний 1
Вставляем этот код:

<div class="wa-block">
     <div class="psevdo"></div>
    Skype:
     <div class="u-mini">« {content} »</div>
</div>

Сохраняем, заходим в ICQ и вставляем такой код (в такую же рамку как и в Skype):

<div class="wa-block">
     <div class="psevdo"></div>
    ICQ:
     <div class="u-mini">« {content} »</div>
</div>

: Разобрались - это хорошо. Но пусть пост останется для других.


  • 1

#68 Оффлайн   Just Fox

    So don't give up


  • Пользователи
  • Репутация
    312
    • Cообщений: 622
    • Форум:Нет
    • Город:Москва

Отправлено 23 Декабрь 2013 - 02:03

В общем собрал все ошибки и недочеты в своей голове и исправил их. Тема: http://ipbzona.ru/to...-fixed/?p=62404


  • 0