آموزش : بخش کاربری به شکلی زیبا و متفاوت/userInfoPane

[علی مددی 1689]

سلام ، برحسب درخواست یکی از کاربران این آموزش آماده و تکمیل شده است.

 

نکته : این تغییرات فقط روی قالبی که کدها را تغییر می دهید اعمال خواهد شد نه در تمامی قالب ها

 

 

 

اون تصویر پشت آواتار همون بخش شخصی سازی پروفایل است که تصویر یا رنگی که برای بخش پروفایل انتخاب می کنید، در بخش کاربری هم نمایش داده می شود.

 

به بخش اسنایل و تمپلت قالب مورد نظر رفته  

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

در بخش تمپلت Global Templates  بیت userInfoPane باز کنید و کدهای فعلی را پاک کنید و کدهای زیر را جایگزین کنید.

<div class="wa_userinfo" itemscope itemtype="http://schema.org/Person" class='user_details'>
<span class='hide' itemprop="name">{$author['members_display_name']}</span>

<!-- Background Cover -->
<div class='wa_userinfo_bg' style='height:110px;<if test="hasBodyCustomization:|:$author['customization']['bg_color'] OR $author['customization']['_bgUrl']"><if test="hasBackgroundImage:|:$author['customization']['_bgUrl']">background-image: url("{$author['customization']['_bgUrl']}") !important;background-size: 100% 100% !important;<if test="backgroundIsFixed:|:! $author['customization']['bg_tile']"><else />background-position: 0px 0px;background-attachment: fixed;background-repeat: repeat;</if></if></if>'></div>

<!-- Avatar -->
<div class="wa_userinfo_b1">
    <if test="avatar:|:$author['member_id']">
     
        <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>
    
   <else />
    
       <img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
    
   </if>
</div>

<!-- Group icon -->
<if test="rankimage:|:$author['member_rank_img']">
		<div class='group_icon' style="margin-top: 8px;margin-bottom: 0;">
			<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
				<img src='{$author['member_rank_img']}' alt='' />
			<else />
		{$author['member_rank_img']}
			</if>
			</div>
		</if>
<!-- User Filed -->
<div class="wa_userinfo_b3">
<div style="padding-top:5px;">


<if test="sendpm:|:$this->memberData['g_use_pm'] AND $this->memberData['member_id'] != $author['member_id'] AND $this->memberData['members_disable_pm'] == 0 AND IPSLib::moduleIsEnabled( 'messaging', 'members' ) && $author['member_id']">
<a id='pm_{$contentid}_{$author['member_id']}' href='{parse url="app=members&module=messaging&section=send&do=form&fromMemberID={$author['member_id']}" base="public"}' title='{$this->lang->words['pm_this_member']}' class="pm_button ipsButton_secondary ipsType_smaller"><img src="{style_images_url}/email_open.png" alt=""></a>
   
</if>

<if test="friendop:|:$this->memberData['member_id'] AND $this->memberData['member_id'] != $author['member_id'] && $this->settings['friends_enabled'] AND $this->memberData['g_can_add_friends'] && $author['member_id']">
<if test="isfriend:|:IPSMember::checkFriendStatus( $author['member_id'] )">
<a href='{parse url="app=members&module=profile&section=friends&do=remove&member_id={$author['member_id']}&secure_key={$this->member->form_hash}" base="public"}' title='{$this->lang->words['remove_friend']}' class="pm_button ipsButton_secondary ipsType_smaller"><img src="{style_images_url}/user_delete.png" alt=""></a>

<else />
          <a href='{parse url="app=members&module=profile&section=friends&do=add&member_id={$author['member_id']}&secure_key={$this->member->form_hash}" base="public"}' title='{$this->lang->words['add_friend']}' class="pm_button ipsButton_secondary ipsType_smaller"><img src="{style_images_url}/user_add.png" alt=""></a>
</if>
</if>
       

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

</div>
</div>

<div style="width: 90%; margin: 0 auto;margin-top: 5px;">
<!-- REPUTATION BAR -->
<if test="cardRep:|:$this->settings['reputation_enabled'] && $this->settings['reputation_show_profile']">
<div class="reputation-bg" data-tooltip="{parse expression="$author['author_reputation']['text']"}">
<div class="reputation-bar
<!-- GREY BAR -->
<if test="$author['pp_reputation_points']==0">gray width10</if>
<!-- /GREY BAR -->

