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

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

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

شرح التركيب

اولا نبحث عن القالب التالي بالاستايل اللي بتريد التغيير فيه
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;
}

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

نتيجة قالب البيانات مثل هيلبرنت
Motasem Hanani
WRITTEN BY

Motasem Hanani

مطور مواقع، مصمم، ممنتج وكاتب محتوى. اسعى الى تغذية المحتوى العربي التطويري والثقافي في كل ما هو حصري ومفيد بعيداً عن النقل العشوائي والبرامج القديمه التالفة.