جعل بيانات العضو في المشاركات مثل هيلبرنت

شرح لجعل بيانات العضو في المشاركات مثل منتدى هيلبرنت وذلك للتعديل على استايل هيلبرنت لمن اراد من خلال تعديل بعض الاكواد بالقوالب …

شرح التركيب

اولا نبحث عن القالب التالي بالاستايل اللي بتريد التغيير فيه
writer_info
ونستبدله بالكود التالي

<script type="text/javascript">
$(document).ready(function(){
$("#emenu_{$Info['id']}_{$Info['reply_id']}").click(function(){
$(this).next("#menue_{$Info['id']}_{$Info['reply_id']}").slideToggle("slow");
})

  $('.text').click(function(){
    $("#menue_{$Info['id']}_{$Info['reply_id']}").hide("fast");
    $("#menue_{$Info['id']}_{$Info['reply_id']}").css('display', 'none');
    })

});
</script>
<!-- table --><div style="width:100%; padding:3px;" class="table writers_info">
<dl>
<dt></dt>
<div style="vertical-align: top;" class="w_photo">
<div class="UserPhoto_large">
{if {$_CONF['info_row']['allow_avatar']} == '1'}
{if {$ReplierInfo['avater_path']} != ''}
<a rel="nofollow" href="index.php?page=profile&amp;show=1&amp;id={$ReplierInfo['id']}">
<img src="{$ReplierInfo['avater_path']}" class="brd0" title="{$lang['Picture']} {$ReplierInfo['username']} {$lang['Personal']}" alt="{$lang['Picture']}{$ReplierInfo['username']}{$lang['Personal']}" />
</a>
{else}
<a rel="nofollow" href="index.php?page=profile&amp;show=1&amp;id={$ReplierInfo['id']}">
<img src="{$image_path}/
{$_CONF['info_row']['default_avatar']}" class="brd0" alt="{$lang['no_photo']}" title="{$lang['no_photo']}"  />
</a>
{/if}
{/if}
</div>
</div>
<div class="Triangle"></div>
<dd class="w_name_rate">
<!-- Code switch Menu start -->
<div id="emenu_{$Info['id']}_{$Info['reply_id']}">
{if {$ReplierInfo['username']} !=''}
<b class="bigusername">{$ReplierInfo['username']}</b>
{else}
<b class="bigusername">{$lang['Guest_']}</b>
{/if}
</div>
<div class="border" style="display:none;position: absolute;z-index: 999999;" id="menue_{$Info['id']}_{$Info['reply_id']}">
<div class="thead">
{if {$ReplierInfo['username']} !=''}
<a href="index.php?page=profile&amp;show=1&amp;id={$ReplierInfo['id']}">





