آموزش : زیباسازی بخش اطلاعات کاربری UserInfopane

علی مددی · 13 دی، ۱۳۹۲

با سلام و خسته نباشید خدمت همه دوستان...

این آموزش شامل چند مرحله و ویرایش چند قسمت مختلف است ، سعی میکنم تا اونجایی که امکان باشه ساده و روان و با جزئیات اشاره کنمو شما هم باید موقع اجرا توجه کنید و حواستون پرت نباشه که اشتباهی انجام ندهید ، برای اطمینان بیتشر از بیت post ، بیت userInfoPane کپی بگیرید .

چون در این آموزش نام کاربری از نوار بالایی به بخش اطلاعات کاربری رفته پس باید نام کاربری از آن قسمت غیرفعال یا حذف شده و به بخش اطلاعات کاربری اضافه شود.

به مسیر رفته :

Look & Feel  >>  Manage Skin Sets & Templates  >>  انتخاب قالب  >> Templates >> Topic View >> post

و کد زیر را پیدا کنید

<div class='post_username'>

در بعضی از قالب ها این کد را سرچ کنید :

<if test="postMember:|:$post['author']['member_id']">

و تا رسیدن به کد زیر

<div class='post_date'>

کدها را غیرفعال () یا حذف کنید

-----------------------------------------------------------------------------------------------------------

کد زیر را سرچ کنید :

<div class='author_info'>

و در بعضی قالب ها کد زیر

<div class='author_info <if test="$this->settings['horizontalTopicView']!='yes'">clearfix</if>'>

کد زیر را بعد از آن اضافه کنید و ذخیره کنید

<div class='usernameBar'>
<if test="postMember:|:$post['author']['member_id']">
<span itemprop="creator name" class="userclass">{parse template="userHoverCard" group="global" params="$post['author']"}</span>
				<else />
					<span class="userclass">
					{parse template="userHoverCard" group="global" params="$post['author']"}
					</span>
				</if> 
                          </div>

-----------------------------------------------------------------------------------------------------------

اگر به نوار بالای اطلاعات کاربری توجه کرده باشید جلوی نام کاربری "تاریخ و ساعت" ارسال پست نوشته می شود که این قسمت در قالب ها به دو صورت نمایش داده می شود که در تصاویر زیر مشخص است.

در این تصویر همانطور که می بینید "تاریخ و ساعت" داخل پست نوشته می شود و برای ما مشکلی ایجاد نمی کند

ولی در این تصویر "تاریخ و ساعت" جلوی نام کاربری نوشته می شود که با حذف نام کاربری این قسمت به سمت راست می رود اگر برای شما مهم نیست که هیچ ، وگرنه برای اینکه آن را به جای قبلی ببریم مراحل زیر را انجام دهید.

به مسیر زیر رفته (استایل قالب) :

Look & Feel  >>  Manage Skin Sets & Templates  >>  انتخاب قالب  >> CSS >> ipb_styles

کد زیر را پیدا کنید ، اگر مقدار margin داشت که با تغییر مقدار آن میتوانید قسمت "تاریخ و ساعت" تنظیم کنید و اگر نداشت می توانید اضافه کنید (البته من مقدار صحیح margin- r i g h t نوشتم یعنی همون 200px)


.post_date{
	color: #fff;
	-------
             -------
              ------
        margin-right: 200px;
}

-----------------------------------------------------------------------------------------------------------

همچنین کد زیر را در ipb_styles پیدا کنید


.author_info {
----
-----
--------
}

و این کد را با آن جایگزین کنید


.author_info {
background: #f9f9f9;
border: 1px solid #DAD8D8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 160px;
float: left;
font-size: 12px;
padding: 15px 10px;
margin: 15px 10px 0 15px;
box-shadow: 0 0 0 1px #FFF inset, 1px 1px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 0 0 1px #FFF inset, 1px 1px 3px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 0 0 1px #FFF inset, 1px 1px 3px rgba(0, 0, 0, 0.05);
}

-----------------------------------------------------------------------------------------------------------

برای اینکه تغییرات در قسمت پیغام خصوصی هم اعمال گردد به مسیر زیر رفته

Look & Feel  >>  Manage Skin Sets & Templates  >>  انتخاب قالب  >> Templates >> Messenger   >> showConversation

کد زیرا سرچ کنید و حذف یا غیرفعال () کنید.

