آموزش : مشخصات کاربری به صورت افقی

[MReza 407]

با سلام

 

احتمالن تا الآن شاهد انجمن‌هایی بوده‌اید که نحوه نمایش مشخصات کاربری آن‌ها به صورت عمودی نیست و به صورت افقی نمایش می‌یابد.

 

این یک آموزش برای تبدیل حالت پیش فرض به حالت افقی است که اصلش از اینجا برداشت شده.

 

وارد مسیر زیر بشوید:

Look And Feel >> (Your skin) >> Global Template >> userInfoPane

 

کدهای زیر را به صورت کامل جایگزین محتویات userInfoPane کنید.

<style>ul.basic_info_horizontal{width: 100%; margin: 3px 0px; display: table;}
ul.basic_info_horizontal li{padding: 3px 5px 0; width: 155px;margin-bottom: 3px; margin-right: 5px;
}
ul.no-border li{ text-align: center;}
ul.left-p li{padding-left: 20px; width: 88%;}
ul.basic_info_horizontal li:last-child{border: 0px;}
</style>
<div class='user_details' style='display: table; width: 100%;'>
<div style="text-align: left; float: left; ; margin-top:1px;">


</div>
<div style="width: 155px; text-align: center; float: left; margin: 8px 0 8px -8px;">
                                   <ul class='basic_info'>
<if test="authorwarn:|:$author['show_warn']">           
<li>                 
<if test="hasWarningId:|:$options['wl_id']">                     
<img src='http://yoursite.com/public/style_images/yourtheme/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>        
</li>         
</if>
<!-- Author's Rank Picture -->
<if test="avatar:|:$author['member_id']">
   <li class='avatar' style='margin-top: 8px;'><span>
            <a href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}" class='ipsUserPhotoLink'>
            <if test="hasVariable:|:$this->settings['member_topic_avatar_max']">
                 <img src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
            <else />
                 <img src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
            </if>
            </a>
   </span></li>
  <else />
   <li class='avatar'><div>
           <img src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
   </div></li>
  </if>


<!-- ONLINE/OFFLINE STATUS -->
<li><div style='margin-left:0px;'><!-- Margin setting for centering only!! -->
<!--<if test="authorOnline:|:$author['_online']"><span class='ipsBadge ipsBadge_green' style='font-size:11px; padding:0px 5px;'>Online</span><else /><span class='ipsBadge ipsBadge_grey' style='font-size:11px; padding:0px 5px;'>Offline</span></div></li></if>-->
</ul>
</div>




<!-- Second Column -->
<div style='float: left; width: 40%; margin-top: 8px;'>
<ul class='basic_info_horizontal'>
 <li><if test="postMember:|:$author['member_id']">
  <span itemprop="creator name" class="author vcard">{parse template="userHoverCard" group="global" params="$author"}</span>
<else />
  <b>{$author['members_display_name']}
<li></if>
<li class= 'desc member_title'>{$author['member_title']}
        </li>    
   </if>
<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>








  </li>
</ul>




</div>
<!-- Third Column -->
<div style='float: left; margin-top: 15px;'>
<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>


<!-- Fourth Column -->
<div style='float: right; width: 20%; margin: 8px 0 10px 20px;'>
<ul class='basic_info_horizontal left-p' style="text-align:left;width: 100%; margin-top: 0px; padding-top: 10px;">




  </li>
</if>
                                                  </li>
<!-- MEMBER POST -->
<li><img src='http://i1222.photobucket.com/albums/dd500/badnewz2/email.png' style='margin-right: 5px; margin-bottom: 3px'><b>Post:{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</b></li>         
<li><img src='http://i1222.photobucket.com/albums/dd500/badnewz2/pc.png' style='margin-right: 5px; margin-bottom: 3px'><b>Joined: <if test="authorJoined:|:$author['joined']">{parse date="$author['joined']" format="joined"}</b></li></if>
<li> <img src='http://i1222.photobucket.com/albums/dd500/badnewz2/user-1.png' style='margin-right: 5px; margin-bottom: 3px'><b>Member's ID: {$author['member_id']}</b>
<li><img src="http://yoursite.com/public/style_images/yourtheme/rep_up.png" <br="" style="
    ;
"> <style='margin-right: 13px; margin-bottom: 3px'><b>Reputation: <b><b style="
    background: #dedede url({style_images_url}/_custom/highlight_med.png) repeat-x;    color: #6e6e6e;                  border: 1px solid #c8c8c8;
    padding: 2px 10px;
">{parse expression="$this->lang->formatNumber( intval( $author['pp_reputation_points'] ) )"}</b></li>
  </if>


</div>
</div>
 

حال از زبانه CSS استایل را انتخاب کرده و پس از پیدا کردن کدهای قسمت زیر:

/* AUTHOR INFO (& RELATED) STYLES */

 

این کدها را به صورت کامل جایگزین آن کنید.

/* AUTHOR INFO (& RELATED) STYLES */


.column_view .post_wrap{
 background: #fbfbfb;
}


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


.author_info {
width:auto;
font-size:12px;padding:10px 10px;
line-height:150%;
border-bottom:1px solid #CCCCCC;
background: #E9EDEE;
}
.author_info li { list-style-image: none; list-style-type: none; }
.author_info a { color: #313131; }
.author_info a:hover { color: #5c5c5c; }


 .author_info .group_title {
  font-weight:bold;color:#5a5a5a;margin-top:5px
 }


 .author_info .member_title { margin-bottom: 5px; }
 .author_info .group_icon { margin-bottom: 3px; }


.smalltext {
color: #666;
position: relative;
right: 30px;
}

درنهایت به این شکل می‌شود:

 

با تشکر

[STALKER 328]

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