{$ReplierInfo['display_username']}</a>
{else}
<b>{$lang['Guest_']}</b>
{/if}
</div>
<div class="row1">
<a rel="nofollow" href="index.php?page=profile&amp;show=1&amp;id={$ReplierInfo['id']}">
{$lang['view_profile']}
</a>
</div>
<div class="row1">
<a href="index.php?page=search&amp;option=3&amp;username={$ReplierInfo['username']}&amp;starteronly=0&amp;section=all&amp;exactname=1&amp;sort_order=DESC">
{$lang['search_for_all_posts']}
{$ReplierInfo['username']}</a>
</div>
<div class="row1">
<a href="index.php?page=search&amp;option=4&amp;username={$ReplierInfo['username']}&amp;starteronly=0&amp;section=all&amp;exactname=1&amp;sort_order=DESC">
{$lang['search_for_all_replys']}
{$ReplierInfo['username']}</a>
</div>
{if {$_CONF['member_permission']}}
<div class="row1">
<a href="index.php?page=pm_send&amp;send=1&amp;index=1&amp;username={$ReplierInfo['username']}">
{$lang['send_a_private_message_to']}
{$ReplierInfo['username']} </a>
</div>
{/if}
{if {$_CONF['member_permission']}}
<div class="row1">
<a href="index.php?page=send&amp;member=1&amp;index=1&amp;id={$ReplierInfo['id']}">
{$lang['send_a_message_to_the_mailing']}
{$ReplierInfo['username']} </a>
</div>
{/if}
{if {$mod_edit_member}}
{if {$_CONF['member_permission']}}
<div class="row1">
<a target="_blank" href="{$admincpdir}?page=member&amp;edit=1&amp;main=1&amp;id=
{$ReplierInfo['id']}">
{$lang['edit_member_data']}
{$ReplierInfo['username']} </a>
</div>
{/if}
{/if}
</div>
<!-- Code switch Menu End -->
<!-- action_find_addons_1 -->
{if {$ReplierInfo['username']} !=''}
<div class="smallfont center_text_align">
{if {$GroupInfo['usertitle_change']} == 1}
{if {$Usertitle} != ''}
{$Usertitle}
{else}
{$ReplierInfo['user_title']}
{/if}
{else}
{if !{$ReplierInfo['user_title']}}
{$GroupInfo['user_title']}
{else}
{$ReplierInfo['user_title']}
{/if}
{/if}
</div>
{if {$RatingInfo['posts']} > {$ReplierInfo['posts']}}
{if {$RatingInfo['rating']} != 'look/images/rating/rating_0.gif'}
<div class="center_text_align" style="margin-top:10px">
<img class="brd0" alt="rating" src="{$RatingInfo['rating']}" />
</div>
{/if}
{/if}
{/if}
{if {$_CONF['info_row']['allow_apsent']} == '1'}
{if {$ReplierInfo['away']}}
<div class="w_absent">
<fieldset>
<legend><span class="smallfont">{$lang['user_Absent']}</span></legend>
<span class="smallfont">
{$ReplierInfo['away_msg']}
</span>
</fieldset>
</div>
{/if}
{/if}
<!-- action_find_addons_8 -->
</dd>
<dd class="w_others">
<!-- action_find_addons_7 -->
</dd>
<!-- action_find_addons_5 -->
{if {$Awards_nm} > '0'}
<dd class="w_awards">
<div class="user_awards">
{template}awards{/template}
</div>
</dd>
{/if}
<dd class="center_text_align w_lasts">
<!-- action_find_addons_6 -->
{if !{$Info['reply_id']}}
{if {$_CONF['info_row']['show_list_last_5_posts_member']} == 1}
{template}last_subject_writer{/template}
{/if}
{/if}
</dd>
<dd class="CommUserInfo">
<table style="margin-bottom: 4px; border-bottom: 1px solid rgb(213, 213, 213);" width="100%">
<tbody><tr>
<!-- action_find_addons_2 -->
{get_hook}writer_info_top{/get_hook}
{if {$ReplierInfo['username']} !=''}
<div class="w_toggle" title="{$lang['information_writer']}">
<i class="w_toggle_writer fa fa-toggle-on fa-1x"><span class="w_writer"> {$lang['information_writer']} ▼</span></i>
<td align="center" width="65px"><div style="color:rgb(71, 91, 237)" class="badge1 icov4">&#58976;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['join_date']}<br> {$ReplierInfo['register_date']}</small></td>

</div>
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(10, 143, 231)" class="badge1 icov4">&#58885;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['user_num']} <br> {$ReplierInfo['id']}</small></td>

</div>
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(255, 10, 10)" class="badge1 icov4">&#58989;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['posts']}<br> {$ReplierInfo['posts']}</small></td>
 

</div>
{if {$ReplierInfo['user_country']} != ''}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(255, 18, 198)" class="badge1 icov4">&#58936;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['user_country']}<br> {$ReplierInfo['user_country']}</small></td>

</div>
{/if}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(78, 143, 18)" class="badge1 icov4"><i class="fa fa-venus-mars" aria-hidden="true"></i></div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['user_gender']}<br> {if {$ReplierInfo['user_gender']} == m}
<img title="{$lang['gender_m']}"
alt="{$lang['gender_m']}"
src="{$image_path}/gender_male.gif" />
{else}
<img title="{$lang['gender_f']}"
alt="{$lang['gender_f']}"
src="{$image_path}/gender_female.gif" />
{/if}</small></td>

</div>
{if {$ReplierInfo['bday_year']} != ''}
{if {$ReplierInfo['bday_year']} != '0'}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(255, 10, 10)" class="badge1 icov4"><i class="fa fa-birthday-cake" aria-hidden="true"></i></div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['Birth_date']}<br> {$ReplierInfo['bday_day']}-{$ReplierInfo['bday_month']}-{$ReplierInfo['bday_year']}</small></td>
 

</div>
{/if}
{/if}
{if {$ReplierInfo['invite_num']} != '0'}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(255, 10, 10)" class="badge1 icov4">&#58989;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['Invites']}<br> {$ReplierInfo['invite_num']}</small></td>
 
</div>
{/if}
{if {$ReplierInfo['warnings']} > 0}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:rgb(255, 10, 10)" class="badge1 icov4">&#58989;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['user_warnings']}<br> {$ReplierInfo['warnings']}</small></td>
 
</div>
{/if}
{if {$ReplierInfo['reputation']} != ''}
<div class="writer_info right_text_align">
<td align="center" width="65px"><div style="color:#509000" class="badge1 icov4">&#58957;</div><br>
        <small style=" font-size: 10px;font-weight: lighter;display: block;white-space: normal;overflow: hidden !important;text-overflow: ellipsis;">{$lang['user_reputation']}<br> {$ReplierInfo['reputation']}</small></td>