<if test="authorOnline:|:$members[ $msg['msg_author_id'] ]['member_id']">
<span class="author vcard">{parse template="userHoverCard" group="global" params="$members[ $msg['msg_author_id'] ]"}</span>
							<else />
								{$members[ $msg['msg_author_id'] ]['members_display_name']}
							</if>

کد زیر را پیدا کنید

<div class='author_info'>

و این کد را زیر آن اضافه کنید

<div class='usernameBar'>
<if test="authorOnline:|:$members[ $msg['msg_author_id'] ]['member_id']">
<span class="author vcard userclass">{parse template="userHoverCard" group="global" params="$members[ $msg['msg_author_id'] ]"}</span>
							<else />
                                           <span class="userclass">
					{$members[ $msg['msg_author_id'] ]['members_display_name']}
                                                </span></if> </div>

-----------------------------------------------------------------------------------------------------------

حالا کدهای زیر را به انتهای کدها استایل قالب اضافه و ذخیره کنید.

/***************************نام کاربری و آواتار*****************************/

.usernameBar {
background: #e0e0e0;
border: 1px solid #d9d9d9;
position: relative;
padding: 7px 0 7px 0;
margin: -25px 6px 0 6px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
}

.userclass{
text-align: center;
font-weight: bold;
word-break: break-word;
}