<!-- RED BARS -->
<if test="$author['pp_reputation_points']<0 && $author['pp_reputation_points']>=-15">red</if>
<if test="$author['pp_reputation_points']<-15 && $author['pp_reputation_points']>=-30">red</if>
<if test="$author['pp_reputation_points']<-30 && $author['pp_reputation_points']>=-45">red</if>
<if test="$author['pp_reputation_points']<-45 && $author['pp_reputation_points']>=-60">red</if>
<if test="$author['pp_reputation_points']<-60">red</if>
<!-- /RED BAR -->

<!-- BLUE BARS -->
<if test="$author['pp_reputation_points']>=1 && $author['pp_reputation_points']<=10">blue width20</if>
<if test="$author['pp_reputation_points']>10 && $author['pp_reputation_points']<=20">blue width20</if>
<if test="$author['pp_reputation_points']>20 && $author['pp_reputation_points']<=40">blue width30</if>
<if test="$author['pp_reputation_points']>30 && $author['pp_reputation_points']<=80">blue width30</if>
<if test="$author['pp_reputation_points']>40 && $author['pp_reputation_points']<=160">blue width40</if>
<!-- /BLUE BARS -->

<!-- GREEN BARS -->
<if test="$author['pp_reputation_points']>50 && $author['pp_reputation_points']<=200">green width40</if>
<if test="$author['pp_reputation_points']>70 && $author['pp_reputation_points']<=250">green width50</if>
<if test="$author['pp_reputation_points']>90 && $author['pp_reputation_points']<=300">green width50</if>
<if test="$author['pp_reputation_points']>110 && $author['pp_reputation_points']<=350">green width60</if>
<if test="$author['pp_reputation_points']>130 && $author['pp_reputation_points']<=450">green</if>
<!-- /GREEN BARS -->

<!-- GOLD BARS -->
<if test="$author['pp_reputation_points']>150 && $author['pp_reputation_points']<=500">gold width60</if>
<if test="$author['pp_reputation_points']>190 && $author['pp_reputation_points']<=550">gold width70</if>
<if test="$author['pp_reputation_points']>230 && $author['pp_reputation_points']<=600">gold width80</if>
<if test="$author['pp_reputation_points']>270 && $author['pp_reputation_points']<=700">gold width90</if>
<if test="$author['pp_reputation_points']>800">gold</if>
<!-- /GOLD BARS -->
">
{$author['pp_reputation_points']}
</div>
</div>
</if>
<!-- /REPUTATION BAR -->
</div>

<if test="authorwarn:|:$author['show_warn']">

<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&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_status'], $author['warn_level'] )"}</a>