</div>
   </tr>
</tbody></table>
<!-- action_find_addons_3 -->
{/if}
{if !empty({$ReplierInfo['user_website']}) and {$ReplierInfo['user_website']} != 'http://'}
<div class="writer_info right_text_align">
{$lang['UserWebsite']} :
<?php if (strstr($PowerBB->_CONF['template']['ReplierInfo']['user_website'],'http://')) {  ?>
<a target="_blank" href="{$ReplierInfo['user_website']}">{$lang['Visit_my_website']}</a>
<?php }else{ ?>
<a target="_blank" href="http://{$ReplierInfo['user_website']}">{$lang['Visit_my_website']}</a>
{/if}
</div>
{/if}
{if is_array({$while['extrafield']})==true }
{Des::while}{extrafield}
<?php if( $PowerBB->_CONF['template']['ReplierInfo'][ $PowerBB->_CONF['template']['while']['extrafield'][$this->x_loop]['name_tag'] ]!='' ){ ?>
<div class="writer_info right_text_align">
{$extrafield['name']} :
<?php $PowerBB->_CONF['template']['ReplierInfo'][ $PowerBB->_CONF['template']['while']['extrafield'][$this->x_loop]['name_tag'] ] = $PowerBB->functions->CleanVariable($PowerBB->_CONF['template']['ReplierInfo'][ $PowerBB->_CONF['template']['while']['extrafield'][$this->x_loop]['name_tag'] ],'html'); ?>
<?php echo $PowerBB->_CONF['template']['ReplierInfo'][ $PowerBB->_CONF['template']['while']['extrafield'][$this->x_loop]['name_tag'] ] ?>
</div>
<?php }else{ ?>
<?php } ?>
{/Des::while}
{/if}
<div class="center_text_align" style="margin-top:10px">
<!--    {$lang['Case']} : -->
<?php
 if (strstr($PowerBB->_CONF['template']['status'],"icon_user_online.gif")){
 ?>
<a class="UserOnline00">متواجد الان<span></span></a>
<?php
}
else
{
 ?>
<a class="UserOffline00">غير متواجد<span></span></a>
<?php
}
?>
{if !{$admin_mod_toolbar}}
<a title="{$lang['send_warn_to_mem']}
{$ReplierInfo['username']}" href="index.php?page=warn&amp;index=1&amp;id={$ReplierInfo['id']}"><img class="brd0" alt="{$lang['send_warn_to_mem']}"
src="{$image_path}/warn.png" /></a>
{/if}
{if {$_CONF['rows']['group_info']['admincp_allow']}}
{if {$ReplierInfo['member_ip']} != ''}
<img title="{$lang['user_IP']}:
{$ReplierInfo['member_ip']}" alt="User IP" class="brd0" src="{$image_path}/information.png" />
{/if}
{/if}
</div>
<!-- action_find_addons_4 -->
{get_hook}writer_info_down{/get_hook}
</dd>
{/if}
</dl>
</div><!-- /table -->

ومن ثم نتوجه نحو “تحرير css متقدم”
ونضيف الاكواد التالية

.CommUserInfo {
    color: #565656;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 0.6em;
    font-weight: lighter;
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 10px;
    width: 500px;
    float: left;
    margin-left: 8px;
    background: #F3F3F3;
}
.CommUserInfo span {
    color: #565656;
font-size: 13px;
}

.TmpPost .HeaderPost .CommUserInfo {
    color: #565656;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 0.6em;
    font-weight: lighter;
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 10px;
    width: 500px;
    float: left;
    margin-left: 8px;
    background: #F3F3F3;
}

.TmpComments .RightPost .CommUserInfo {
    color:#393939;
    font-family:"Droid Arabic Kufi","Open Sans",sans-serif;
    font-size:0.6em;
    font-weight:lighter;
    margin-bottom:5px;
    padding: 0px;
    margin: 2px;
    border: 1px solid #D9F5BF;
    border-radius: 3px;
    background-color: #fff;
}
.TmpComments .RightPost .CommUserInfo span {
    color: #D9EBEB;
    text-shadow: 0px 0px 2px #35501B;

}

.TmpComments .RightPost .CommUserInfo .Memberpost {
    width: 15px;
    text-align: center;
    padding: 3px;
    background-color: #D9EBEB;
    font-size: 13px;
}
.TmpComments .RightPost .CommUserInfo {

    display: none;
}
.TmpPost .HeaderPost .CommUserInfo {
    display: none;
}
.badge {
    font-size: 28px;
    padding: 5px;
}
.badge1 {
    font-size: 30px;
    padding: 5px;
}
.badge2 {
    font-size: 30px;
    padding: 5px;
}

معاينة النتيجة