رفتن به مطلب

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


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

  • مدیر کل بازنشسته سایت
سلام ، برحسب درخواست یکی از کاربران این آموزش آماده و تکمیل شده است.
 
نکته : این تغییرات فقط روی قالبی که کدها را تغییر می دهید اعمال خواهد شد نه در تمامی قالب ها
 
post-1632-0-75392900-1406291951.jpg
 
 
اون تصویر پشت آواتار همون بخش شخصی سازی پروفایل است که تصویر یا رنگی که برای بخش پروفایل انتخاب می کنید، در بخش کاربری هم نمایش داده می شود.
 
به بخش اسنایل و تمپلت قالب مورد نظر رفته  
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>

 
 
موفق باشید و سربلند... :)
 
لینک ارسال
به اشتراک گذاری در سایت های دیگر

  • پاسخ 20
  • ایجاد شد
  • آخرین پاسخ

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


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


Topic View Format? 


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


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


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


ممنون بازم :x


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

  • مدیر کل بازنشسته سایت

 

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

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

Topic View Format? 

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

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

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

ممنون بازم :x

 

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

 

 

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

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

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

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

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


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


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

  • مدیر کل بازنشسته سایت

 

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

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

 

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

.wa_userinfo_b1 img {
height: 80px;

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

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

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


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


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


ممنون از همگی  :DD:  :chakerim:


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

  • مدیر کل بازنشسته سایت

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

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

  • 3 ماه بعد...

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

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

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

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

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

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

 

yahoo/skype/icm

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

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

  • مدیر کل بازنشسته سایت

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

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

<!-- User Filed -->
<div class="wa_userinfo_b3">
<div style="padding-top:5px;">
...
.....
........
لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

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

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...

اطلاعات مهم

ما مجبور شدیم تا از کوکی ها و فناوری های مشابه برای اجرای این وب سایت استفاده کنیم تا بتوانیم تجربه بهتری در زمان استفاده از سایت برای شما ایجاد نماییم. سیاست حریم خصوصی.