</if>
<!-- Posts -->
<div class="wa_userinfo_b4">
<if test="postCount:|:$author['member_id']">
    <div class="left wa_userinfo_b4_1">
      <div>
        <span class="wa_userinfo_b4_m">تعداد ارسال ها</span>
      </div>
      <div style="padding-top: 5px;">
        <span style="font-size: 15px;">{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</span>
      </div>
    </div>
    </if>
    <if test="authorcfields:|:$author['custom_fields'] != """></if>
</div>


</ul>
</div> 

 

در قسمت استایل CSS یه استایل جدید بسازید ( روی Add CSS File  کلیک کنید) و CSS File Name:  را UserinfoPane  وارد کنید و کدهای زیر را داخل آن وارد و ذخیره کنید

.wa_showcard {
    height: 100px;
    line-height: 190px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100% !important;
    -moz-background-size: 100% 100% !important;
    background-size: 100% 100% !important;
    background-position: 50% 50%;
}

.wa_userinfo {
    background: #Fff;
    margin: 3px 0 0 3px;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}

.wa_userinfo_bg {
    height: 50px;
    background: #F8F8F8 !important;
    background-size: 100% 100% !important;
    border-radius: 2px 2px 0 0;
}

.wa_userinfo_b1 {
    text-align: center;
    margin-top: -40px;
}

.wa_userinfo_b1
img {
    height: 80px;
    border-radius: 800px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}

.wa_userinfo_b2 {
    padding-top: 10px;
}

.wa_userinfo_b2
span {
    color: #3e3e3e;
    font-size: 18px;
}

.wa_userinfo_b3 {
    padding-top: 5px;
}

.wa_userinfo_b3 .ipsButton_secondary {
padding: 0 5px;
}

.wa_userinfo_b3
span {
    color: #b0b4b7;
    font-size: 11px;
}

.wa_userinfo_b4 {
    background: #F8F8F8;
    overflow: hidden;
    padding: 7px;
    margin-top: 5px;
}

.wa_userinfo_b4_1 {
    width: 50%;
}

.wa_userinfo_b4_m {
    color: #c2c4c6;
}
/************************************************************************/
/* USER REPUTATION CODED BY YOW MIKE */ 
.reputation-bg {
background: #415C71;
border: 1px solid #415C71;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin-bottom: 5px;
}

.reputation-bar {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font: 12px/23px "Segoe UI",Arial,Tahoma,sans-serif;
color: #fff;
height: 21px;
margin: 1px;
text-align: center;
}

.reputation-bar.gray { background:#BDC3C7; }
.reputation-bar.red { background:#C0392B; }
.reputation-bar.blue { background:#3498DB; }
.reputation-bar.green { background:#2ECC71; }
.reputation-bar.gold { background:#F1C40F; }
.reputation-bar .width10 { width: 10% }
.reputation-bar. width20 { width: 20% }
.reputation-bar. width30 { width: 30% }
.reputation-bar. width40 { width: 40% }
.reputation-bar. width50 { width: 50% }
.reputation-bar. width60 { width: 60% }
.reputation-bar. width70 { width: 70% }
.reputation-bar. width80 { width: 80% }
.reputation-bar. width90 { width: 90% }
  

 

برای اضافه نمودن تعداد تاپیک های ارسالی کاربر به بخش کاربری هوک Number of Topics Started را نصب کنید و بعد از قسمت Global Templates بیت hookTopicsStarted  باز کنید و کدهای زیر را جایگزین کدهای فعلی کنید.

<div class="right wa_userinfo_b4_1"><div><span class="wa_userinfo_b4_m">تعداد موضوع ها</span>
</div><div style="padding-top:5px;"><span style="font-size:15px;">{parse format_number="$topics"}</span></div></div>

برای نمایش بهتر بخش کاربری بهتر است از استایل قالب ipb_styles کد زیرا پیدا کنید و مقدار width را به 180 یا 200 تغییر دهید.

.author_info {
	width: 155px;

برای متمایز کردن بخش کاربری با قسمت پست می توانید کلاس .post_body از استایل قالب ipb_styles  پیدا کنید و کدهای زیرا جایگزین کدهای فعلی کنید.

margin-left:200px!important;
background:#FCFCFC;
padding-left:10px;
padding-top:10px;

برای اون آیکون ها و یا فیلدهایی که برای کاربران تعریف می کنید و می خواهید که در بخش کاربری نمایش داده شود ، باید به این شکل عمل کنید تا به همون صورت که در اسکرین شات می بینید نمایش داده شود

 

- وقتی فیلدی بصورت Text Input تعریف می کنید که کاربر یا لینک وارد می کند یا متن ، ( مثل محل سکونت) از حالت پایین استفاده میکنیم

در قسمت Topic View Format? کدها بدین صورت است

<span class='row_data ipsButton_secondary' >
<a href="{content}"> /// این قسمت وقتی لازم می شود که شما برای اون قسمت لینک قرار دهید اگر فقط یک آیکون ثابت است و بجایی لینک نمیشه این قسمت را حذف کنید.
<img src="آدرس تصویر/pic.png"></a></span>

- اما وقتی فیلدی بصورت Drop Down Box  تعریف می کنید، که کاربر باید از گزینه های تنظیم شده یک مورد را انتخاب کند باید فیلد بدین صورت باشد

در قسمت Topic View Format? کدها بدین صورت است

<span class='row_data ipsButton_secondary'><img src="َآدرس تصاویر/{key}.png"></span>

مثل نوع جنسیت که باید در قسمت Option Content (for drop downs, checkboxes and radio buttons) بدین شکل تنظیم شود 

u=Not Telling

m=male

f=female

باید داخل یک پوشه در هاست خود تصاویر را قرار دهید که مسیر آن را هم در کد بالا وارد کنید 

u,m,f نام تصویری هستند که مسیر آن را در کد بالا قرار دادیم که با key مشخض شده است مثل u.png که u همون key می باشد.

 

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

من دو نمونه از فیلدهایی که تعریف کردم اینجا قرار دادم که شاید کمکی باشد برای شما.

برای قسمت آیکون یاهو

<span class='row_data ipsButton_secondary' >
<a href="ymsgr:sendIM?{content}">
<img src="http://localhost/110/public/style_extra/cprofile_icons/profile_yahoo.gif"></a></span>

برای قسمت نوع جنسیت 

<span class='row_data ipsButton_secondary'><img src="http://localhost/IPB1/public/style_images/master/profile/{key}.png"></span>

 

 

موفق باشید و سربلند...

 

[persia 87]

ممنون از مطلب خوبتون واقعا عالی بود 

من فقفط قسمت اخرش این برای گذاشتن جنسیت و یاهو 

Topic View Format? 

اینو کد دادین بعدش کجا باید وارد کنیم ؟ این قسمت نداره تو CSS?

کد هایی که اخر دادین  کجا باید بزاریمشون ؟؟؟

عکسشونو که تو قالب بزاریم دیگه ؟

ممنون بازم

[Rámin 32]

علی جان خیلی ممنونم

[علی مددی 1689]

 

ممنون از مطلب خوبتون واقعا عالی بود 

من فقفط قسمت اخرش این برای گذاشتن جنسیت و یاهو 

Topic View Format? 

اینو کد دادین بعدش کجا باید وارد کنیم ؟ این قسمت نداره تو CSS?

کد هایی که اخر دادین  کجا باید بزاریمشون ؟؟؟

عکسشونو که تو قالب بزاریم دیگه ؟

ممنون بازم

 

داخل آموزش اشاره کردم 

 

 

برای اون آیکون ها و یا فیلدهایی که برای کاربران تعریف می کنید 

شما اگه بخواهید برای کاربران فیلدی تعریف کنید و اطلاعاتی ازشون بگیرید از قسمت Member >> Custom Profile Fields  فیلد تعریف یا ویرایش کنید (مثل فیلد ایمیل یاهو)

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

[persia 87]

ممنون از راهنمایی خوبت علی جان

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

[علی مددی 1689]

 

ممنون از راهنمایی خوبت علی جان

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

 

شما داخل استایل UserinfoPane  که ایجاد کردید کد زیرا پیدا کنید 

.wa_userinfo_b1 img {
height: 80px;

و مقدار 80 را تا 150 میتونید افزایش بدید چون داخل تنظیمات 150 تنظیم کردید.

[persia 87]

خیلی ممنون علی جون داداش درست درست شد فقط بزار این قسمت شکل رو به بچه ها کاملشو بگم وقتی شکل این جنسیت رو میزارن اسمشو به m  و یا f  ویا u تغیر بدن اسم شکل رو چون من با اسم male بود شکل رو نمیشناخت گفتم یه موقع کسی تو گذاشتن شکل مثل من نشه 1 ساعت طول کشید اینو بگیرم درست کنم ولی بالاخره درست شد ممنون

یه قسمت برای اونایی که مثل من مبتدی هستن تو KEY هیچی ننویسین بزارین همون KEY نوشته باشه علی داش یخورده پیچیده توضیح دادی خلاصش کردم  

خودم به این مشکلا بر خوردم گفتم شاید بعضی مثل من به این مشکل بخورن 

ممنون از همگی   

[علی مددی 1689]

 این مطالب بارها توضیح داده شده و اگر بخوام داخل یه تاپیک آموزشی همه این موارد جز به جز توضیح بدم باید بشنیم یه صبح تا شب تایپ کنم ، ولی با این حال تا جایی که تونستم توضیح دادم و اشاره شده ، چون شما آشنایی کمی با سیستم دارید به مشکل برخوردید...یایت توضیحاتی که دادید ممنون...

[gmeworld 4]

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

ممنون بابت آموزش بسیار عالی.

فقط یه سوال دوستان . من فقط میخواستم که آیکون ها رو مرتب کنم . به جای اینکه ردیفی بشن . مانند عکسی که توی پست اول گذاشته شده هم ردیف شن.

نتونستم کد مربوط به این رو از بین اونا پیدا کنم . مجبور میشدم کل کارا رو انجام بدم که کل تنظیمات خودم بهم میخورد.

بهر حال اینم اسکرین شات مشکلم.

http://8pic.ir/images/21kjpq0dujklhyv4xgo1.png

 

yahoo/skype/icm

به این صورت کنار هم بیان

[علی مددی 1689]

 اگر سایت شما آنلاین نیست لطف کنید کمی بیشتر توضیح بدید تا بدونیم از چه کد و روشی استفاده کردید...

ولی باید از کدهای قسمت userInfoPane استفاده کنید. که اون بخش هارو داخل div قرار دهید.

<!-- User Filed -->
<div class="wa_userinfo_b3">
<div style="padding-top:5px;">
...
.....
........