.postbitBoxAvatar {
background: #f0f7fc;
width: 160px;
border: 1px solid #bae2fc;
margin-top: 6px;
margin-left: auto;
margin-right: auto;
padding: 3px 0 3px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/********** ******** *********روبان ********* ********** **********/
.postbitBoxBar {
background: #9fcded;
border: 1px solid #6cb2e4;
position: relative;
padding: 3px 3px;
margin: 10px -15px 10px -15px;
text-align: center;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-khtml-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.postbitBoxBar div {
background-color: #6cb2e4;
position: absolute;
top: -4px;
width: 4px;
height: 4px;
}
.postbitBoxBar div.leftPoint {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-khtml-border-top-left-radius: 3px;
left: -1px;
}
.postbitBoxBar div.rightPoint {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-khtml-border-top-right-radius: 3px;
right: -1px;
}

.postbitBoxBaron {
background: #00D322;;
border: 1px solid #198D03;
color : white;
position: relative;
padding: 3px 3px;
margin: 10px -15px 10px -15px;
text-align: center;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-khtml-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.postbitBoxBaron div {
background-color: #198D03;
position: absolute;
top: -4px;
width: 4px;
height: 4px;
}
.postbitBoxBaron div.leftPoint {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-khtml-border-top-left-radius: 3px;
left: -1px;
}
.postbitBoxBaron div.rightPoint {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-khtml-border-top-right-radius: 3px;
right: -1px;
}

.postbitBoxBarof {
background: #B9B8B8;
border: 1px solid #6D6D6D;
color : black;
position: relative;
padding: 3px 3px;
margin: 10px -15px 10px -15px;
text-align: center;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-khtml-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.postbitBoxBarof div {
background-color: #6D6D6D;
position: absolute;
top: -4px;
width: 4px;
height: 4px;
}
.postbitBoxBarof div.leftPoint {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-khtml-border-top-left-radius: 3px;
left: -1px;
}
.postbitBoxBarof div.rightPoint {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-khtml-border-top-right-radius: 3px;
right: -1px;
}

.postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {
font-size: 11px;
display: block;
clear: both;
}

/********************************UserInfo Style****************************************/

.UserInfo {
font-size: 11px;
/*background-color: rgb(241,241,241);*/
padding: 4px 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.Justified {
margin: 2px 0 0;
border-bottom: 1px dashed #8F8F8F;
overflow: hidden;
line-height: 1.5;
}
.Justified dt {
font-size: 11px!important;
float: right;
padding-left: 2px;
text-align: left;
max-width: 100%;
color: rgb(55, 134, 216);
}
.Justified dd {
float: left;
font-size: 10px!important;
text-align: right;
max-width: 100%;
padding-right: 2px;
}

کدهای زیر هم جایگزین کدهای userinfopane در مسیر زیر کنید و ذخیره...

Look & Feel  >>  Manage Skin Sets & Templates  >>  انتخاب قالب  >> Template >> Global Templates  >> userInfoPane

کدها :

<div itemscope itemtype="http://schema.org/Person" class='user_details'>
	<span class='hide' itemprop="name">{$author['members_display_name']}</span>
	<ul class='basic_info'>
<!--  *************** -- نمایش گروه کاربری -- ***************  -->

<div class="postbitBoxBar"data-tooltip="گروه کاربری"> <div class="leftPoint"></div><div class="rightPoint"></div>
			{$author['_group_formatted']}
		                   </div>

<!--  *************** -- نمایش عنوان کاربری -- ***************  -->
<div class="postbitBoxBar"> <div class="leftPoint"></div><div class="rightPoint"></div>
<if test="membertitle:|:$author['member_title']">
			<p class='desc member_title'>{$author['member_title']}</p>
		</if> </div>
<!--  ********************************************************  -->		
		<if test="avatar:|:$author['member_id']">
			<li class='avatar postbitBoxAvatar'>
				<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>

<!--  *************** -- آیکون گروه کاربری یا درجه کاربری -- ***************  -->
	<if test="rankimage:|:$author['member_rank_img']">
	         <div class="postbitBoxBar"> <div class="leftPoint"></div><div class="rightPoint"></div>
			<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
				<img src='{$author['member_rank_img']}' alt='' />
			<else />
				{$author['member_rank_img']}
			</if>
			</div>
		</if>
<!--  *************** -- وضعیت آنلاین و آفلاین -- ***************  -->

<if test="postOnline:|:$author['_online']">

<div class="postbitBoxBaron" data-tooltip="آنلاین"> <div class="leftPoint"></div><div class="rightPoint"></div>
			آنـلایـن
		                   </div>

<else />

<div class="postbitBoxBarof"data-tooltip="آفلاین"> <div class="leftPoint"></div><div class="rightPoint"></div>
	         	آفـلایـن
		                   </div>

</if>

<!--  *************** -- UserInfo -- ***************  -->

<!--  *************** -- امتیاز هشدار -- ***************  -->

<if test="authorwarn:|:$author['show_warn']">
	<dl class="Justified">
		<dt>امتیاز هشدار</dt>
			<dd><a href='{parse url="app=members&module=profile&section=warnings&member={$author['member_id']}&from_app={$this->request['app']}&from_id1={$contentid}&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_statuss'], $author['warn_level'] )"}</a></dd>
	</dl>
              </if>
<!--  *************** -- امتیاز محبوبیت -- ***************  -->
     <if test="RepPositive:|:$author['pp_reputation_points'] > 0">
            <dl class="Justified"> 
               <dt>محبوبیت-امتیاز</dt>
<dd>{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</dd>
           </dl>
       </if>

     <if test="RepNegative:|:$author['pp_reputation_points'] < 0">
            <dl class="Justified">
               <dt> امتیاز</dt>
<dd>{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</dd>
           </dl>
       </if>

     <if test="RepZero:|:$author['pp_reputation_points'] == 0">
            <dl class="Justified">
               <dt>امتیاز</dt>
<dd>{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</dd>
           </dl>
       </if>
<!--  *************** -- قسمت تعداد پست های ارسالی -- ***************  -->
  <div class="UserInfo">
		<if test="postCount:|:$author['member_id']">		
		   <dl class="Justified">
			<dt>ارسال ها</dt>
<dd>{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</dd>
		</dl>
		</if>
<!--  *************** -- تاریخ عضویت -- ***************  -->
        <dl class="Justified">
<dt>{$this->lang->words['m_joined']}</dt>
<dd>{parse date="$author['joined']" format="date"}</dd>
        </dl>

<!--  *************** -- بخش فیلدهای تعریف شده -- ***************  -->
	
      <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 != ''">
                                             <dl class="Justified">
							{$field}
                                                   </dl>
					  </if> 
				</foreach>
			</foreach>
	          </if> 
 
		</div>
	</ul>
</div>

نکته : من تا اونجایی که تونستم حالت پایه طراحی کردم و شما می توانید با تغییر رنگ و موارد دیگه به شکل های دیگه تبدیل کنید.

خسته نباشید..

نتیجه کار

برای اون بخش جنسیت به تاپیک آموزشی که آقا سعید تهیه کردن مراجعه کنید.

برای اضافه نمودن بخش "اخبار و مقاله" و "نوشته های بلاگ" به پست 7 به بعد این تاپیک مراجعه کنید...

امیدوارم لذت برده باشید

موفق باشید...

Mr.MAMAD · 24 دی، ۱۳۹۳

مشکل حل شد.

فقط چطور اسم رو رنگی کنم؟

یعنی هر کسی با رنگ گروهش نشان بده

mordab · 24 دی، ۱۳۹۳

من همین کار رو کردم دقیقا ولی ی قسمت اش کادر دور انداخته نشده !

http://notaryplus.me/anjoman/index.php?/topic/2-%D8%A7%D8%B9%D8%B6%D8%A7%DB%8C-%D8%AA%DB%8C%D9%85/

علی مددی · 25 دی، ۱۳۹۳

مشکل حل شد.

فقط چطور اسم رو رنگی کنم؟

یعنی هر کسی با رنگ گروهش نشان بده

http://ipsfarsi.com/topic/9950-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%85%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88-%D8%B1%D9%86%DA%AF-%D8%AF%D8%A7%D8%AF%D9%86-%D8%A8%D9%87-%DA%AF%D8%B1%D9%88%D9%87-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C/

من همین کار رو کردم دقیقا ولی ی قسمت اش کادر دور انداخته نشده !

http://notaryplus.me/anjoman/index.php?/topic/2-%D8%A7%D8%B9%D8%B6%D8%A7%DB%8C-%D8%AA%DB%8C%D9%85/

لینک که کار نمیکنه ، حداقل با یک تصویر مشخص کنید.

mordab · 26 دی، ۱۳۹۳

http://notaryplus.me/anjoman/topic/1-welcome/#entry1 لینک باز شو

محمد عنبرستانی · 26 دی، ۱۳۹۳

سلام

داخل استایل قالب ipb_style کلاس .author_info کدهاشو قرار ندادید....به آموزش همون قسمت توجه کنید.

mordab · 26 دی، ۱۳۹۳

الان اون قسمت رو قرار دادم اما اواتار چسبید سمت راست

اگه ممکنه اموزش تغییر قسمت پایین تایپیک ها نوشته "پاسخ ویرایش گزارش نقل قول " رو هم بگذارید

سعید نظری · 26 دی، ۱۳۹۳

سلام.تو تاپیک پوسته ای که استفاده میکنی پستتو ارسال کن راهنمایی کنم

MrAmir · 21 اسفند، ۱۳۹۳

سلام ممنون آموزش جالبیه فقط 3تا مشکل ایجاد کرد واسه من

من از این قالب استفاده میکنم

اول اینکه نام کاربری رفته رو یه قسمت از نوار بالاش و فیت نیست

دوم گوشه های سمت چپه که انگار رو هواس میخوام مثل قسمت سمت راست تصویر فقط قسمت سمت چپ نوار که رو هواس صاف بشه مثل توی عکس , بازم تاکید میکنم فقط قسمت سمت چپ نوار چون راستش درسته

مشکل سوم هم با هوک نمایش تعداد پسند هاس اگه نمیشه حلش کرد هوک رو حذف کنم

مورد بعدی اینکه چجوری میشه رنگ بندی این نوار هارو به دلخواه تغییر داد ممنون میشم دوستان راهنمایی کنن

ورود

آموزش : زیباسازی بخش اطلاعات کاربری UserInfopane

ارسال‌های توصیه شده

علی مددی 1689

لینک ارسال

به اشتراک گذاری در سایت های دیگر

Mr.MAMAD 13

لینک ارسال

به اشتراک گذاری در سایت های دیگر

mordab 6

لینک ارسال

به اشتراک گذاری در سایت های دیگر

علی مددی 1689

لینک ارسال

به اشتراک گذاری در سایت های دیگر

mordab 6

لینک ارسال

به اشتراک گذاری در سایت های دیگر

محمد عنبرستانی 207

لینک ارسال

به اشتراک گذاری در سایت های دیگر

mordab 6

لینک ارسال

به اشتراک گذاری در سایت های دیگر

سعید نظری 1710

لینک ارسال

به اشتراک گذاری در سایت های دیگر

MrAmir 47

لینک ارسال

به اشتراک گذاری در سایت های دیگر

بایگانی شده

کاربران آنلاین در این صفحه 0 کاربر

صفحه اصلی

بخش دریافت

فعالیت ها

فهرست بخش ها

پشتیبانی و پرسش و پاسخ برای حل مشکلات